I have an issue at restarting my datatable, when I fill my datatable according a web service results, and it fills correctly but at the moment to make a research by clicking the (Search Button) again the datatable contains the old header and it shows the results but the function does not include the results into the DataTable and it shows 1 to 1 of 1 entries, which is correspondence to old searching.
This is my JavaScript:
$.ajax({
type: 'POST',
url: '/enrollment.asmx/MethodSearch',
data: "{ 'esiidVal': " + $("#esiID").val() + "}",
contentType: "application/json; utf-8",
dataType: "json",
success: function (data) {
$("#loadingDiv").hide();
//$("#data").append("<table id='tbSearch' class='table table-hover display'><thead><tr><th>City</th><th>Zip</th><th>Address</th><th>State</th><th>Location ID</th></tr></thead><tbody><tr id='" + data.d.City + data.d.Zip + data.d.Adds + "'><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/city'>" + data.d.City + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/zip'>" + data.d.Zip + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/adds'>" + data.d.Adds + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/state'>" + data.d.State + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/location'>" + data.d.SNumer + "</td></tr></tbody></table>");
$("#db").append("<thead><tr><th>Selection</th><th>City</th><th>Zip</th><th>Address</th><th>State</th><th>ESIID</th><th>Utility</th></tr></thead><tbody><tr id='" + data.d.City + data.d.Zip + data.d.Adds + "'><td><input type='checkbox' name='userinformation' value='#'></td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/city'>" + data.d.City + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/zip'>" + data.d.Zip + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/adds'>" + data.d.Adds + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/state'>" + data.d.State + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/location'>" + data.d.SNumer + "</td><td id='" + data.d.City + data.d.Zip + data.d.Adds + "/utility'>" + data.d.Utility + "</td></tr></tbody>");
//var html = "<thead><tr><th>City</th><th>Zip</th><th>Address</th><th>State</th><th>ESIID</th><th>Utility</th></tr></thead><tbody>";
$('#db').DataTable();
$('#db').after($("checkbox").addClass('checkbox-primary'));
},
error: function (e) {
alert(JSON.stringify(e));
$("#divResult").html("Something Wrong.");
}
});
I tried destroy(), didn't work, I also tried clean() didn't work. I have weeks facing this issue. Can somebody help me with my issue?
Thanks in advance.
table.draw() should do the trick. Make the call after appending rows.
Related
I am running across this weird issue,
So on the first input everything works correctly, but after I add the second line, when I go back and edit the first one, I cannot enter 2 decimals, it keeps bouncing.
This is how I am generating the rows on the table:
$('#postrow'+i).html("<td><input type='hidden' name='pd_id[]' value='" + (pd.id == null ? "" : pd.id) + "'><input style='text-align: right;' name='amount[]' type='text' class='number form-control amount " + numberFormat +"' id='amount" + i + "' value='" + amount + "'/></td><td><select name='pdtype[]' class='form-control pdtype' id='pdtype" + i + "'>" + htmlTypes + "</select></td><td><select name='accountcode[]' class='form-control' id='accountcode'" + i + "><option value=''>N/A</option>" + htmlCodes + "</select></td>" + applyfor + "<td>" + htmlCharges + "</td><td><input name='note[]' type='text' class='form-control' id='note" + i + "' value='" + (pd.note == null ? "" : pd.note) + "'/></td>" + removemiddle);
$('#tblpost').append('<tr id="postrow'+ (i+1) +'"></tr>');
$('input.number').number(true, 2);
// $("#services"+i).focus();
i++;
I have a JavaScript function that takes Id and source and alignment... and append to html element due to the input parameter.
"<TR id='" + localMessageId + "' onmouseover='visiblepointmenu(\"" + localMessageId + "\");' onmouseout='hidepointmenu(\"" + localMessageId + "\");'>" +
"<TD class='td_left noselect' nowrap='nowrap' align='right'>" + Image + "</td>" +
"<TD class='td_center' style='table-layout:fixed; direction: " + direction + ";'>" +
"<TABLE cellSpacing=0 cellPadding=0>" +
"<TR style='HEIGHT:10px; " + VisibleHiddenTime + "'>" +
"<TD><div class='noselect' style='color:DarkGray;text-align:" + float_Timer + ";font-size: 11px;'>" + Name + dateMessage.ToString("hh:mm tt") + "</div></TD>" +
"</TR > " +
"<TR>" +
"<TD id = 'menu" + localMessageId + "' oncontextmenu='window.external.Menu(\"pointMenu#3\",\"" + message + "\", \"" + localMessageId + "\");'>" +
"<TABLE cellSpacing=0 cellPadding=0 style='background-image: url(data:image/png;base64," + previewLink.image_Base64 + ");" +
"background-position: center center;width:" + previewLink.width.ToString() + "px;height:" + previewLink.height.ToString() + "px; background-repeat: no-repeat; " +
"background-size: 100% 100%; float:" + float_Timer + ";'>" +
"<TBODY>" +
"<TR style='height: 83%;'>" +
"<TD class='description' onclick=openURL('" + url + "') style='cursor:pointer;padding-left:10px;' valign='bottom' align='left'>" +
"<font color='white' style='font-size: 110%'> " + previewLink.description + "</font>" +
"</TD>" +
"</TR>" +
"<TR style='vertical-align:top;'>" +
"<TD align='left' onclick=openURL('" + url + "') style='cursor:pointer; padding-left:10px;' >" +
"<font color='white' style='font-size: 100%' >" + homelink + "</font>" +
"</TD>" +
"</TR>" +
"</TBODY>" +
"</TABLE>" +
"</TD>" +
"<TD style='vertical-align:top;'>" +
"<div style='float:" + afloat + ";'>" +
"<img id='pnt" + localMessageId + "' class='noselect' draggable='false' src='data:image/png;base64," + SharedData.PointMenu + "' style='visibility:hidden;display:none;' onclick='window.external.Menu(\"pointMenu#3\", \"" + message + "\", \"" + localMessageId + "\");' />" +
"</div>" +
"</TD>" +
"</TR>" +
"</TABLE>" +
"</TD>" +
"<TD style='width:17px;' valign='top' align='left'>" +
"<img style='margin-top: 3px;" + visibility + "' id='read" + localMessageId + "' draggable='false' class='noselect' src='data:image/png;base64," + SharedData.getMessageStatusFromEnum(messageStatus, SendingMethode == SharedData.NotificationSendingMethod.AutoReply) + "'/>" +
"</TD>" +
"</TR>";
}
else
{
new_row = "<TR id='" + localMessageId + "' onmouseover='visiblepointmenu(\"" + localMessageId + "\");' onmouseout='hidepointmenu(\"" + localMessageId + "\");'>" +
"<TD class='td_left noselect' nowrap='nowrap' align='right'>" + Image + "</td>" +
"<TD class='td_center' id='Forward" + localMessageId + "' style='table-layout:fixed;direction:" + direction + ";'>" +
"<TABLE cellSpacing=0 cellPadding=0>" +
"<TR style='HEIGHT:10px; " + VisibleHiddenTime + "'>" +
"<TD><div class='noselect' style='color:DarkGray;text-align:" + float_Timer + "; font-size: 11px;'>" + Name + dateMessage.ToString("hh:mm tt") + "</div></TD>" +
"</TR>" +
"<TR>" +
"<TD id ='link" + localMessageId + "'>" +
"<div id='menu" + localMessageId + "' class='" + classname + "' oncontextmenu='window.external.Menu(\"pointMenu#3\",\"" + message + "\", \"" + localMessageId + "\");'>" +
" <P style='table-layout:fixed;'>" + text + "</p>" +
"</div>" +
"</TD>" +
"<TD style='vertical-align:top;'>" +
"<DIV style='float:" + afloat + ";'>" +
"<img id='pnt" + localMessageId + "' class='noselect' draggable='false' src='data:image/png;base64," + SharedData.PointMenu + "' style='visibility:hidden;display:none;');' onclick='window.external.Menu(\"pointMenu#3\", \"" + message + "\", \"" + localMessageId + "\");' />" +
"</DIV>" +
"</TD>" +
"</TR>" +
"</TABLE>" +
"</TD>" +
"<TD style='width:17px;' valign='top' align='left'>" +
"<img style='margin-top: 3px;" + visibility + "' id='read" + localMessageId + "' draggable='false' class='noselect' src='data:image/png;base64," + SharedData.getMessageStatusFromEnum(messageStatus, SendingMethode == SharedData.NotificationSendingMethod.AutoReply) + "'/>" +
"</TD>" +
"</TR>"
my problem is that id and all image sources and even some classes should be added at runtime from the function
I need a way better then concatenation because my code will be ugly if I type + every time
or want to know what is the best Practice
I have an input and an onchange function as below
'<section class="cubeMain" style="transform: translate3d(0 , ' + valY+ 'px , ' + valZ + 'px) rotateY(20deg) rotateX(-10deg);">'+
'<div>' +
"<input type='number' style=\"width: 100%; height: 100%; text-align: center; font-size: 250px\"" +
" onchange='update( this.parentNode.parentNode ,this.value , " + arrayNum + " , " + c + " , " + a + " , " + b + " )' value='" + matrices[arrayNum][c][a][b] + "' >" +
'</div>' +
'<div>' +
"<input type='number' style=\"width: 100%; height: 100%; text-align: center; font-size: 250px\"" +
" onchange='update( this.parentNode.parentNode.querySelectorAll("+ div + ") ,this.value , " + arrayNum + " , " + c + " , " + a + " , " + b + " )' value='" + matrices[arrayNum][c][a][b] + "' >" +
'</div>' ....
what I'm trying to do is in the onchange function, when a value is changed, I want to go back to the section (parentNode.parentNode) and then to all the other inputs inside the parent. (what I'm actually trying to do is change the value of all the inputs when one of them changes)
Now I tried this.parentNode.parentNode.querySelector(" div") .... but I get an error doing this.
What is the right way of doing this?
I'm facing a freak problem in jquery. When I try to populate a list from a table it becomes empty if it contains a special character like sid'ahmed. When I change it to sidi ahmed it works perfectly. This is my code to populate two lists:
$.getJSON("get-data.php?dat=driver", function(data) {
var stringToAppend1 = "<option value='" + day_Shift + "'>" + day_Shift + "</option>";
var stringToAppend2 = "<option value='" + night_Shift + "'>" + night_Shift + "</option>";
$.each(data, function(key, val) {
stringToAppend1 += "<option value='" + val.prenom + " / " + val.nom + " : " + val.telephone + "'>" + val.prenom + " / " + val.nom + " : " + val.telephone + "</option>";
stringToAppend2 += "<option value='" + val.prenom + " / " + val.nom + " : " + val.telephone + "'>" + val.prenom + " / " + val.nom + " : " + val.telephone + "</option>";
});
$("#night_Shift_text" + id).html(stringToAppend2);
$("#day_Shift_text" + id).html(stringToAppend1);
});
You should escape the single quote by using replace function as shown below. Use this replace whereever needed.
day_Shift = day_Shift.replace(/'/g, "\\'");
Hope this helps!!
well, i've been having problems trying to use the ".append" in IE8, my code works fine in all browsers (even IE9), but I'm having issues with IE8.. Here's my code:
divLine = null
for(var i = ini; i < fim; i++ ){
if(i % 5 === 0){
var divLine = $("<div class='line' style='float:left;display:block;padding-top:25px;'></div>")
$("#products").append(divLine)
}
if (linkI[i] != "semLink") {
if (i != (4 + ini) && i != (9 + ini) && i != (14 + ini) && i != (19 + ini)) {
divLine.append("<div id='" + albuns[i] + "'style='float:left;display:block;'>" +
"<a href='" + url[i] + "'>" +
"<img src='" + imagesUrl[i] + "' width='170' />" + "</a>" +
"<div style='width:170px;'>" +
"<h3 class='shout bare mts'>" +
"<b>" + names[i] + "</b>" +
"</h3>" +
"<h6 class='mbs'>" +
albuns[i] +
"</h6>" +
"<a class='icons-comprar lfloat mtxs mrs' href='" + linkS[i] + "' target='_blank' >Comprar </br></a>" +
"<a class='icons-itunesSmall lfloat mtm' href='" + linkI[i] + "' target='_blank'>Itunes</a>" +
"</div>" +
"</div>" +
"<img src='http://assets.jumpseller.com/store/biscoitofino/themes/8055/space.png' width='30' style='float:left;display:block;'/>" +
"</div>")
} else {
divLine.append("<div id='" + albuns[i] + "' style='float:left;display:block;'>" +
"<a href='" + url[i] + "'>" +
"<img src='" + imagesUrl[i] + "' width='170' />" +
"</a>" +
"<div style='width:170px;'>" +
"<h3 class='shout bare mts'>" +
"<b>" + names[i] + "</b>" +
"</h3>" +
"<h6 class='mbs'>" +
albuns[i] +
"</h6>" +
"<a class='icons-comprar lfloat mtxs mrs' href='" + linkS[i] + "' target='_blank' >Comprar </br></a>" +
"<a class='icons-itunesSmall lfloat mtm' href='" + linkI[i] + "' target='_blank'>Itunes</a>" +
"</div>")
}
} else {
if (i != (4 + ini) && i != (9 + ini) && i != (14 + ini) && i != (19 + ini)) {
divLine.append("<div id='" + albuns[i] + "' style='float:left;display:block;'>" +
"<a href='" + url[i] + "'>" +
"<img src='" + imagesUrl[i] + "' width='170' />" +
"</a>" +
"<div style='width:170px;'>" +
"<h3 class='shout bare mts'>" +
"<b>" + names[i] + "</b>" +
"</h3>" +
"<h6 class='mbs'>" +
albuns[i] +
"</h6>" +
"<a class='icons-comprar lfloat mtxs mrs' href='" + linkS[i] + "' target='_blank' >Comprar </br></a>" +
"</div>" +
"</div>" +
"<img src='http://assets.jumpseller.com/store/biscoitofino/themes/8055/space.png' width='30' style='float:left;display:block;'/>" +
"</div>")
} else {
divLine.append("<div id='" + albuns[i] + "' style='float:left;display:block;'>" +
"<a href='" + url[i] + "'>" +
"<img src='" + imagesUrl[i] + "' width='170' />" +
"</a>" +
"<div style='width:170px;'>" +
"<h3 class='shout bare mts'>" +
"<b>" + names[i] + "</b>" +
"</h3>" +
"<h6 class='mbs'>" +
albuns[i] +
"</h6>" +
"<a class='icons-comprar lfloat mtxs mrs' href='" + linkS[i] + "' target='_blank' >Comprar </br></a>" +
"</div>" +
"</div>" +
"</div>")
}
}
}
in which:
albuns = new Array();
imagesUrl = new Array();
url = new Array();
names = new Array();
linkS = new Array();
linkI = new Array();
are already sorted arrays generated by a server.
I also took printscreens of the output in both chrome and IE8:
IE8 below:
Chrome below:
As we can notice the output in IE is completely distorted...
here's the site in question:
http://biscoitofino.jumpseller.com/catalogo
Any suggestions???
Thank you in advance!