Javascript within jQuery-modal ajax child Fails - javascript

I am loading modal windows via ajax into jQuery-modal.
I want to make sure the content within my modal windows are not loaded independently (directly), and if a direct request is attempted, I want them redirected to the page that loads the modal (I do this by testing for the presence of jQuery).
The redirect works great on the direct link, but for some reason, the added javascript prevents the modal window from displaying (the ajax calls are coming through fine, but the new modal DIV that is created does not take on the correct ID and styles [jquery-modal blocker current]).
This is the small bit of Javascript inside my html page that kills the modal...
<script>if (!(window.jQuery)){window.location.href='/';}</script>
FYI, I've tried placing the script inside and outside of <DIV class="modal"> on the page that is being loaded with ajax. Neither version works.
I have also tried removing the actual code from the script but it appears the mere presence of the <script> tag is a problem for the jquery-modal. I've also posted this issue to the GitHub repo, but the owner claims it is an implementation error.

Instead of calling the javascript via a <script> tag, you can put it in the <body onload=''> and it will bypass whatever issue the <script> tag causes.

Related

How to run Greasemonkey/Tampermonkey userscript repeatedly inside of iframe after full page load?

I'm trying to write a userscript working on the Etherpad page whose content will be updated continuously. The relevant part of the page structure is on the screen:
My userscript should affect all the div entries under 'td id="sidedivinner"' element. However, this element does not exist on the page initially and it is built only after the content of both iframes on the screen loads. All the solutions I found on the problem "Execute userscript after page load" failed, because they assumed either that there are no iframes, which still load after the script, or that iframe has the unique name or id.
So basically I want to execute js after all iframes load, as if I had done this via web browser console.
Also I want to run the same script after every AJAX request affecting sidedivinner (It will be too expensive to run it after every AJAX request). I suspect this solution won't work using #sidedivinner id because "waitForKeyElements.js" won't recognize an element by Id inside the iframe. How can I do this?
Add your javascript to the onload event of the iframe - not the page.
iFrame onload JavaScript event
You could use jquery to check for the creation of the #sidedivinner object. The following jquery will search in any iframes on the page.
$("iframe").contents().find("#sidedivinner")
See the following for more on these jquery functions:
https://api.jquery.com/contents/
https://api.jquery.com/find/

Bootstrap-Switch on Modal loaded from remote page

I'm trying to use Bootstrap-Switch to toggle my checkboxes. It works fine on a normal page, or a modal thats pre-loaded into the page.
However, if I load the modal from a remote page (a href=something.html) the toggle does not work/display. Apparently it loads once but doesn't reload after the modal is opened.
I tried
$("#myModal").on("shown.bs.modal",function(){
$(".checkbox").bootstrapSwitch();
});
But to no avail.
I've tried added the JS code directly to the code being pulled from the Modal as well but it didn't work. It worked on the remote page when loaded directly, but not through the Modal.
I'm a novice JS guy so this may be a trivial fix. Basically need to know how to call bootstrapSwitch() after the modal is loaded.
Thanks!
Just realized I had the shown.bs.modal called 2x for different things. When I combined, it fixed it. Bah, 30 minutes down the drain!

Reload embedded javascript in templates (Grails)

well I got a (jquery) javascript in .js loading inside a template in grails , the first time it loads in the template, and the script works perfectly, but once I hit the button to change the content in the template , the javascript doesn't reload, but once I embedded javascript directly in the template it loads fine, but once I put it back in a .js it doesn't load again. any suggestion?
it works this way:
<g:javascript>
code code
</g:javascript>
but doesn't work again if I use this:
<script src="${resource(dir:'js',file:'hoverInfo.js')}" type="text/javascript" charset="utf-8"></script>
once I hit the button to change the content in the template...
do you reload the full page or just a portion via remoteLink/ajax?
I guess in the second case, the browser notices that it already loaded the js-source and will not reload it - hence will not execute it a second time...
I guess you will have to use the onSuccess event to execute the script a second time...
Double check the location of the javascript source file, which can be different when loading the page. Therefore go in to the network tab of your firebug and check, whether the browser tells you 404, when pressing your ajax-button.

Controlling parent window after link (JavaScript)

I'm using a form handling service which after hitting submit links to an intermediate page before using setTimeout() to link back to my original page. I would like to cover the ugly intermediate page with something nicer. So far I've tried having the submit button load a new window onClick, where the new window uses parent.write to open a div that would cover the entire page and allow me to write my own html. The problem with that is that it prevents the intermediate page from loading at all, and thus prevents my forms from being processed.
My current workaround involves using setTimeout() in the child window to load my own page immediately after the intermediate page is loaded. It works, but I still see the intermediate page first.
Please help me!
switched to 000webhost and wrote my own formhandler

jNavigate refresh current page

I am using Jquery jNavigate plugin and everything works well. Except at some point from my other part of the JS code I want to be able to refresh content that is currently displayed in the container. How can I achieve this?
Here is what I've done.
I have one container for content that should be displayed via AJAX:
<div id="container">
</div>
Then I initialize jNavigate plugin on it
$('#container').jNavigate({
spinner: 'img/loading_icon.gif',
extTrigger: '.jnav-ext',
intTrigger: '.jnav-int'});
And I have several links that work with jNavigate:
Home
About
So everything works well except I can't refresh current content. Plugin itself has navigate() method inside. So how can I call that method from outside to refresh the contents in the container (refresh same page)?
I figured out it myself. Here is correct answer:
$('#container').jNavigate("navigate", {url: window.location.href});
Invoke this from whenever you want to reload current page in #container which is initially loaded via jNavigate.

Categories