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?
Related
I am currently working on a "split-screen" web application. It uses selenium to retrieve the html of a webpage then sends and displays it in iframes using srcdoc. I want, when someone presses a link in the first screen, for the second screen to display a simple "Loading" while an ajax request is sent to the backend to retrieve the html of the url (as it might take a couple of seconds to load) then display the retrieved html in the second screen.
To do so, I "inject" a JQuery event code into the src code of the first screen in the backend (shown below) right before the end body tag (as the retrieved source is a string, that is easy to do). The second screen has id="oframe".
For some reason, the JQuery event wont trigger. Any ideas why?
<script>
$("a").on("click",function(e){
e.preventDefault();
if(e.target.href){
let link = e.target.href;
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
<p>Loading</p></body></html>";
$.ajax({
url: "/newOrigin",
data: {"link":link},
type: "POST",
success: function(response) {
parent.document.getElementById("oframe").srcdoc=response.site;},
error: function(error) {console.log(error);}
});
}});
</script>
Note that the event works if I only have
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
or
$.ajax({
url: "/newOrigin",
data: {"link":link},
type: "POST",
success: function(response) {
parent.document.getElementById("oframe").srcdoc=response.site;},
error: function(error) {console.log(error);}
});
inside the if statement.Together they stop the event, I know that because preventDefault() is not working (link opens in a new tab).
Example <a> tag:
<a class="gdpr-modal-link" target="_blank" ref="http://www.politifact.com/privacy/">cookies</a>
You cannot have a line break in the middle of JavaScript string.
So, put this:
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>
<p>Loading</p></body></html>";
all on one line:
parent.document.getElementById("oframe").srcdoc="<html><head></head><body>p>Loading</p></body></html>";
I have this Ajax code to submit a PHP form. The code works, however I would like the <div> that the content is supposed to change to refresh without the whole page refreshing.
The div's ID is #container.
Here is the AJAX code:
$('.accept_friend').submit(function(){
var data = $(this).serialize();
$.ajax({
url: "../accept_friend.php",
type: "POST",
data: data,
success: function( data )
{
//here is the code I want to refresh the div(#container)
},
error: function(){
alert('ERROR');
}
});
return false;
});
You will have to change the DIV's innerHTML property.. with jQuery it is done like so:
$('#container').html('... new content goes here...');
so in your case add in the success function:
$('#container').html(data);
or
$('#container').html(data.someAttribute);
depending on the type and structure of your returned data.
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.
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.
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.