Hello, implementing the x-editable extension, to create an record online, I have a little problem, i dont know where should I place these codes (Save button click,Reset button click and [color=#333333]php code), [/color][font="Helvetica Neue, Helvetica, Arial, sans-serif"][color="#333333"][size=4]I highlight below[/size][/color][/font].
fuente web : vitalets.github.io/x-editable/docs.html#newrecord
============================================================
[b]
[/b]
View Create:
[size=2]
[/size]
[size=2]$model= new Perfiles;[/size]
[size=2] $this->widget(‘editable.EditableDetailView’, array([/size]
'data' => $model,
[size=2] //you can define any default params for child EditableFields [/size]
'url' => $this->createUrl('Perfiles/updateUser'), //common submit url for all fields
'params' => array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken), //params for all fields
'emptytext' => 'Sin valor',
'apply' => true, //you can turn off applying editable to all attributes
[size=2] [/size][size=2]‘placement’ => ‘right’,[/size]
'attributes' => array(
array(
'name' => 'perfilesId',
'editable' => array(
'type' => 'text',
'inputclass' => 'input-large',
'emptytext' => 'special emptytext',
'validate' => 'function(value) {
if(!value) return "User Name is required (client side)"
}'
)
),
array(
'name' => 'nombre',
'editable' => array(
'type' => 'text',
'inputclass' => 'input-large',
'emptytext' => 'special emptytext',
'validate' => 'function(value) {
if(!value) return "User Name is required (client side)"
}'
)
),
array(
'name' => 'descripcion',
'editable' => array(
'type' => 'text',
'inputclass' => 'input-large',
'emptytext' => 'special emptytext',
'validate' => 'function(value) {
if(!value) return "User Name is required (client side)"
}'
)
),
array( //select loaded from ajax.
'name' => 'activo',
'editable' => array(
'type' => 'select',
'title'=>'Estado del Usuario',
'source' => array('0'=>'Inactivo','1'=>'Activo'),
)
),
)
));
[size=2]?>[/size]
</div><br>
<div class="editable-buttons">
<?php
$this->widget('bootstrap.widgets.TbButton', array(
'label'=>'Guardar Nuevo',
'htmlOptions'=>array(
'class'=>'btn btn-primary',
'onclick'=>'js:
[size=2] [/size][size=2]’)[/size]
[size=2] [/size][size=2]));[/size]
[size=2] [/size][size=2]?>[/size]
<button id="reset-btn" class="btn">cancel</button>
</div>
<div class="editable-error-block"></div>
</form>
=============================================================
Save button click [color="#ff00ff"] ?
??? Where?[/color]
- [color=#48484C]$[/color]color=#93A1A1.[/color][color=#48484C]click[/color][color=#93A1A1]([/color][color=#1E347B]function[/color]color=#93A1A1[/color][color=#48484C] [/color][color=#93A1A1]{[/color]
- [color=#48484C] $[/color]color=#93A1A1.[/color][color=#48484C]editable[/color][color=#93A1A1]([/color][color=#DD1144]‘submit’[/color][color=#93A1A1],[/color][color=#48484C] [/color][color=#93A1A1]{[/color][color=#48484C] [/color]
- [color=#48484C] url[/color][color=#93A1A1]:[/color][color=#48484C] [/color][color=#DD1144]’/newuser’[/color][color=#93A1A1],[/color][color=#48484C] [/color]
- [color=#48484C] ajaxOptions[/color][color=#93A1A1]:[/color][color=#48484C] [/color][color=#93A1A1]{[/color]
- [color=#48484C] dataType[/color][color=#93A1A1]:[/color][color=#48484C] [/color][color=#DD1144]‘json’[/color][color=#48484C] [/color][color=#93A1A1]//assuming json response[/color]
- [color=#48484C] [/color][color=#93A1A1]},[/color][color=#48484C] [/color]
- [color=#48484C] success[/color][color=#93A1A1]:[/color][color=#48484C] [/color][color=#1E347B]function[/color][color=#93A1A1]([/color][color=#48484C]data[/color][color=#93A1A1],[/color][color=#48484C] config[/color][color=#93A1A1])[/color][color=#48484C] [/color][color=#93A1A1]{[/color]
- [color=#48484C] [/color][color=#1E347B]if[/color][color=#93A1A1]([/color][color=#48484C]data [/color][color=#93A1A1]&&[/color][color=#48484C] data[/color][color=#93A1A1].[/color][color=#48484C]id[/color][color=#93A1A1])[/color][color=#48484C] [/color][color=#93A1A1]{[/color][color=#48484C] [/color][color=#93A1A1]//record created, response like {"id": 2}[/color]
- [color=#48484C] [/color][color=#93A1A1]//set pk[/color]
- [color=#48484C] $[/color]color=#93A1A1.[/color][color=#48484C]editable[/color][color=#93A1A1]([/color][color=#DD1144]‘option’[/color][color=#93A1A1],[/color][color=#48484C] [/color][color=#DD1144]‘pk’[/color][color=#93A1A1],[/color][color=#48484C] data[/color][color=#93A1A1].[/color][color=#48484C]id[/color][color=#93A1A1]);[/color]
- [color=#48484C] [/color][color=#93A1A1]//remove unsaved class[/color]
- [color=#48484C] $[/color]color=#93A1A1.[/color][color=#48484C]removeClass[/color]color=#93A1A1;[/color]
- [color=#48484C] [/color][color=#93A1A1]//show messages[/color]
- [color=#48484C] [/color][color=#1E347B]var[/color][color=#48484C] msg [/color][color=#93A1A1]=[/color][color=#48484C] [/color][color=#DD1144]‘New user created! Now editables submit individually.’[/color][color=#93A1A1];[/color]
- [color=#48484C] $[/color]color=#93A1A1.[/color][color=#48484C]addClass[/color]color=#93A1A1.[/color][color=#48484C]removeClass[/color]color=#93A1A1.[/color][color=#48484C]html[/color]color=#93A1A1.[/color][color=#48484C]show[/color]color=#93A1A1;[/color]
- [color=#48484C] $[/color]color=#93A1A1.[/color][color=#48484C]hide[/color]color=#93A1A1;[/color][color=#48484C] [/color]
- [color=#48484C] $[/color]color=#93A1A1.[/color][color=#48484C]off[/color]color=#93A1A1;[/color][color=#48484C] [/color]
- [color=#48484C] [/color][color=#93A1A1]}[/color][color=#48484C] [/color][color=#1E347B]else[/color][color=#48484C] [/color][color=#1E347B]if[/color][color=#93A1A1]([/color][color=#48484C]data [/color][color=#93A1A1]&&[/color][color=#48484C] data[/color][color=#93A1A1].[/color][color=#48484C]errors[/color][color=#93A1A1]){[/color][color=#48484C] [/color]
- [color=#48484C] [/color][color=#93A1A1]//server-side validation error, response like {"errors": {"username": "username already exist"} }[/color]
- [color=#48484C] config[/color][color=#93A1A1].[/color][color=#48484C]error[/color][color=#93A1A1].[/color][color=#48484C]call[/color][color=#93A1A1]([/color][color=#1E347B]this[/color][color=#93A1A1],[/color][color=#48484C] data[/color][color=#93A1A1].[/color][color=#48484C]errors[/color][color=#93A1A1]);[/color]
- [color=#48484C] [/color][color=#93A1A1]}[/color][color=#48484C] [/color]
- [color=#48484C] [/color][color=#93A1A1]},[/color]
- [color=#48484C] error[/color][color=#93A1A1]:[/color][color=#48484C] [/color][color=#1E347B]function[/color]color=#93A1A1[/color][color=#48484C] [/color][color=#93A1A1]{[/color]
- [color=#48484C] [/color][color=#1E347B]var[/color][color=#48484C] msg [/color][color=#93A1A1]=[/color][color=#48484C] [/color][color=#DD1144]’’[/color][color=#93A1A1];[/color]
- [color=#48484C] [/color][color=#1E347B]if[/color][color=#93A1A1]([/color][color=#48484C]errors [/color][color=#93A1A1]&&[/color][color=#48484C] errors[/color][color=#93A1A1].[/color][color=#48484C]responseText[/color][color=#93A1A1])[/color][color=#48484C] [/color][color=#93A1A1]{[/color][color=#48484C] [/color][color=#93A1A1]//ajax error, errors = xhr object[/color]
- [color=#48484C] msg [/color][color=#93A1A1]=[/color][color=#48484C] errors[/color][color=#93A1A1].[/color][color=#48484C]responseText[/color][color=#93A1A1];[/color]
- [color=#48484C] [/color][color=#93A1A1]}[/color][color=#48484C] [/color][color=#1E347B]else[/color][color=#48484C] [/color][color=#93A1A1]{[/color][color=#48484C] [/color][color=#93A1A1]//validation error (client-side or server-side)[/color]
- [color=#48484C] $[/color][color=#93A1A1].[/color][color=#48484C]each[/color][color=#93A1A1]([/color][color=#48484C]errors[/color][color=#93A1A1],[/color][color=#48484C] [/color][color=#1E347B]function[/color][color=#93A1A1]([/color][color=#48484C]k[/color][color=#93A1A1],[/color][color=#48484C] v[/color][color=#93A1A1])[/color][color=#48484C] [/color][color=#93A1A1]{[/color][color=#48484C] msg [/color][color=#93A1A1]+=[/color][color=#48484C] k[/color][color=#93A1A1]+[/color][color=#DD1144]": "[/color][color=#93A1A1]+[/color][color=#48484C]v[/color][color=#93A1A1]+[/color][color=#DD1144]"<br>"[/color][color=#93A1A1];[/color][color=#48484C] [/color][color=#93A1A1]});[/color]
- [color=#48484C] [/color][color=#93A1A1]}[/color][color=#48484C] [/color]
- [color=#48484C] $[/color]color=#93A1A1.[/color][color=#48484C]removeClass[/color]color=#93A1A1.[/color][color=#48484C]addClass[/color]color=#93A1A1.[/color][color=#48484C]html[/color]color=#93A1A1.[/color][color=#48484C]show[/color]color=#93A1A1;[/color]
- [color=#48484C] [/color][color=#93A1A1]}[/color]
- [color=#48484C] [/color][color=#93A1A1]});[/color]
- [color=#93A1A1]});[/color]
[font="Monaco, Menlo, Consolas, Courier New, monospace"][size="2"][color="#93a1a1"]
[/color][/size][/font]
Reset button click: [color="#ff00ff"]?
??? where [/color]
- [color=#48484C]$[/color]color=#93A1A1.[/color][color=#48484C]click[/color][color=#93A1A1]([/color][color=#1E347B]function[/color]color=#93A1A1[/color][color=#48484C] [/color][color=#93A1A1]{[/color]
- [color=#48484C] $[/color]color=#93A1A1.[/color][color=#48484C]editable[/color][color=#93A1A1]([/color][color=#DD1144]‘setValue’[/color][color=#93A1A1],[/color][color=#48484C] [/color][color=#1E347B]null[/color][color=#93A1A1])[/color][color=#48484C] [/color][color=#93A1A1]//clear values[/color]
- [color=#48484C] [/color][color=#93A1A1].[/color][color=#48484C]editable[/color][color=#93A1A1]([/color][color=#DD1144]‘option’[/color][color=#93A1A1],[/color][color=#48484C] [/color][color=#DD1144]‘pk’[/color][color=#93A1A1],[/color][color=#48484C] [/color][color=#1E347B]null[/color][color=#93A1A1])[/color][color=#48484C] [/color][color=#93A1A1]//clear pk[/color]
- [color=#48484C] [/color][color=#93A1A1].[/color][color=#48484C]removeClass[/color]color=#93A1A1;[/color][color=#48484C] [/color][color=#93A1A1]//remove bold css[/color]
- [color=#48484C] [/color]
- [color=#48484C] $[/color]color=#93A1A1.[/color][color=#48484C]show[/color]color=#93A1A1;[/color]
- [color=#48484C] $[/color]color=#93A1A1.[/color][color=#48484C]hide[/color]color=#93A1A1;[/color][color=#48484C] [/color]
- [color=#93A1A1]});[/color]
[font="Monaco, Menlo, Consolas, Courier New, monospace"][size="2"][color="#93a1a1"]
[/color][/size][/font]
php code: [color="#ff00ff"]?
??? where [/color]
[font="Monaco, Menlo, Consolas, Courier New, monospace"][size="2"][color="#93a1a1"]
<?php
if($model->isNewRecord) {
Yii::app()->clientScript->registerScript('new-model', '
$("#save-btn").click(function() {
$(this).parent().parent().find(".editable").editable("submit", {
url: "'.$this->createUrl('Perfiles/createPerfiles').'",
data: '.CJSON::encode(array('YII_CSRF_TOKEN' => Yii::app()->request->csrfToken)).',
ajaxOptions: { dataType: "json" },
success: function(data, config) {
if(data && data.id) {
$(this).editable("option", "pk", data.id);
$(this).removeClass("editable-unsaved");
$("#msg").removeClass("alert-error").addClass("alert-success")
.html("User created! Now you can update it.").show();
$("#save-btn").hide();
} else {
config.error.call(this, data && data.errors ? data.errors : "Unknown error");
}
},
error: function(errors) {
var msg = "";
if(errors && errors.responseText) {
msg = errors.responseText;
} else {
$.each(errors, function(k, v) { msg += v+"<br>"; });
}
$("#msg").removeClass("alert-success").addClass("alert-error")
.html(msg).show();
}
});
});
');
}
?>[/color][/size][/font]