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);
});
Related
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)
}
});
}
});
});
I am building a cms in php and inserting large content in database, for that i am using text editor. But when i give blank space inb front of paragraph or i write something on new line its not getting inserted in mysql table. I am giving muy code below...
<script>
$(function() {
$("#btn-submit").click(function() {
var content =document.aboutform.descr.value = $('#editor').html();
var title=$("#title").val();
var id=$("#id").val();
//var active = $('input[name=make_active]:checked').val();
var dataString ='title1='+title+'&content1='+content+'&id1='+id;
//alert(id);
//alert(id);
//alert(firstname);
// Returns successful data submission message when the entered information is stored in database.
//var dataString = 'title1=' + title + '&content1=' + content;
//alert(dataString);
// AJAX code to submit form.
$.ajax({
type: "POST",
url: "../admin/update_about.php",
data: dataString,
cache: false,
success: function(response) {
$("#status").html(response);
},
});
//closes ajax call
return false;
});
//closes button click
});
</script>
And this is php code
$title = $_POST['title1'];
$content = mysql_real_escape_string($_POST['content1']);
$id = $_POST['id1'];
$sql="UPDATE about_us SET title='".$title."',content='".$content."' WHERE about_id= ".$id;
$result=$conn->query($sql);
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'm trying to send $_POST data to another page to add sessions for a simple shopping cart.
I have a multiple forms within a PHP while loop each with multiple checkboxes, everything works apart from the checkboxes.
My question is how do I change this piece of code to change "item_extras" into an array?
if(this.checked) item_extras = $(this).val();
I have tried the following but, this just creates one line with all the values instead of another row within the array. If this is too confusing I could create a sample if it helps.
if(this.checked) item_extras += $(this).val();
$('form[id^="add_item_form"]').on('submit', function(){
//alert("On Click Works");
event.preventDefault();
addItem($(this));
});
function addItem(ele) {
//alert("I'm in the addItem Function");
var item_id = ele.parent().parent().find("input[name=item_id]").val(); // get item id
var item_name = ele.parent().parent().find("input[name=item_name]").val(); // get item name
var item_options = ele.parent().parent().find('#options').val(); // get selected option
var item_extras = "";
$item_extras = ele.parent().parent().find('input[name^="extra"]'); // find all extras
$item_extras.each(function() {
if(this.checked) item_extras = $(this).val(); // how do i make this into an array???
});
alert("BEFORE AJAX");
var dataString = 'item_id=' + item_id + '&item_name=' + item_name + '&item_options=' + item_options + '&item_extras[]=' + item_extras;
alert(dataString);
$.ajax({
type: "POST",
cache: false,
url: "includes/cart.php",
data: dataString,
success: function () {
$.ajax({
url: 'includes/cart.php',
success: function(data) {
$('#cart').html(data);
alert("AJAX SUCCESS");
}
});
}
});
return false;
}
you can use serialize method. Form.serialize()
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
var data = $(this).serialize();
});