Standalone editor problems....
Standalone editor problems....
ztevie
Posts: 101Questions: 23Answers: 5
I've run into a problem which may be unsolvable... I've wrestled it for 2 days and I can't make it work. But it may be the complexity of what I want to do that is not possible... Let's see:
I need to use the standalone editor method. Some fields will be bubble, and others will be included in a form.
Since it's standalone I'm getting the data from my own constructed php. I've compared the result and it seems to match everything else I've done before using datatables editor php-scripts.
Now, the bubble editing works just fine. I click the cell and updates the field as it should. I'm having problem with the form editing though, and haven't even started with the php on the server side. It seems somehow the form editor don't accept any of the data.
I've tried both edit() and create() but can't get the fields to accept anything, they are all empty...
Using create() that would be fine, except for one thing: I'm having 2 selects in there, and can't get them to fill up. Even when I try edit() the "normal" fields are empty and won't get the values in there.
Here's the code I've got so far, I'll just include the essential code:
<div class="panel-body" style="padding:0px; margin: 0px;">
<table class="shifttbl">
<tr>
<td class="text-right shift_tdl">Fabrikat:</td>
<td class="text-left shift_tdr" id="bb_name" data-editor-field="bitmodels.bitbrand_id" data-bit-val=""></td>
</tr>
<tr>
<td class="text-right shift_tdl">Typ:</td>
<td class="text-left shift_tdr" id="bm_name" data-editor-value="" data-editor-field="drillbits.bitmodel_id" data-bit-val=""></td>
</tr>
<tr>
<td class="text-right shift_tdl">Nummer:</td>
<td class="text-left shift_tdr" id="db_name" data-editor-field="drillbits.bit_name" data-bit-val=""></td>
</tr>
<tr>
<td class="text-right shift_tdl">Metrar:</td>
<td class="text-left shift_tdr" id="db_meters" data-editor-field="drillbits.bit_meters"></td>
</tr>
<tr>
<td class="text-center" colspan="2">
<a id="btn-bitswap" class="dt-button buttons-create"aria-controls="" href="#">
<span><i class="fa fa-rotate-left"> BYT KRONA</i></span>
</a>
</td>
</tr>
</table>
</div>
function getShift(rid, sid){
bEditor = new $.fn.dataTable.Editor( {
ajax: "../_includes/process_bitswap.php",
fields: [
{
label: "SELECT1:",
name: "bitmodels.bitbrand_id",
type: "select"
}, {
label: "SELECT2:",
name: "drillbits.bitmodel_id",
type: "select"
}, {
label: "FIELDINPUT1:",
name: "drillbits.bit_name"
}, {
label: "FIELDINPUT2:",
name: "drillbits.bit_meters"
}
]
});
sEditor = new $.fn.dataTable.Editor( {
ajax: "../_includes/process_getshift.php",
fields: [
{ "name": "shifts.shift_start_righours"
},
{ "name": "shifts.shift_end_righours"
},
],
formOptions: {
bubble: {
submit: 'changed'
}
}
});
$.ajax({
type: 'POST',
url: "../_includes/process_drillshift.php",
dataType: 'json',
data: { action: 'getshift',
rigid: rid,
shiftid: sid
},
success: function(response) {
if(response["valid"]){
var r_arr = response["data"][0];
$("#shift-heading" ).html('<h5><strong>'+rigActiveName+' | '+r_arr.shifts["shift_date"]+' | '+r_arr.shiftdescs["shiftdesc_name"]+' | '+r_arr.workteam["workteam_name"]+'</strong></h5>');
$( "#db_name" ).text(r_arr.drillbits["bit_name"]);
$( "#bm_name" ).text(r_arr.bitmodels["bitmodel_name"]);
$( "#bb_name" ).text(r_arr.bitbrands["bitbrand_name"]);
$( "#db_meters" ).text(r_arr.drillbits["bit_meters"]);
$("#shift-div").attr("data-editor-id", "row_"+sid);
}
else{
alert("FEL");
}
},
error: function(){
}
});
$('#shift-panel').collapse('show');
$(window).scrollTop(0);
$('[dt-bubble]').on( 'click', function (e) {
sEditor.bubble(this);
});
$('#btn-bitswap').on( 'click', function () {
bEditor
.buttons( [
{
label: '<i class="fa fa-undo"></i >Avbryt',
fn: function () { this.close(); }
},
{
label: '<i class="fa fa-floppy-o"></i> SPARA',
fn: function () { this.submit(); }
}
]
)
.edit({title: "Lägg till ny krona"});
} );
};
And parts of the result looks like in the image I attached, the options holds the SELECT values I want.
Another question is if it's possible to when the form is sent, can I make it insert in one table and at the same time just update values in others? If so hould I use Create or Edit?
I don't really want to make a new row of the data I have, it's more like I want to edit the same row, but insert a row in one of the joined tables?
This question has an accepted answers - jump to answer
Answers
Ok, as always just after I make a question I will make some progress...
I managed to update a select with the correct values with field.update...
However it seems the editor does something cause only one select will be loaded with values. Here's what I did:
First I set the options arrays into variabales, and then I update their respective field, but only the first one takes effect? If I swap the order of updates the other one is updated correctly.
It looks promising though cause when submitting, the parameters looks just fine, data[0][bitmodels][bitbrand_id]: "2" for example....
Am I on the right track?
Also, I would like to have dependent involved, so depending on what bitbrand is selected, only some bitmodel should be available in the next select... Is this possible without doing more ajax calls? Maybe if I for example can attach an extra field to the bitmodel array when fetching data that contains the bitbrand id?
Well... I found the .on('open') method, it seems to work for now. Both selects are filled now. Are there better methods?
Now I just need to figure out dependent thing, any advice? I hope a rewrite of one select will not cause the other's values to disappear?
Here's my solution for now:
Hi,
The key to having a single table editor is to create the static HTML with a
data-editor-idattribute on a container element, so Editor knows what row should be edited when you submit the data. That way, when you calledit()you would call it with the id that has been set.It would also be worth looking into this example, although obviously you would limit it to a single form in your case.
Allan
Thanks!
Yes I'm using data-editor-id in a parent element. Not the closest parent, but does that matter? As I said the bubble edit works fine but the form doesn't.
Also, must every data-editor-id on a page be unique when value fields in the forms are named differently?
So all the data-editor-field's and html ID's for the value elements are unique but the different data-editor-id's may or may not be, depending on what the initial Ajax call returns...
No it shouldn't make any difference. I don't see it in the above HTML, but I might be being blind!
The ID needs to be able to uniquely address the row to be edited on the database. It is the id that Editor sends to the server and says "here, edit this". Without that id the server-side wouldn't know what to edit.
What you could do is just use a jQuery attribute selector to find the element with the
data-editor-idattribute, get its value and then calledit()with it.Allan
Ok, thanks!
Every data-editor-field for the standalone editors on the page has unique values. I understand there should be no problems then, even if data-editor-id's might be the same on different containers.
Here's two standalone editors. One is for bubble editing, the other for form(only create). Before I listened to clicks on data-editor field, so instead I put in the attr 'dt-bubble' for those that should be bubble edited and listen for that instead, which works fine.
I was stupid though regarding the form and that I didn't understand why it wasn't able to fill the elements with new data after a create.... Obviously because it is a create in standalone mode. I'm doing a create and then update the page with the new data instead of the old. It's not like an insert of a new row, so I have to fill the elements by script on postCreate.
The problem I'm facing now is dependent() for the create form, I want to set values in one select depending on the choice of another, by using a ajax call. Obviously the select is changed 2 times when form is opened so I have 2 unnecessary ajax calls. Tried to set a flag on editor.on('open') which then is used on dependent, however it seems the ('open') method fires after the 2 changes has taken place. I will find another way...
Anyway here's my html and javascript for the 2 standalone editors solution, maybe someone gets help from it:
I think the only workaround at the moment would be to add the
dependent()method ininitCreateor perhapsopen.Allan
No, I put dependent() inside both open() and initCreate(), they will make the ajax call run twice anyway...
But sometimes the best solution is so simple it's ridiculous...
I only want to do the ajax call if I choose something in the first select, so a simple check if val contains something saved me two calls...