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.
Related
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!
Have problem with snipped of jquery handler for email form submission:
Seems like submission 'hang on' when I use e.preventDefault otherwise it just load email.php page. So Any search, even add to html onSubmit="reutn false;" doesn't help. What's wrong?
if comment out preventDefault then everything works fine, but load email.php, if leave seems $ajax or $post dont do anything...
Search for prevent default, read documentation try to return false directly from script, I use jquery 3.4.1
$(function() {
var form = $('#email_form1');
form.submit( function(e) {
// problematic string
e.preventDefault();
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize(),
success: function(data) {
window.alert(data);
form[0].reset();
$('#mail_popup').magnificPopup('close');
}
});
});
});
I expect that ajax request will execute email.php in background but it loads this page...
The problem was in using jquery slim instead standard. it hangs on $ajax unknown method :( shame on me....
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 writing a little bot for a page and I need to click on a button. But that button would link me to another page so that I'd had to reenter my script to the browser's console. That's why I want to send an ajax request and set $("body") to its result.
The problem is, I don't know where the button links to and it's not as simple as $("#btn").prop("href"). It's a <button> tag. Of course I tried to find out what happens when the button is clicked so I can do the same, but it turned out that this is very difficult.
Can I do something like $.ajax({ url: $("#btn").click() }) ?
Or do you know a way to simply debug what exactly gets triggered when clicking on that button?
<div id="checkoutNextbottom" class="checkoutNext">
<button name="buttonNext" id="nextbottom" class="linkAsButton processButtonNext">Weiter</button>
<!---->
</div>
try like this ...
$(document).ready(function(){
$("#nextbottom").click(function(e){
e.preventDefault();
$.ajax({type: "method type",
url: "url",
data: data,
success:function(result){
}
});
});
});
I am having an issue with popup blockers. I want to open a window for my users only after I receive some data from server, in other words I need it on success.
Issue is that popup blocker will stop the window in the success section as it thinks that script is currently executing. I am using jQuery 1.7.1.min and I have tried using (as you can see below)
async:false, but for some reason that doesn't work. The only workaround that I was able to do is to open a fake window and when the response comes back
overwrite the fake window. It works in Chrome but it gives problems in Firefox. Need some help.
function mypopup() {
$j.ajax({
type: 'POST',
url: "/my/phppage",
data: mydata,
async: false,
success: function (response) {
window.open(response, 'Dialogue Message', 'width=650,height=550,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes');
}
});
window.open("openfakewindow", 'Dialogue Message', 'width=650,height=550,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes');
}
The issue is Firefox only allows popups if it is created from a user generated event, for example a click event.
You can get around this by opening a blank window before the Ajax call, keep a reference to it and then set the URL after the ajax call is complete.
Why don't you use a dialogue box that is essentially a element that you identify and then open?
$(document).ready(function () {
$("#divAccountDialog").dialog(
{
modal: true,
autoOpen: false,
width: 700,
buttons: { Cancel: function () { $(this).dialog("close"); } }
}
);
});
someotherfunction () {
$('#divAccountDialog').dialog('open');