I begin with jQuery and I'm trying develop a web audio player using jQuery, AJAX & PHP,
I have a problem with loading jQuery script included in my DOM after the success of AJAX.
When I receive my data via AJAX, the included scripts in the DOM does not respond.
There is my code:
1: I send my data vi onclick link to AJAX script :
<?php echo $file?>
2- AJAX receive my data with success via this function:
function getfile(audio) {
$.ajax({
type: 'POST',
url: 'script.php',
data: {
song: audio
},
success: function(data) {
$('#playlist1').html(data); // I get data with sucess in playlist1 div but player.js which is supposed to read the link that I got from PHP script is not loaded
},
});
}
I tried to put player.js in getScript before AJAX it work but I have a lot of bugs when I click in another link.
My question is: how can I load all my included scripts when the AJAX request completes? I heard about live function, but I don't know how to integrate live() in my case.
Related
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.
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.
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.
I am using jQuery's $.ajax() to get some data. I'd like to include that data in a popover dialog. I'm using the Twitter Bootstrap popovers.
It's not working; I believe the problem is that the JS for the popovers gets loaded before the data arrives.
How do I do something like:
<script src="{{ STATIC_URL }}js/bootstrap-popover.js"></script>
inside of my $.ajax() success function?
var request = $.ajax({
url: requestUrl,
dataType: "jsonp",
success: function(data) {
...
}
you can use jQuery's $.getScript method:
success: function(data) {
$.getScript("myurl/js/bootstrap-popover.js");
}
In trying to offer you a better solution, your tentative conclusion doesn't make sense to me. You should be able to include the popover javascript long before your ajax call and then use code to actually invoke the popover or configure it on any newly added content in your success handler.
There is no reason I'm aware of to load the popover js inside the success handler. Load it beforehand (in the normal way you load your other scripts) and then use it in the success handler for your ajax call. To help with how you'd use the popover script, we'd need to know more about what you're trying to do with it.
I am using the jquery ajax script for getting the content of php page without loading of page. Using following script
$('#data_subpartition_result').live('click', function(){
$.ajax({
type: "POST",
url: "temp/model_view_result.php",
context: "language=php&version=5",
data: {train: 0.7, validation: 0.2, test: 0.1},
success: function(result){
$('div.divRightModelContent').html(result);
}
});
});
and my php file code is as follows
<?php
echo $_POST['train'];
// some other php stuff
?>
i am trying to print or using value of data which i have passed with post method by jquery ajax call but i have an error and no any value passed in post method on php page by jquery ajax call. Give me any idea how to get the value.
It's been years since I programmed in PHP, but here are a few jQuery things to correct.
context is not used the way you're using it. It's used to tell the $.ajax call to load a particular section of the url property.
Because you specified type: "POST", your .html() call should be: ('div.divRightModelContent').html(result.d).
There are some good examples on the official jQuery.ajax() webpage. They're pretty good about at least providing you with example data under each property.