I have an odd problem with Fancybox. Using version 1.2.6 (yes it's old, but that's what I'm stuck with currently), I invoke an iframe via a button click (see screenshot below)
Everything is fine if the user selects a radio button and submits the form. However, if the user closes the fancybox then invokes the iframe again (using the same button click as before), the form is not clickable. Instead there are left and right arrows on the iframe as if it's trying to display a picture (see screenshot below)
The only way to 'fix' the issue is to reload the page or not dismiss the fancybox in the first place.
[UPDATE]
Here is how I invoke the fancybox. To dismiss the fancybox, you have to click on the "Modify Address" button.
$('#hidden_link').fancybox({
frameWidth:400,
frameHeight:500,
hideOnOverlayClick:false,
hideOnContentClick:false,
showCloseButton:false
}).trigger('click');
The element #hiddenlink is a hidden href.
[UPDATE 2]
Firebug displays the error Image corrupt or truncated: data:image/gif;base64,AAAA when this occurs. Not sure if that is related or not.
Does Fancybox create a container div for the modal on page load, or does it create it on demand? If it creates one on page load then it might offer a "destroy" or "delete" method you can call on close.
If it creates one on demand then you might be able to explicitly destroy the existing one on close.
Related
I have a bootstrap modal with a form inside. The save button makes a post request (via ajax) and then the modal is dismissed using the code below inside the success function.
$("#my-modal-id").modal("hide");
$("body").removeClass("modal-open");
$(".modal-backdrop").remove();
The first time I toggle the modal or if I just cancel the modal, without saving it, I can (re)open it without problem, the issue is after making the ajax request for the first time.
If I click the button that toggles the modal for the second time, it rapidly disappears (the backdrop remains) and to toggle it again I need to refresh the page. When I inspect the page, I see that there is a display attribute set to none on my modal div.
I tried changing from $("#my-modal-id").modal("hide") to $("#my-modal-id").modal("toggle") but it still didn't work.
I am using jQuery v. 2.2.4 (unfortunately).
Does anybody know what could be causing this?
My question is about a bootstrap snippet as you can see here:
https://bootsnipp.com/snippets/P2gor
I wanted to use this gallery with tab views as you can see below. But my problem is that when click on first tab (Animal) and open image modal, I see the next button until all images in all tabs are shown. And when I click on second tab (Painting) the modal opens app empty and neither previous nor next button works.
First Tab
Second Tab
I want to be able to use this snippet with Tabs, so I'm here seek advice what can I do to make it work. When I click on first tab and browse the images in the modal, I want the next button to disappear when the last image on the current Tab is shown, not after all other images are shown.
Because there is no argument (id / class) passing to the JavaScript methods, I can't figure out how to make this work without making lots of duplication in the JavaScript file.
I'm sorry if this question is too generic and not enough specific.
I'm building a site using bootstrap and have created a navbar with some links. The index page consists of the navbar and a body with a single div that pulls in content (pages I've created) via jQuery's ajax feature (depending on what link was clicked in the navbar, that page is displayed in the div).
The site is for users who have permission to access pages based on folder settings I've created (if a user has access to a folder, he can view the pages within it). It works fine for the most part, but when a user who does not have access to a page clicks on a link, I assumed that the error page would show up in the div. However, it just bounces the user off the site completely to an error page.
My solution is to use a jQuery unload event.
I placed this in a .js file:
$( window ).unload(function() {
alert( "Bye now!" );
});
But a popup now shows up when I click on any external link, when I close the browser, or when I refresh the page. I only want it to activate when a user clicks on a specific link (one with an id class). I want to let them know that they clicked on a link that they do not have access to, and if they do not stay on the page they will be forwarded to an error page. How would I go about doing this?
--Update--
Here is the JSFiddle Link to JSFiddle
So for example, all users have access to the page "technology", so when they click that link on the navbar it is fetched and displayed in the div id "result". However, only some users have access to the page "inspections"; for those who have access the page is fetched, for those without it redirects them from my page to an external error page. I want a warning to pop up so they know that they don't have access and if they follow the link they opened that they will end up on an error page.
--Update 2--
Using Mr. Genuis' code got it working, but I have one final question. I implemented the code and a pop up appears for users who don't have access to the link (exactly what I wanted to happen), but when they click the OK button or click the x button on the popup, they are still forwarded to the error page.
Is there anyway to disable that? I tried updating the unload function (that Mr. Genuis provided) with this code, and it works (it gives the user an option to stay on current page which prevents the error page from loading), but the pop up function also activates when a user tries to close the browser page. I just want it to trigger when the link is clicked.
Here is the code i used:
$(window).bind('beforeunload', function(){ return '>>>>>Before You Go<<<<<<<< \n Your custom message go here'; })
I am really not sure if your approach is right for the given problem.
About activating the window unload event conditionally,
move that unload event hookup inside the link click event, that way you hookup the window unload event only when needed. Not always!
Update:
Something like below. For illustration purpose only.
Warning: I feel there is a smell in this approach.
$(".link").click(function(){
if(true){//Your condition check goes here.
$( window ).unload(function() {
alert( "Bye now!" );
});
}
else{
window.location.href = "someurl";
}
});
i have a page in joomla that i am generating a pdf off of using the pdfmyurl service. to call the service you click a link.
ie:
click to generate pdf
so you click a link on the main page which opens a "pdf-able" page in a popup window which then has a link to the above. (this is how joomla operates with printing pages).
this all works perfectly. but, i would like to close the popup when the link is clicked but AFTER the pdf is generated. if i use onclick="window.close();" method in the link the window closes before the pdf is generated.
i would like to solve this using jquery.
Use window.open, keep a reference to the window, and then go ahead and trigger window.close() when the PDF is finished loading (instead of the href). the only question is -- do you have any hooks to determine when the PDF has completed loading?
Reference: http://www.quirksmode.org/js/popup.html (mdn isn't working for me, but here's thelink: https://developer.mozilla.org/en-US/docs/DOM/window.open)
create a link or element with 'closePdf' id:
$('#closePdf').click( function() {
$('#whateverYourPDFContainerIdIs').remove();
});
I know how to create alerts and confirm boxes, but what I cannot find out how to do is to do the actual clicking of OK. I have a page that pops up a confirm box. I want to click OK using a Java Script add-on. Basically, I want my code to click a link on the page, then click ok when prompted. Is that possible?
That's not possible with a browser pop-up.
However if it's a modal dialog that sits within the DOM of the page, then you can trigger a JavaScript event to close it. An example of such a dialog is jQuery's dialog.