So, I'm currently loading a post list with infinite scroll functionality. I'm loading a small popup that has title and content in dynamic ajax popup. When the article is clicked, the URL changes to website.com/news/newsID. Now, when I press the back button, the ajax post list reloads from the beginning. I want to preserve whatever ajax is loaded already so that when pressing the browser back button, I want it to look like a close button is clicked.
Currently my ajax loading of post is something like this:
:
$.ajax({
cache: true,
type: 'GET',
url: window.location.origin + '/' + newsId ,
dataType: 'html',
beforeSend: function() {
//here the popUp UI is loading
},
success: function(data) {
//here the popUp UI is replaced with data
},
});
And the ajax for infinite scroll is something like this:
function ajaxget_Stories(postappendID, isPaginated) {
$.ajax(
{
cache: true,
type: 'GET',
url: window.location.origin + location.pathname,
dataType: 'html',
success: function(data) {
$('#' + postappendID).empty();
var data = JSON.parse(data);
$('#' + postappendID).append(data.html);
},
async: true,
},
0
);
}
Both of the ajax is working fine. Expect the functionality I need is not.
What I'm looking for is something like this:
Popup close on back button. I've a event/function available for closing popup.
Preserve old ajax infinite scrolled content when pressing back after loading the content.
Revert the URL to previous one when pressing the back button.
Any help is appreciated.
Thank you!
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'm working on a message board and inputs forms have to be validated if javascript is disabled. If javascript is enabled it has to have AJAX to stop refresh and submit form.
I have an html form which is validated by php. And now I'm trying to add jquery and ajax to stop page refresh.
I added a loading gif and inactive inputs field on submit button. But when I add $.ajax gif won't stop spinning and fields won't become active. After I refresh the page I can see that the input data was added to database.
I'm quite new in using ajax and maybe you could help me find a solution to my problem.
here is my code:
$(document).ready(function(){
$("#submit").click(function(e){
e.preventDefault();
// getting input values by id
var fullname = $("#fullname").val();
var message = $("#message").val();
// array for input values
var data = { fullname : fullname,
message : message };
//disabled all the text fields
$('.text').attr('disabled','true');
//show the loading sign
$('.loading').show();
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "validation.php",
//dataType : 'json',
data: data,
cache: false,
success: function(data){
alert('success');
}
}).done(function(result) {
if (result == "")
form.submit();
else
alert(result);
}).fail(function() {
alert('ERROR');
});
});
});
I get success and input value alert, when I use dataType : 'json', I get error alert.
I would appreciate any kind of help.
maybe once you display .gif image than you are not going to hide the same .gif image again although your ajax finished or stop or fail (in any case).
So, on success of ajax add below two lines to hide .gif and enable text fields.
//enabled all the text fields
$('.text').prop("disabled", false);
//hide the loading sign
$('.loading').hide();
Whole code seems like this,
// AJAX Code To Submit Form.
$.ajax({
type: "POST",
url: "validation.php",
data: data,
cache: false,
success: function(data){
//enabled all the text fields
$('.text').prop("disabled", false);
//hidethe loading sign
$('.loading').hide();
alert('success');
}
});
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.
I have this HTML:
a id="rt-popupmodule-button" data-rokbox data-rokbox-element="#rt-popupmodule" href="#" class="hidden">rt-popupmodule /a
It opens Rokbox popup window and I need to open it either jQuery or Mootools or pure JS.
I make jQuery Ajax call and I need to open this popup after Ajax request done, here is the code:
jQuery.ajax({
url: url,
type: 'post',
data: {
form: contactForm.serializeArray()
},
dataType: 'html',
async: true,
success: function(response){
jQuery(document).find('#rt-popupmodule-button').trigger('click');
}
});
But nothing happens unfortunately.
Is it possible to fire an event to open this Rokbox popup?
You can use plain JavaScript on this one.
document.getElementById('rt-popupmodule-button').click();
That will select the element by its ID, and then trigger a click on it.
var dataString = 'name=' + $("input#name").val() + '&email=' + $("input#email").val() + '&comments=' + $("textarea#comments").val();
$('#reply_message').addClass('email_loading');
// Send form data
$.ajax({
type: "POST",
url: "SendMail",
data: dataString,
success: function () {
$('#reply_message').removeClass('email_loading');
$('#reply_message').addClass('list3');
$('#reply_message').html("Mail sent sucessfully");
$('#reply_message').delay(500).fadeOut(3500);
$("input#name").val('Name');
$("input#email").val('Email');
$("textarea#comments").val('Comments..');
}
});
return false;
});
});
This is my ajax script for sending an email everything is working fine for the first time user is filling the form and submitting but if user is filling form again and click on send button this time only email is coming not showing the success message and loader. One more thing currently in my text fields the value=name is working as a label so I put the values again in success function but what about the text area?
In the success: portion of your Ajax you are using fadeOut.
I do not see anywhere that you are fading back in.
If you either remove fadeOut from the success or add fadeIn to the loading message it should work well.