Bootstrap-Switch on Modal loaded from remote page - javascript

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!

Related

Bootstrap refresh remote modal while open

I'm using bootstrap 3.x.x & I have a remote modal which is working fine, also I have Implemented the functionality where if the modal is closed, the data is flushed and a fresh ajax request is made if it is reopened. All of this is working fine.
Now I need to refresh/reload the content from that same remote URL without closing the modal.
Is there a way to achieve it?
One way that I can think of is just manually firing a jquery .load with the same URL and modal-body as the target. But that doesn't trigger the respective events like loaded.bs.modal etc.
So again, is there an official way to refresh the remote bootstrap modal, without closing it and re-opening it again?

Javascript within jQuery-modal ajax child Fails

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.

Rails links preventing loading of external JS widget

I am trying to debug an issue where our booking system doesn't load (it is an external widget loaded via javascript), sometimes.
I am able to replicate the issue buy opening the /bookings link, then clicking the bookings link again.
Once I click it again, the widget vanishes, then never reloads. A page refresh fixes this.
Is there a way to fix this issue? Im guessing it has something to do with how Rails loads routes.
Thanks!

Display loading image after clicking on a image/button using java script

I have developed an App using PhoneGap and JqueryMobile.
I have many HTML Pages , navigation from One page to other page on click of the image is taking lot of time.And the end user have no clue what is happening at the back end.
I would like to show loading image until the page gets loaded.
I'm wondering how could I use Jquery to show a simple "Loading..." on the screen until page is loaded.
Please help me on this.
With jquerymobile you can do this with $.mobile.showPageLoadingMsg() resp. $.mobile.hidePageLoadingMsg() as described in the documentation.

Poping up a custom mail chimp form

I want to pop up a custom designed mail chimp form, like Groupon/Fab etc do upon page load. I have copied the code of the form and now have it as a page on our server, however I am having no luck creating a pop up of the page/form on page load. I have tried shadowbox, bpopup and others with no luck. I can get it to "pop up" on a button push, but the pop up essentially just loads the whole form page instead of raising the port page up, centering it and dimming and locking the background. jquery is not my strong suit so any help would be greatly appreciated. Also, I am not wedded to jquery so if something else like ajax would be quicker for this application than great.
I would try something w/ jQuery's ready() function. http://api.jquery.com/ready/

Categories