I have this of code that will show the data on a modal when a button click :
$("#editItem").on('show.bs.modal', function(e) {
$("#editAlert").attr("class", "d-none");
$("#editNoChanges").attr("class", "d-none");
var serialNo = $(e.relatedTarget).data('item-id');
console.log(serialNo); //Serial Key
$(e.currentTarget).find('input[name="productSerialEdit"]').val(serialNo);
$.ajax({
type: 'POST',
url: 'getItemInfo.php?serialNo='+serialNo,
data: {
serialNo: serialNo
},
dataType: 'json',
success: function(edit) {
var trig = "edit";
var nameEdit = $("#productNameEdit option[value='"+edit[0]+"']").prop('selected', true);
var typeEdit = $("#productTypeEdit option[value='"+edit[1]+"']").prop('selected', true);
var locEdit = $("#productLocationEdit option[value='"+edit[2]+"']").prop('selected', true);
$("#productPriceEdit").attr("value", edit[3]);
populateSelect(trig, nameEdit, typeEdit, locEdit);
console.log("Editting ..");
console.log($(nameEdit).val());
console.log($(locEdit).val());
console.log($('#productPriceEdit').val());
}
});
});//Edit Funtion End
the problem is that, on first click, its not showing the right data, i have to click the button/show the modal 2nd time to show the correct data, what could be the problem or solution for this ?
Related
I am using the example here as a starting point. Everything works fine, I can submit the data back to the server and get a response. However I don't know how to connect the callback from the ajax to the jqgrid onclickSubmitLocal. I don't want to use alerts because even if there is an error the row is updated. I would like some how if there is an error the modal edit dialog to show the error and prevent it from updating the row. On success I would like the user to get a message saying data was saved.
Here is the relevant code:
function submitData(rowData){
var dataToSend = JSON.stringify(rowData);
$.ajax({
url: '/save',
type: 'POST',
contentType: 'application/json; charset=utf-8',
data: dataToSend,
dataType: 'json',
success: function (result) {
alert(' successfully saved.');
},
error: function(xhr, status, error) {
alert('Error processing submit ' + xhr.responseText);
}
});
}
I called the previous function from
onclickSubmitLocal = function (options, postdata) {
var $this = $(this), p = $(this).jqGrid("getGridParam"),// p = this.p,
idname = p.prmNames.id,
id = this.id,
idInPostdata = id + "_id",
rowid = postdata[idInPostdata],
addMode = rowid === "_empty",
oldValueOfSortColumn,
newId,
idOfTreeParentNode;
... same as in example from link above
if (postdata[p.sortname] !== oldValueOfSortColumn) {
// if the data are changed in the column by which are currently sorted
// we need resort the grid
setTimeout(function () {
$this.trigger("reloadGrid", [{current: true}]);
}, 100);
}
// !!! the most important step: skip ajax request to the server
options.processing = true;
submitData([postdata]);
},
http://jsfiddle.net/pdb26p3q/22/
$(".verify").click(function () {
var ID = $(this).attr('id');
var dataString = 'verify=' + ID;
$.ajax({
type: "POST",
url: "",
data: dataString,
cache: false,
success: function () {
$(".code").show('slow');
}
});
});
I have tried using my own server and is not working too
I'm not sure what is the problem, sorry Im quite near to jquery
Edited: The .code(input) is not showing. Because if submit successfully the input will be shown.
you can try like
var dataString = {verify:ID};
Still stack in these code. On any browser desktop working fine, but when try use chrome on my android, can't post value from ajax datastring.
jQuery(document).ready(function()
{
jQuery(".button").click(function()
{
var product = jQuery(".products").val().split('|')[0];
var nomortujuan = jQuery(".nomortujuan").val();
var pn = parseFloat(document.getElementById("val[pin]").value);
var dataString = 'method=sendMessage&message='+product+'.'+ nomortujuan+'.'+pn;
var web = 'ajax.php';
jQuery.ajax ({
type: "POST",
url: web,
data: dataString,
cache: true,
beforeSend: function(html) {
document.getElementById("hasil").innerHTML = '';
jQuery(".flash").show();
jQuery(".flash").html('<div style="float:left;"></div>');
},
success: function(html){
jQuery("#js_process_request input, #js_process_request select").attr('disabled',false);
jQuery(".flash").hide();
jQuery("#hasil").hide();
jQuery ("#hasil").append(html);
return false;
}
});
});
});
Maybe this problem
jQuery ("#hasil").append(html);
remove spacing to fix it
jQuery("#hasil").append(html);
I am trying to figure out ways to prevent ajax from being called multiple times. Below is my code. I created a scrollable div, my goal is, once the scroll inside this div is about to reach the bottom, I want to call the ajax. Everything works so far. But the problem is, whenever I scroll the div fast enough to the bottom, the ajax is being called multiple times.
$('.scroll_div').scroll(function(){
var scroll_pos = $(this).scrollTop();
var outer_height = $(this).height();
var inner_height = $(this)[0].scrollHeight;
var scroll_end = scroll_pos + outer_height;
if(scroll_end >= inner_height-300){
$.ajax({
type: 'POST',
url: 'ajax/get_info.php',
data: {data_type: data_type},
beforeSend:function(){
}
}).done(function(data){
alert(data);
});
}
});
I would put a timer on it - adjust the timeout accordingly, so that the ajax would only fire if the user stays put for a second or two:
$('.scroll_div').scroll(function(){
if(typeof(myTimer)!='undefined'){
clearTimeout(myTimer);
}
var scroll_pos = $(this).scrollTop();
var outer_height = $(this).height();
var inner_height = $(this)[0].scrollHeight;
var scroll_end = scroll_pos + outer_height;
if(scroll_end >= inner_height-300){
//timer
myTimer = window.setTimeout(function(){
$.ajax({
type: 'POST',
url: 'ajax/get_info.php',
data: {data_type: data_type},
beforeSend:function(){}
}).done(function(data){
alert(data);
});
}, 2500);
}
});
This is the ajax code for the form submission:
$('form[class^="ajaxsubmit_"]').live('submit', function(e){
e.preventDefault();
var classname = $(this).attr('class');
var classnamesplit = classname.split("_");
var container = classnamesplit[1];
if (container == 'parent'){
container = $(this).parent();
}
$(container).show();
$(container).html('<img src="public/images/web/ajax.gif"/>');
$(this).ajaxSubmit(container);
});
(function($){
jQuery.fn.ajaxSubmit =
function(container) {
var url = $(this).attr('action');
$.ajax({
url: url,
type: "POST",
data: $(this).serialize(),
dataType: "html",
success: function(msg) {
$(container).html(msg);
}
});
return this;
};
})(jQuery);
This is like a general function for all forms, it reads the action and sends the data to it. Then outputs in the parent or the specified div. It works perfectly fine in Chrome, Firefox and Opera. How can I solve this?