I am working on a WordPress plugin at the moment and i am currently dealing with some kind of bug.
So this is problem i have expandable div's representing each day, you can add and remove them dynamically, screenshot
When you enter values in these two slots (time/location) and click create table button, time x location table is generated, screenshot.
So when user click on +Add event, modal should be shown. And this work perfectly for first day, when i add other days modals inside their td elements also have unique id's but they are not showing on +Add event click, when i inspect DOM i find they are printed more then one time(8 times to be more precise no matter how big table is)but they are not visible. Interesting fact is that when i click update(Wordpress button that save changes and refresh page) the modals start working on other days too.
Here is the code that prints the table :
// unique id counter
var uniID = 0;
// if slots not empty
if(numTS !== "" || numLS !== "") {
var target = jQuery("div").find("[data-iterator='" + curr + "']");
var content = '<table style="margin-top: 25px" class="table table-bordered"><tbody class="tbd' + curr + '"><tr class="tabelica' + curr + '">';
content += '<td><span class="locc">Location</span> <span class="tslott">Timeslots</span></td>';
// generate x part of table
for (var i = 0; i < numTS; i++) {
content += '<td class="tslot-fields">';
content += '<div class="col-xs-12 tslot-name-div"><input class="tslot-name" type="text" placeholder="Name"> Pause <input type="checkbox"></div>';
content += '<div class="col-xs-6 tslot-fields-div">Starts<br/><select><option>00:00</option><option>00:15</option></select></div>';
content += '<div style="margin-top: 15px;" class="col-xs-6">Ends<br/><select><option>00:00</option><option>00:15</option></select></div>';
content += '</td>';
}
content += '</tr>';
// generate y part of table
for(var j = 0; j < numLS; j++) {
content += '<tr><td class="loc-fields"><input class="loc-input" type="text" placeholder="Loaction Name"> </td>';
for(var k = 0; k < numTS; k++) {
var id = ++uniID;
content += '<td><button type="button" class="btn btn-custom" data-toggle="modal" data-target="#myModal' + id + '"> +Add event</button><div class="modal fade" id="myModal' + id + '" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div><div class="modal-body"> ... </div><div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div></div></div></div></td>';
}
content += '</tr>';
}
content += '</tbody></table>';
target.append(content);
}
Really hope you guys can help me I am desperate about this.
via Chebli Mohamed
Aucun commentaire:
Enregistrer un commentaire