Button click submit ajax form - ajax

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};

Related

Ajax not working propperly on first click

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 ?

Can't post ajax value

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);

How to animate AJAX post?

sorry for this request but I'm an AJAX beginner.
I have the following script and I'm trying to animate it (something like "fade").
jQuery(document).ready(function($){
$(document).on("click",".ratingemo", function(){
var rating = $(this).attr("id").substr(0, 1);
var id = $(this).attr("id").substr(1);
var data = "id="+id+"&rating="+rating;
$.ajax({
type: "POST",
url: "/ldplug/rate.php",
data: data,
success: function(e){
$("#r"+id).html(e);
}
})
});
});
How can I do that?
Many thanks!
First of all live is deprecated, check out on instead. But that being said, why not:
success: function(e){
$("#r"+id).hide();
$("#r"+id).html(e).fadeIn("slow");
}
It would be better to just have $("#r"+id) hidden to start, I just hid it to illustrate the point.
Without seeing your HTML, I have to assume that something like this will work for you. Hide the element, populate it, then fade it in.
jQuery(document).ready(function ($) {
$(".ratings").live("click", function () {
var rating = $(this).attr("id").substr(0, 1);
var id = $(this).attr("id").substr(1);
var data = "id=" + id + "&rating=" + rating;
$("#r" + id).hide();
$.ajax({
type: "POST",
url: "/ratings/rate.php",
data: data,
success: function (e) {
$("#r" + id).html(e);
$("#r" + id).fadeIn();
}
})
});
});

Ajax Codeigniter form doesn't work in IE?

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?

AJAX request not updating SQL Server database

I have a form with allows the user to edit data in the database using Ajax and ASP. Not sure why the ajax call is not updating the database as requested.
AJAX/jQuery code:
$('#editbtn').click(function(){
var thisid = $('#edsid').val();
var enm = $('#edtName').val();
var eml = $('#edtEmail').val();
var egp = $('#editSubForm input[name=edgrp]').val();
var dataString = 'act=upd&sid=' + thisid + '&edName='+ enm + '&edEmail='+ eml + '&edgrp='+ egp;
$.ajax({
type: 'GET',
url: '/subscr_query.asp',
data: dataString,
success: function(){
//alert(dataString);
$('#successmsg').append("Edited!");
$('#successmsg').fadeIn(1200, function(){$(this).fadeOut(2000);});
},
error: function(){
$('#delpop').fadeIn(300);
}
});
});
The form contains a submit button with the id "editbtn". Form seems to process with out the database getting update with the current information.
I've tested the queryString on the subscr_query.asp page by entering the data that gets outputted from the form to the page directly, and db updated as expected.
Any ideas?
I'm suspecting you're not preventing the default action; hence, it's submitting the form before performing the ajax request. Use preventDefault
$('#editbtn').click(function(e){
var thisid = $('#edsid').val();
var enm = $('#edtName').val();
var eml = $('#edtEmail').val();
var egp = $('#editSubForm input[name=edgrp]').val();
var dataString = 'act=upd&sid=' + thisid + '&edName='+ enm + '&edEmail='+ eml + '&edgrp='+ egp;
$.ajax({
type: 'GET',
url: '/subscr_query.asp',
data: dataString,
success: function(){
//alert(dataString);
$('#successmsg').append("Edited!");
$('#successmsg').fadeIn(1200, function(){$(this).fadeOut(2000);});
},
error: function(){
$('#delpop').fadeIn(300);
}
});
e.preventDefault(); // prevent default action
});

Resources