I'm developing an AJAX project using jQuery. I'm thinking of creating a page that displays data from a table. On this page, I want to put a form to add another row to this table.
The problem is that I want to update the table on my page as soon as I have submitted the new data. Is that even possible? If so, how?
What you could do is bind an event to the submit button for the form.
$('#formbutton').click(submit);
Then load the values from the fields in the submit() function and then use $.ajax to submit the POST request and define a success call function to do a GET ajax request
function submit(){
var field1 = $('#field1').val();
var field2 = $('#field2').val();
$.ajax({
url: 'submitform.php',
type: "POST",
dataType: "text",
data {field1: field1, field2, field2},
success: function(data){
getData();
}
});
}
function getData(){
$.get("table.php",function(data){
$('#table').html(data);
});
}
You make the AJAX request to your script.
Your script does its work and returns the new data.
Your AJAX query's success handler function updates the page with the received data.AJ
Just look at the examples in the jquery documentation:
http://api.jquery.com/jQuery.ajax/
Use jQuery ajax to send the form results to a PHP script, get the PHP to update/insert to the mysql db, then get the PHP to echo out the table data to the jQuery success callback, in which you take received data and place it in a div/table!
To get you started:
http://blog.twostepmedia.co.uk/send-html-form-results-in-an-email-from-php-using-jquery-ajax/
Related
I am trying to get a div to reload once a checkbox has been selected or unselected and the form has been submitted. I have used AJAX and can get the form to submit on change, which works no problem. However the page has to reload to display new data.
I have built the php in such a way that it doesn't need to refresh the page or fetch a new page. If the div and it's content refreshes that should be sufficient to display the new filtered data.
Below is what I have written so far
$(document).ready(function() {
$("input:checkbox").change( function() {
$.ajax({
type: "POST",
url: "index.php?action=resortFilter",
data: $("#locationFilter").serialize(),
success: function(data) {
$('.resorts').html(data);
}
});
})
});
What do I need to do to get the div to reload after the request has been made?
I use class methods to handle the processing which return only the array of data. The requests are made to the class from a php function.
What I'm trying to do isn't actually possible to because PHP is a server side language. The best bet is to create a new intermediate file that can handle the display of the data so that it can be brought in through a normal AJAX request and get the new display from it
Where is the Ajax request? You are submitting your form through HTML/Browser. You need to use the following code:
$(document).ready(function() {
$("input:checkbox").change( function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#locationFilter").serialize(), // serializes the form's elements.
success: function(data)
{
$('.resorts').html(data);
}
});
})
});
Source: jQuery AJAX submit form
this sample loading code maybe help you
<div id="loadhere"></div>
$('div#loadhere').load('ajaxdata.php',{datatosend:whatyouwantforexamplehelloworld});
I have a table with a bunch of products from my database table. Each product has an update button which will produce a populated form via ajax for the user to ammend any details they wish.
On submit, I want to update the database and then return back to the page I was just on showing real-time updating data. With anything else I do, I send back a view to the ajax success function and it gets displayed. Only I can't seem to do it with this. I take the action and method out of my form tag and let an ajax function handle it, but it doesn't return a view, it just displays the view only, whereas I want my div to go into a specific div on the existing page
/***** submit update form *****/
$(document).on('click', '#updateSubmit', function() {
$.ajax({
type: "POST",
url: 'products/updateProduct',
success: function(data) {
$('#viewProducts').fadeIn(1000, function(){
$(this).html(data);
// THIS IS WHERE I WANT MY VIEW TO BE RETURNED TO(the #viewProducts). CAN THAT BE DONE?
})
} // end success
}); // end ajax
}); // end submit event
Try to use
url: '/products/updateProduct' in place of url: 'products/updateProduct'
if still not works try to use full path in place of relative path............
I have a table which has user names. When I click a user I need to retrieve their information from mysql database and this information will be populated into the relevent textboxes. I am totally stumped on how I go about doing this? Can someone please help
You can use jquery to achieve this in ajaxed way. In test.php write your php mysql code.
The below code a javascript code used to get data from a different page where you can process and get the information about any particular user. Read about ajax.
$.ajax({
url: 'ajax/test.php',
data: 'id=<?php echo $id?>',
type: 'POST',
success: function(data) {
//you can get data as an array and parse it to get fields and you can put them whever you want.
$('.result').html(data);
alert('Load was performed.');
}
});
Here is the jquery code which will solve your issue. Write this code in a javascript function. onclick event of that button should call this function. Write all your db coding in yourpage.php.
url = "yourpage.php";
$.get
(
url,
{
'act' :'getdata'
},
function(responseText)
{
strData = responseText;
$('#div_id').html(strData);
},
"html"
);
Place all your html code inside DIV and call the div in jquery code. It will work.
I need a jQuery popup to ask the user for some required data before loading the same page it's on.
The data entered will become a php variable that I'll use to query a mysql table and pre-populate some form fields.
Any advice?
Thanks!!
you can make an AJAX call to the PHP and load it to div that you want. For the ajax calls you can use jquery it really makes you job easy.
eg:
$.ajax({
url: 'getitems.php',
success: function(data) {
$('#manage_inventory').html(data);
//alert('Load was performed.');
}
});
like in the example it is calling getitems.php and getting the list and loading it into #manage_inventory. The data being returned can be XMl or other type which can be parsed and be used according to your needs.
Your solution could be as simple as using a prompt() box in javascript and then passing the information via ajax
var stuff = prompt('Gimme Stuff');
$.ajax({
url: 'dostuff.php',
data: 'stuff=' + stuff,
success: function(data) {
//process stuff
}
});
I have a table where one field is titled a secure password. In this field, there is an input button that calls an AJAX function. The AJAX function on return updates the password in the secured password field. This updates the DOM value for that field.
On this same page I have another function which uses Javascript to parse all the elements in the table into an array. The problem is the Javascript function is writing what was originally in the secure password field rather than what the AJAX function has updated it to.
It seems as though Javascript does not pull the current DOM value but the DOM value when the page was loaded. Is this the default nature of Javascript and if so how can I get around this so I can get the current values for all fields in the table, not just the page load values.
This script is written in PHP/Javascript, thanks in advance for the assistance.
Your Javascript function that parse all elements in the table into an array uses
the document.ready function or is loaded only once when the Page is loaded.
In Vanilla JS
document.addEventListener('DOMContentLoaded', (event) => {
//Where you wrote your function
})
Jquery
$(document).ready(function() {
// where you have your function if you are using Jquery
});
And AJAX calls do not reload the page. That means your Javascript function does not get executed so it does not update the array with the new data from the calls.
You need your Javascript as a callback function to the success or complete property of the AJAX call.
jQuery.ajax({
type: 'POST',
url: ajaxurl,
success: function() {
parsingFunction();
},
error: function() {
alert(errorThrown);
}
});
Did you try using a hidden input field for storing the data instead of updating the text input? Or may be you can try using the data-xxx attributes
bests,