Ajax call waiting for audio media load - javascript

Hi I have a web page where I'm loading data through an Ajax call and in the page i have a HTML5 <audio> element. When the user click on the a link the content is load with out any delay. But when a user is trying to play the <audio> element and then click on the content the Ajax call is waiting for all the audio media content to be loaded then processing the Ajax call.
I want to make a Ajax call even when other content is loading.
$.ajax({
url: e.state.url,
method: "POST",
data: {history_nav:true},
success: function (data, textStatus, jqXHR) {
var jdata = JSON.parse(data);
document.getElementById("app-content").innerHTML = jdata.html;
document.title = jdata.title;
}
});

The problem wasn't with Ajax call it was the PHP locking the session and preventing the Ajax call. I just had to add session_write_close(); to make the Ajax call work parallel to media loading.

Related

Wordpress use ajax on page load from url get parameters

So i am building a search on website, and main search form is on home page where user can input information's like, interests, books, movies.
And that form should submit to another page where search will be displayed.
So it's similar like any other search, but on search page, i should keep parameters in url, so it's not going to be POST, it would be GET.
Home page is something like mywebsite.com
And when form is submitted it's posted with GET parameters so user can keep search results in his url. Submitted post should lead to something like.
mywebsite.com/search?interests=sports&books=harry+potter&movies=moviename
And because it can take some time to search and load results i would like to load the page and than do an ajax post to search function and populate search results once ajax responds.
I've built in past some ajax content loading and post and load data with ajax, but all that while keeping on same page, i never built when you submit content from one page to another in wordpress.
Any suggestions how can i do that and make ajax grab the content ?
I found the answer, and it's actually quite easy, instead triggering ajax with function, for example function with button click.
Just trigger ajax on page load, and don't enqueue script anywhere else except on that page, this would help a bit.
if ( is_page_template('template-search.php') ) {
wp_enqueue_script('ajax_search');
}
This will ensure script is loaded only on that template page, and as for script it self, just load ajax on page ready:
jQuery(document).ready(function($) {
jQuery.ajax({
dataType: 'json',
url: search_flight.ajaxurl,
data: {
action: 'search_flight',
},
beforeSend: function() {
},
success: function(data) {
console.log(data);
},
error: function() {
}
});
});

Delay a click event until AJAX has completed

I have written an AJAX script that saves form data and then displays a preview page of this data all in one click event. Here is the script:
$('#ajax-preview').click(function(e) {
var formData = $('#advertiser-edit-form').serializeArray();
$.ajax({
type: 'post' ,
url: "ajax-preview.php",
data: formData,
success: function(data, status, jqXHR) {
previewURL = data;
$('#ajax-preview').attr('href', previewURL);
}
});
});
The problem is that sometimes the PHP script does not manage to complete its saving routine before a user is taken to the preview page. In such case, the user would see unupdated data when he's taken to the preview page. Then he would have to reload the page to see the changes.
How can I design the script so that a user is taken to the previewURL only after the AJAX updated the data?
The problem is that the code in your click handler only starts the ajax call, it doesn't wait for it to complete, and so the click's default behavior (following the link) occurs immediately, while the ajax call is still running. You can't make the click event wait unless you want to make the ajax call synchronous, which makes for a poor UX.
Instead, I suggest having a button the user presses to generate the preview, which makes the ajax call, and then have the ajax result reveal (unhide) a link the user can click to see the preview.
Rough example:
$("#btn-create-preview").click(function() {
var pending = $("#preview-pending"),
msg = $("#preview-message"),
btn = this;
btn.disabled = true;
msg.hide();
pending.fadeIn("fast");
// Simulate ajax via setTimeout
setTimeout(function() {
// This is the ajax completion function
pending.hide();
msg.find("a").attr(
"href",
"http://example.com?x=" + Math.floor(Math.random() * 10000)
);
msg.fadeIn("fast");
btn.disabled = false;
}, 1000);
});
<input type="button" id="btn-create-preview" value="Create Preview">
<em id="preview-pending" style="display: none">
Building your preview...
</em>
<span id="preview-message" style="display: none">
Your preview is ready;
click here
to view it.
</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Ajax updated div with jquery event handling script is calling multiple time

I have following script with html data in ajax response.
Here is my ajax response data
<script>
$(document.body).on('change','.account_name_change',,function() {
$.ajax({
type: 'POST',
url: 'locations/get_account_location/',
data: {'id':id,'model_name':model_name},
success: function(data) {
$('.new_account_name_div').html(data);
common_ajax_script();
}
});
});
</script>
<div>
some html tags
</div>
This response will be updated in some div in current page. In current page I have one link to get above response. See, How many times I am calling ajax call to get this ajax response, previous response is removed and new response automatically updated.
But script in ajax response called that much time I called ajax when I intiating
<script>
$(document.body).on('change','.account_name_change',function() this event
</script>
Why did I miss anything?

Is it possible to get php echo/response to Ajax without posting through Ajax?

Ajax parsing, wondering if it is possible if i post a form with text and images through an html form. And just getting the response back through Ajax?
Steps
1.) Form is in html and submit button in html
2.) Form submitted to php, and it runs through verifying/Uploading text and images.
3.) Any echos from the php is received through AJAX.
I am not sure if its possible to do so. Thanks for your time.
Javascript
$("button#submitbutton").click(function () {
$.ajax({
url: ("submitlisting.php"),
type: 'GET',
dataType: "text",
success: function (data) {
console.log(data); // e == result from the ajax call.
$("p#result").html(data);
}
});
});
use a hidden iframe as target for the form
<form target="form_result"><!-- input elements --> </form>
<iframe name="form_result" style="display:none;"></iframe>
Then after form is submitted, check the content of the iframe to read the response.
No. Not in the way you're thinking. The server responds to a request and the cycle ends there. If you submit a form, that is one request, and the client cannot listen to arbitrary requests sent by the server. To obtain the functionality that you are thinking of (seeing some sort of progress as the user is uploading a file, for example), you would need to do everything by AJAX.
A simplistic way is to use some sort of AJAX file uploader (blueimp comes to mind: https://github.com/blueimp/jQuery-File-Upload), and then poll the server for progress updates using AJAX.

javascript in html inserted on ajax request runs once more with each ajax request

I'm using the dialog widget from jquery.
The content for the dialog (id='juiDialog') is generated by ajax request.
The content contains html code (<form id='formId'...>.. </from>) and javascript on each request.
Javascript code contains the ajax request function
jQuery(function($) {
jQuery('#juiDialog').delegate('#formId','submit',function(e){
e.preventDefault();
e.stopPropagation();
jQuery.ajax({
global : false,
async : false,
cache : false,
type : 'POST',
url : jQuery(this).attr('action'),
data:jQuery(this).serialize()
})
.done(function(){
var tr=$('#data-grid').find('#updateTr');
$(tr).css('color','red');
$('#juiDialog').dialog('close');
$('#juiDialog').empty();
alert('Data Saved');
});
});
});
After each ajax complete function I remove the content form the dialog using $('#juiDialog').empty();
This dialog can be called multiple times in the same page for different items.
The problem is that the script runs each time once more so: called 1 time runs 1 time; called the second time runs 2 times (the alert message is showed twice)
When I put the ajax function into the main page not jquery dialog , the problem stops!!!
I need some help in order to make the script run only once with each ajax request but when the ajax function is retrived into the dialog <div> body.
I think that the javascript code is not removed from the DOM on $('#juiDialog').empty() so it is like I am inserting it each time once more.

Categories