How to refresh PHP file with AJAX - javascript

Okay, so I searched the web as much as I could and I couldn't find the solution on my problem. I also typed the question and searched for an answer as I saw similar questions to mine. Didn't help. I tried numerous solutions.
Well I have an index page that loads includes/data.php which loads the data from database and echo the .js format that is then loaded by function and display data on the page, so I have at the end of my index.php something like this:
<script type="text/javascript" src="includes/data.php"></script>
On the same index page I have a form that inserts data to database. If you refresh the page I will see refreshed includes/data.php along with new data I just inputted.
I am trying to implement AJAX so that when I click on the button I insert the data to database (already achieved this) and to refresh content of includes/data.php and index.php so it shows data right away without refreshing the index.php. This is my AJAX code:
$('#addtocal').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
data : $(this).serialize(),
success : function( data ) {
// This is the part where I am stuck.
},
error : function(){
$(".error").fadeIn(2000);
$(".error").fadeOut(2000);
}
});
return false;
});
Just to mention that #calendar is where main jquery function is loading the html content based on the info from /includes/data.php. Thank you in advance for any help you can provide and let me know if you need any other information from me in order to better assist me.
P.S. I saw many suggested using .load() to load content from includes/data.php but that is not working in my case as the content from includes/data.php needs to serve other jquery function that creates html on the fly and and place it in #calendar

I got it to work. What I did I inser aditional $.ajax inside the $.ajax and on completion and I called again again the jquery that uses /includes/data.php
so the code would be something like this:
$('#addtocal').submit( function() {
$.ajax({
url : $(this).attr('action'),
type : $(this).attr('method'),
data : $(this).serialize(),
success : function( data ) {
$.ajax({
url: "../includes/data.php",
dataType: "script",
cache: true
}).done(function() {
// Here I called other jquery function that uses ../includes/data.php
});
},
error : function(){
$(".error").fadeIn(2000);
$(".error").fadeOut(2000);
}
});
return false;
});
Thanks for your help anyway #Half Crazed gave me a clue so I get the $.getScript function and saw the way to call .js again so I tried and it worked.

Related

Ajax response not working as expected from PHP

I am calling the JS function cancelAppointment on button click, I can confirm that the function is running okay as the first alert is shown.
I have followed many guides to try and get this to work but they are yielding no results.
At the moment the success message is not being showed and the row is not being deleted. I can confirm the PHP script works fine.
the function is as below:
<head>
<script>
//Making the call to ajax this is encased in a function so it is not called pre-maturely
function deleteAppointment()
{
jQuery(document).ready(function(){
alert("Trying to run!");
$.ajax({
type : "POST",
url : "http://www.website.com/delete_appointment.php",
//data : "",
success : function(response) {
//Success
alert("Deleted");
}
});
});
}
</script>
For the moment, until I get the ajax to work the PHP contains PDO, that will delete from both the Appointments & AppointmentLines table with an ID of 1000. I will parse this in once this first part works.
In Wordpress the jQuery library included in the noConflict() mode, so the global $ shortcut for jQuery is not available, see more details here.
To make it work change $ to jQuery:
function deleteAppointment()
{
jQuery.ajax({
type : "POST",
url : "http://www.website.com/delete_appointment.php",
success : function(response) {
alert("Deleted");
}
});
}
You need to define what response the Ajax method is expecting to receive.
Make the response either 'text' (as shown in the example bellow) or make the response 'json'. You just add 'dataType: "text"' as a setting to the ajax call.
$.ajax({
type : "POST",
url : "http://www.website.com/delete_appointment.php",
dataType : "text",
success : function(response) {
//Success
alert("Deleted");
}
});
Currently you're your success method is waiting for the value of "response" to be returned however you are not defining what it is.
EDIT: I was corrected that it should be dataType not data for the setting I was originally talking about.
I found the answer,
Because I was using wordpress you must use jQuery in place of $ I needed to wrap this in a DOM function with $ defined so that jQuery would understand $
I kept the data argument commented in the end.
This issue was caused due to wordpress requiring slightly different syntax when calling a jQuery function. Thanks for your help everyone.

Questions about responseText

