I am using fancybox to show a page (say child.htm) within another page(parent.htm).
I know how to automatically reload the parent page after closing the iFrame:
$(".fancybox").fancybox({
afterClose : function() {
location.reload();
return;
}
});
However, my requirement is more specific. I need to close the iframe and then reload the parent page (parent.htm) only when an user clicks on a button (e.g : clicking on button "OK" present in child.htm).
The problem with the code snippet that I'm having is that the parent page is getting reloaded even when I click on the close icon or when I click anywhere outside the frame. This is something that I want to restrict. My agenda is to cause page refresh only on button click.
I would try something like this:
$('.fancybox').fancybox({
href : 'child.html',
type : 'iframe',
afterShow: function(){
$('.fancybox-iframe').contents().find('#button').click(function(){
// do something
...
// reload parent window and close fancybox
window.parent.location.reload();
window.parent.$.fancybox.close();
});
}
});
Related
Basically I have a button which displays a div when pressed.
Inside this div I have actions which can lead to reloading the page.
I want this button that displays my div to be automatically pressed if the page is reloaded. I already tried this :
window.onload =function(){
document.getElementsByClassName(className).click();
}
But it does not work.
To reload my page I use:
location.reload();
Try this:
window.addEventListener('load', (event) => {
document.querySelector(".className").click();
});
I have a button on a page that, when clicked, loads another html file into a div in a "modal". For whatever reason, when I close the modal, the page seems to refresh and go back to the top.
function openNewWindow() {
$('.button').click(function(e) {
e.preventDefault();
$('body').addClass("noscroll");
$('#wrap').load('index.html');
return false;
});
}
openNewWindow();
$('.close-btn').click(function(e) {
e.preventDefault();
$("#wrap").empty();
$('body').removeClass("noscroll");
});
I have the preventDefault in place, but the "reload" seems to keep happening. Any issues with the script, and reason why this would be happening?
Link to my test page: http://andyrichardson.design/ajax/test.html
So I have a really simple pop-up on a page when a link is clicked, but it will refresh the page when I click on the close button. Which is bad since I have it within a set of Ajax tabs, so on refresh it goes back to tab1 instead of staying on tab3. Any idea's of a function to do this, I know there's one to make the parent page refresh, so there must be one for no refresh? Thanks!!
This is my JS
$(document).ready(function(){
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var docHeight = $(document).height();
var docWidth = $(document).width(); //grab the height of the page
$('.overlay-bg').show().css(); //display your popup and set height to the page height
$('.overlay-content').css({'top': scrollTop+20+'px'}); //set the content 20px from the window top
});
// hide popup when user clicks on close button
$('.close-btn').click(function(){
$('.overlay-bg').hide(); // hide the overlay
});
// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function(){
$('.overlay-bg').hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
});
I'm guessing your close dom contains a link. In your close handler just add the event param and prevent default like you do for the other clicks.
See updated close function below
$('.close-btn').click(function(evt) {
evt.preventDefault();
$('.overlay-bg').hide();
});
I have a small jQuery Mobile site with NavBar at the bottom of every page. The bar has some buttons, which should work across the site.
How to force pagebeforeshow event (on current viewed page) without knowing the page name/id?
Is there a general function to do this, or do I need to get name/id of the page first and them use this to call pagebeforeshow?
UPDATE
The following gets me a current page ID, but the trigger("refresh") does not seams to trigger any action (pagebeforeshow does not execute).
var CurrentPageID = $.mobile.activePage[0].id;
$("#" + CurrentPageID).trigger("refresh");
Any suggestions?
Here's a working example.
This will start page reload while clicking on navbar:
$('div[data-role="navbar"] ul li').bind('click',function(event, ui){
$.mobile.changePage(
'#'+$.mobile.activePage[0].id,
{
allowSamePageTransition : true,
transition : 'none',
showLoadMsg : false,
reloadPage : false
}
);
});
This code will catch pagebeforeshow:
$('#pageID').live('pagebeforeshow',function(e,data){
alert('Reload');
//Execute AJAX here
});
I assume all the page you are navigating is divs with data-role attr. So you should able to bind event as below;
$('div[data-role="page"]').live( 'pagebeforeshow', showLoadDiv);
function showLoadDiv() {
//Your code here
}
//when you want to call it manually
showLoadDiv();
I've got some links I want to have dynamically open in a jQuery UI Dialog using jQuery.load(). Once the dialog is open, I want the links load inside the already opened dialog.
So, the site loads, you click a link, and it opens in a dialog. That's fine. You can close and open it as many times as you want.
While it's open, if you click on one of the links from the loaded content, it doesn't work.
An Ajax GET request IS performed, but the resulting content is not successfully loaded into the dialog. (Firebug shows the request)
The previous dialog title and dialog content is erased. But the new content is not shown, NOR is it inserted into the DOM. (The generated source does not show content anywhere.)
The links look like this...
<a href="http://www.example.com/index.php?action=something&search=somethingelse#fragment" rel="dialog" title="Title Attribute">
The click event is bound...
$('body').delegate("a[rel~=dialog]", "click", function(e){return ajax_dialog(this, e);});
The ajax_dialog function checks to see if there's a dialog, calls to create one if there isn't, calls to load the content, sets the title, and opens the dialog if it's not open.
function ajax_dialog(_this, _event){
var urlToLoad = $(_this).attr("href").replace("#", "&ajax=true #");
var linkTitle = $(_this).attr("title");
// Create dialog
if(!$('body').find('#ajaxDialog').size()){
$('body').append('not yet init<br />'); // This shows up the first click only.
init_dialog('#ajaxDialog');
}
// Load Dialog Content
load_dialog('#ajaxDialog', urlToLoad);
// Add title
$('#ajaxDialog').dialog('option', 'title', linkTitle);
// Open dialog (or reload)
if(!$('#ajaxDialog').dialog('isOpen')){
$('#ajaxDialog').dialog('open');
$('body').append('not yet open<br />'); // This shows up the first click only.
}
return false;
}
The init_dialog function creates the dialog if there isn't one...
function init_dialog(_this){
$('body').append('<div id="ajaxDialog"></div>');
// Set Dialog Options
$(_this).dialog({
modal:true,
autoOpen:false,
width:900,
height:400,
position:['center','center'],
zIndex: 9999,
//open:function(){load_dialog(this, urlToLoad);}, This didn't work without destroying the dialog for each click.
close:function(){$(this).empty();}
});
}
The load_dialog function loads the desired content into the dialog.
function load_dialog(_this, urlToLoad){
$(_this).load(urlToLoad, function(){
$('body').append(urlToLoad + ' load function<br />'); // This shows up each click
$(_this).append("Hihi?"); // This shows up each click
});
// The loaded information only shows the first click, other times show an empty dialog.
}
Hah. As shown in the code, I was using $jQuery.load() and pulling the exact href of the link as the URL to request. All the URLs had fragments/anchors on the end, that is: ....html#id-of-div.
In this case, the script itself was working fine, but the #id-of-div didn't exist on the page yet. That's why I could see content returned, but the dialog just ended up blank. :-)