I have written this code but it didn't work. I have searched so much but those code are not properly work. what should I do? I want to fetch data without refreshing whole page.
I have looked at this other question.
$(document).ready(function() {
$("#pair_form").submit(function(e) {
e.preventDefault();
var devicename = $("#devicename").val();
var id = $("#id").val();
var latitude = $("#latitude").val();
var longitude = $("#longitude").val();
var ignition = $("#ignition").val();
var Arming = $("#Arming").val();
function showData() {
$.ajax({
url: 'http://example.com/ddd/cfg.php',
method: 'get',
dataType: 'text',
success: function(response) {
$('#result').html(response)
}
});
}
});
});
Related
I have a form that I want to send all fields to serverside using Datatables and filter the data.
I found how to send individual parameters using:
url: './demo2/contents/orden/get.php',
type: 'POST',
data: function(d) {
d.comercial = $("#comercial").val();
}
but how can I send the complete form, I assume it can be done using something similar:
url: './demo2/contents/orden/get.php',
type: 'POST',
data: function(d) {
var frm_data = $('#searchFrom').serializeArray();
$.each(frm_data, function(key, val) {
d[val.name] = val.value;
});
}
To get the parameters in get.php I am using
$comercial = $_REQUEST["comercial"];
If anybody needs help with this. I found the solution. You can get the forms post values using the same datatable get file without have to post again.. I wasnt aware of this.
here is the code:
$('#kt_search').on('click', function(e) {
e.preventDefault();
var frm_data = $('#searchFrom').serializeArray();
console.log(frm_data);
$.each(frm_data, function(key, val) {
myData[val.name] = val.value;
});
table.table().draw();
});
If you need to send an array because you have a field with multiple selection, you can use the following. Hope it helps somebody.
$('#kt_search').on('click', function(e) {
e.preventDefault();
var frm_data = $('#searchFrom').serializeArray();
//POST VALUES ARE SENT USING SAME GET FILE NO NEED TO POST AGAIN
var multiple = {};
var i = 0;
$.each(frm_data, function(key, val) {
var str = val.name;
//CHECK IF FIELD NAME FINISHES WITH MULTIPLE
if (str.match("_multiple")){
if (typeof multiple[str] == "undefined") {
multiple[str] = new Array();
i = 0;
}
multiple[str][i] = val.value;
i++;
myData[val.name] = multiple[str];
}else{
myData[val.name] = val.value;
}
});
table.table().draw();
});
How to send two id's using ajax and jquery at the same time when bootstrap modal is loaded.
Am working on a project, when a modal load it has to send two ajax request to the server and append the returned data to the modal-body input text.
Below are the codes that send the requests,
$('#myPayment').on('show.bs.modal', function(e) {
var guestID = $(e.relatedTarget).data('guest-id');
var bID = $(e.relatedTarget).data('b-id');
var bgID = $(e.relatedTarget).data('bg-id');
var booking_date = $(e.relatedTarget).data('booking-date');
var room_rate = $(e.relatedTarget).data('room-rate');
var room_price = $(e.relatedTarget).data('room-price');
var room_currency = $(e.relatedTarget).data('room-currency');
$.ajax({
url: "inc/get_room_rate_name.php",
method: 'POST',
data: {'curr_room_rate' : $(e.relatedTarget).data('room-rate')},
success: function(value) {
$(e.currentTarget).find('input[name="room_rate"]').val(value);
}
});
$.ajax({
url: "inc/get_currency.php",
method: 'POST',
data: {'curr_currency' : $(e.relatedTarget).data('room-currency')},
success: function(value) {
var data = value.split('-');
var room_currency = data[1];
$(e.currentTarget).find('input[name="currency"]').val(room_price + " " +room_currency);
}
});
//populate the textbox
$(e.currentTarget).find('input[name="first_name"]').val(guestID);
$(e.currentTarget).find('input[name="b_id"]').val(bID);
$(e.currentTarget).find('input[name="bg_id"]').val(bgID);
//$(e.currentTarget).find('input[name="room_rate"]').val(room_rate);
//$(e.currentTarget).find('input[name="currency"]').val(room_data);
});
I'd like to have the following code in my AJAX request:
function ajax_post( form_info ){
var request = $.ajax({
url: "ajax_handler.php",
type: "POST",
data: {data : form_info},
});
};
I'd like to serialize all of the elements in my clicked event to pass directly to the AJAX function because I'm doing processing on the PHP side. Say I have the following on click function:
$('.open-popup').on("click", function() {
var clicked_id = $(this).attr('id');
var contest_id = $('#contest-id').val();
var contest_type = $('#contest_type').val();
//serialize everything to a data_to_pass variable
ajax_post( data_to_pass );
});
How could I serialize the clicked_id, contest_id and contest_type into a single variable to pass to my AJAX processing function as a single string of data?
This is how you can do it:
var data_to_pass = {
clicked_id: clicked_id,
contest_id: contest_id,
contest_type: contest_type
}
JS:
$('.open-popup').on("click", function() {
var clicked_id = $(this).attr('id');
var contest_id = $('#contest-id').val();
var contest_type = $('#contest_type').val();
var data_to_pass = {
clicked_id: clicked_id,
contest_id: contest_id,
contest_type: contest_type
};
ajax_post( data_to_pass );
});
AJAX:
function ajax_post( form_info ){
var data = JSON.stringify(form_info);
var request = $.ajax({
url: "ajax_handler.php",
type: "POST",
data: {data : data},
});
};
You can create FormData for that and append all the required values with .append() function.
Like this,
$('.open-popup').on("click", function() {
var clicked_id = $(this).attr('id');
var contest_id = $('#contest-id').val();
var contest_type = $('#contest_type').val();
//serialize everything to a data_to_pass variable
var fd = new FormData();
fd.append( 'clicked_id', clicked_id);
fd.append( 'contest_id', contest_id);
fd.append( 'contest_type', contest_type);
ajax_post(fd);
});
And AJAX function would look something like this,
function ajax_post( form_data ){
var request = $.ajax({
url: "ajax_handler.php",
type: "POST",
data: form_data,
});
};
And access the data in PHP using $_POST['clicked_id'] and so on...
jQuery's ajax accepts objects as data; it takes care of the serialization for you. So you can simply do
ajax_post({
clicked_id:$(this).attr('id'),
contest_id:$('#contest-id').val(),
contest_type: $('#contest_type').val()
});
If you want to do so, try using a form element and inputs (it can be hidden fields if it isn't a user submitted form) in your HTML code, and serialize it, so you can transmit the whole 'block of information' at one time with Ajax.
Look at rfunduk's answer at this question.
So I am basically creating a Restaurant Menu editor for their website. The issue I am having is when the click a category named Brunch, I load the file edit_cat.php via ajax onto the page. All data is passed correctly, but on success of the form being filled out I would like to post a success message on the parent window and am having no luck. Coincidentally, upon success the alert(data) does popup with the response.
edit_cat.php both handles the form submission and is the form
$(document).ready(function(){
$('.editBtn').on('click', function(e) {
e.preventDefault();
var $this = $(this),
id = $this.data('id'),
type = $this.data('type');
if (type == 'cat') {
data = "&cat=" + id;
$.ajax({
data: data,
type: 'POST',
url: 'edit_cat.php',
success: function(data) {
$('#contentLeft').html(data);
}
});
}
});
$('#contentLeft').on('click', 'input[type="submit"]', function(e) {
e.preventDefault();
var $this = $(this),
frm = $('#edit-cat-frm'),
id = $('form').data('id'),
name = $(frm).find('input[name="name"]').val(),
desc = $(frm).find('textarea[name="desc"]').val(),
send = $(frm).find('input[name="submit"]').val();
data = "&cat=" + id + "&name=" + name + "&desc=" + desc + "&submit=" + send;
$.ajax({
data: data,
type: 'POST',
url: 'edit_cat.php',
success: function(data) {
window.parent.$('.left-container-head').innerHtml(data);
}
});
});
});
Can you please try this as simply,
$('.left-container-head').html(data);
Try this:
$(".left-container-head", window.parent.document).html(data);
I made a moderation script, voting up and down question and answers. Time ago the script worked, but when i came back to start coding in this project one more time, it doesn't work anymore.
The script was doing: when you click in a div called vote, or vote1 a link, it ask if it's up or down. If it's up, it loads url: "mod_up_vote.php" sending by post some info about the question you are voting on. It was ok. But not now. It doesn't load that page, because i was printing and inserting in database the $_POST variable and nothing was there.
What do you think is wrong here? Thanks.
$(document).ready(function()
{
$(document).delegate('.vote, .vote1', '.vote2', 'click', function()
{
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='mod_up')
{
$(this).fadeIn(200).html('<img src="dot.gif" align="absmiddle">');
$.ajax({
type: "POST",
url: "mod_up_vote.php",
dataType: "xml",
data: dataString,
cache: false,
success: function(xml)
{
//$("#mod-pregunta").html(html);
//$("#mod-respuesta").html(html);
//parent.html(html);
$(xml).find('pregunta').each(function(){
var id = $(this).attr('id');
var pregunta = $(this).find('preguntadato').text();
var respuesta = $(this).find('respuestadato').text();
var votoup = $(this).find('votoup').text();
var votodown = $(this).find('votodown').text();
var id_pregunta = $(this).find('id_pregunta').text();
var id_respuesta = $(this).find('id_respuesta').text();
$("#mod-pregunta").html(pregunta);
$("#mod-respuesta").html(respuesta);
//$(".vote").attr('id', $(this).find('id_pregunta').text());
$(".vote1").html("Aceptar");
$(".vote2").html("Rechazar");
//$("span", this).html("(ID = '<b>" + this.id + "</b>')");
});
} });
}
return false;
});
This looks like a problem with your JQuery. Why are you using delegate instead of click? Also, your arguments to delegate appear to be incorrect. If you look at the documentation you'll see the function signature is:
$(elements).delegate(selector, events, data, handler); // jQuery 1.4.3+
You are binding your function to an event called '.vote2', which I can only assume does not exist.
Try using click instead, there's no reason to use delegate as far as I can tell.
edit:
Try using click like so:
$('.vote, .vote1').click(function(){ /* your code here */ });