Overview:
I'm using the JQuery Form Plugin to send Form Data to a remote file via AJAX. The File then processes the form data and inserts it into the MySQL Database.
Problem:
The Problem is, however, when I want to run code on a successful add, (usually completed using the "success" option, it never runs. Doing further research I found that I needed to send back "responseText" to make the function under "success" run.
Questions:
1) Is this true?
2) How do I go about sending back responseText?
3) (If number on is that it is not true) How do I get the function under success to run?
A few code Snippets:
JQuery (Using the JQuery Form Plugin):
$("#form1").ajaxForm({url: 'submit.php', type: 'post', resetForm: true, success: function () { $('#new-paste').modal({show: false}) }});
I can provide the contents of the remote file (submit.php) if needed.
Thank you in advance!
Change your success to:
function(response) {
$('#new-paste').modal({show: false});
alert(response); // response is the output from the php script it submitted to.
}
Hope this helps.
Alright, so I found the solution.
The Script had to be included on the page itself, not in a remote .js file.
so:
<script>
// wait for the DOM to be loaded
$(document).ready(function() {
// bind 'myForm' and provide a simple callback function
$('#myForm').ajaxForm(function() {
alert("Thank you for your comment!");
});
});
</script>
Should be included in the head.

table positioning with AJAX to PHP post

I have a jQuery script that sends POST data via AJAX to a php file that then creates a table. I have used firebug to check the console and everything gets created properly. On the success: I reload the window and the table isn't displayed.
I know the table html was created properly from the php file because I commented out the reload so I could see exactly what it created) I have lots of things displayed on my page and would like the table in a particular spot. How can I get the table to actually display where I want it to?
<script>
$(document).ready(function () {
$("#stayinfobutton").click(function () {
var id = $('#id').val();
var dataString = {
id: id
};
console.log(dataString);
$.ajax({
type: "POST",
url: "classes/table_auto_guests.php",
data: dataString,
cache: false,
/*success: function(html)
{
window.location.reload(true);
}*/
});
});
});
</script>
The window.location call will reload a new page in the browser window, this will loose the data returned to the ajax call by the server.
Usually the response to Ajax calls is loaded directly into your page, something like:
success: function(html)
{
$('#guestsTable').html(html);
$('userForm').hide();
}
I made up the guestsTable div and userForm names, ;).
The return data may need some coercing to make it into html (I'm assuming your using JQuery), hopefully the php script will set it to html/text in the header, also dataType: html can be passed in the $.ajax({...}) call.
Alternatively, if the classes/table_auto_guests.php returns a full page which you want to load in the browser, Ajax may not be what you are looking for. This post contains code on how to submit the data as a form, and load the result as a new page.

How to get the html of a div from a different page with AJAX?

How can I get the html of a certain html element which is located on a different site?
Solution:
$.ajax({
url: 'somefile.html',
success: function(data) {
data=$(data).find('div#id');
$('#mydiv').html(data);
alert('Done.');
}
});
You can use $.load with an appended container
The .load() method, unlike $.get(), allows us to specify a portion of
the remote document to be inserted.
$('#result').load('ajax/test.html #container');
Make a ajax call to a php or any other file , use CURL or other tools to grab the page you want and extract the div and echo it and then when you get back the html just put it inside a div in your page
$.ajax({
url: 'somefile.html',
success: function(data) {
data=$(data).find('div#id');
$('#mydiv').html(data);
alert('Done.');
}
});
Here you go:
$('#div_id_in_your_page').load('ajax_page.html #required_div');
For class:
$('.div_class_in_your_page').load('ajax_page.html #required_div');
One way is:
send an ajax call to a server side script
this script fetches the remote page and returns HTML as a response. (generally JSON is preferred)
your page finally gets access to the html.
you can also use like this.
$.ajax({
url:"page2.html",
success:function(response){
$("#currentDIV").html(response);
},error:function(){
alert("error");
}
});

jquery, ajax, load post result to div

I have a form that I need to post and show the result in a div. I'm not having any problems making the ajax call but I can't seem to figure out how to load the result to a div. I have tried:
$.ajax({
type: 'POST',
data: $('#someForm').serialize(),
url: 'http://somedomain.com/my/url',
success: function(data) {
$('#someDiv').load(data);
}
});
but it does not seem to work properly. I'm nit sure if this should even work but the result is the the page i'm posting from being loaded into the div and not the url I'm posting to.
Any help would be great! Thanks!
If the "result" is just HTML, then you'd say
$('#someDiv').html(data);
If you want it treated strictly as plain text:
$('#someDiv').text(data);

Categories