We Keep Coding

Loading Specific version of Bootstrap on Particular Web Page

we have two versions of Bootstrap loaded one at the beginning at the login page and another one to the main page as they are completely isolated after loading
Here is a scenario, when the main page is loaded in multiple tabs one after other and after Signing out from one session causing that particular tab to redirect to the login page
But when rest of the tabs kept open, a modal popup screen gets triggered telling you that you had been signed off and clicking continue button lands directly into the login page
In that particular instance, two versions of bootstrap get loaded into the single page making the modal to fade after three seconds and breaking the rest of the structure where the classes had been included
As I'm looking for a solution in jQuery or JavaScript to call the necessary bootstrap plugin (i.e., by removing and adding) to load in particular page of the website.
For instance, loading the specific Bootstrap plugin on the login page as well as in the main page by removing and adding
<link rel="stylesheet" href="..."> snippets.
Whether is it possible to achieve the above scenario or by any other method could it be approached to solve.

Show the page only after all the javascript is executed

I am using Jquery tabs in my project, and it all works fine.
However when the user opens the page, the page displays all the material in all the tabs for a second first, then it executes the javascript and the screen comes back to normal.
It's an ugly sight, how can I prevent this? Is there a way to show the page after all the loading is done only?

You could try hiding your content when the page loads and using JQuery to reveal it.
HTML:
<div id="contentDiv" style="display: none;">....</div>
JavaScript:
jQuery(document).ready(function ($) {$('#orderContentsInfoBox').css('display','block');});
This jQuery function fires when the document is fully loaded. If you are still seeing a flicker of content before it is hidden in tabs, then I would recommend finding the function that sets up the tabs and inserting the code to reveal the content div there. That way the content will only appear after all tabs are setup.

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!

Capture click event before page load and trigger after DOM ready

I am working on an E-commerce site where on product listing page when the user clicks on Add Cart button
product will be added to cart and we are showing an popup box saying the product added... We are using Plugin for showing popup box and data for popup is coming from ajax and java controller. It is working fine well when the entire page loaded successfully. If the user clicks on Add Cart while the page load its showing plain ajax result instead of Popup because the Plugin using for Popup is not available during page load. We tried disabling the Add Cart button till page load but client is not happy with this approach.
Code:
<--!form for add to cart-->
<form submit="addcart()">
<input type="button">Add Cart</button>
</form>
//JS for show popup and save form data
saveform:function{
}
displayPopup:function{
}
productadd:function{
saveform();
displayPopup();
}
$(document).ready(function(){
productadd();
}
Is there any workaround to capture the click event during page load and trigger the click event automatically for particular button if user already clicked on. Please suggest me any other solution to show popup properly.
Thanks In Advance:)

Your option is not to use inline JS, which is not recommended nowadays anyway. In this case, you risk calling the addcart() function when the JS file has not been downloaded and parsed.
The solution is to use JS to bind the click event to the submit form upon DOM ready, so that the click event will only be meaningful once JS is loaded. For your HTML, remove the inline JS:
<form>
<input type="button">Add Cart</button>
</form>
Instead, listen to the submit event using JS:
$(document).ready(function(){
productadd();
$('form').submit(function() {
addcart();
});
});
Also, you might want to look at the reason why your site is loading so slowly (or at least the JS). Are you serving it as a gzipped file? Is there anyway to minimize it (only the production version)?

AC_FL_RunContent not working after UpdatePanel postback

I have some javascript in a repeater item which calls AC_FL_RunContent to load and show a flash file (in each repeater item) when a link is clicked (link is part of repeater item).
I have a paged datasource showing the first page of video links. Five items on each page.
The show video links work fine on initial page when there hasn't been a postback from the UpdatePanel. Clicking the buttons opens a fancybox and shows the flash movie to play.
However after I have gone to the next 'page' of video links using the paged datasource.. (or try to subsequently go to the any other paged page') The AC_FL_RunContent does not seem to be working.
The fancybox still pops up, a test alert() with databound value still works. AC_FL_RunContent just doesn't seem to want to load the flash file.
If I remove the UpdatePanel. It works fine. But that is not an option i'm afraid.
So :
Databinding is working
Javasript still works (alert proves that)
Fancybox is still working
AC_FL_RunContent is just not loading flash file.
I have the following setup
UPDATEPANEL
--REPEATER
---- REPEATER_ITEM
------ SCRIPT
-------- alert('databound value');
-------- AC_FL_RunContent
Paged Data Source (within update panel)
Any thoughts?

I have done two different things in the past:
Use the Object tag
Wrap my AC_FL_RunContent calls in a JS function that is outside of the UpdatePanel. If you need to pass dynamic params, just make a generic JS function with the params you need.