Develop Reference

Bootstrap modal on html element append missing css

I have a website with some bootstrap modal windows. On server rendering these modal windows everything is as should be, but after loading (appending) new items and theirs modal windows, somehow attached modals don't have bootstrap css.
Steps:
opening web page in gridview it shows 30 items blocks
clicking on any block shows modal with correct css
clicking on 'Load more' I am using ajax call for getting more
items on a page and server generated html for these Items then
append to specific div.
items appended correctly but clicking on appended item modal
window missing css.
Probably I need to recall bootstrap css or js after appending new items to page?

Here you are identifying element by id. That's why JQuery selector is taking only first matching element and ignoring others.
To fix this issue, use class to identify element in JQuery selector.

I found the answer here: bootstrap toggle doesn't work after ajax load
And my actual fix was reloading attributes after ajax success:
setTimeout(function(){
// add an element dynamically,
// now that we have dynamically loaded elements
// we need to initialize any toggles that were added
// you shouldn't re-initialize any toggles already present
// but we also do want to have to figure out how to find the ones we added
// instead, we'll destroy all toggles and recreate all new ones
$("[data-toggle='toggle']").bootstrapToggle('destroy')
$("[data-toggle='toggle']").bootstrapToggle();
$('.tags-list').tagsinput('refresh');
}, 1000)

Load external ajax content into div with animation and "back" functionality

I'm developing an NFL fantasy web app with bootstrap & jQuery. I originally was using Framework7 because of the easy native app-like interface but abandoned it to develop a fully responsive page instead.
I have a div with a list of matchups and would like for the user to be able to click on one and see the matchup detail. On Framework7, it would slide in an external ajax page, show a "back" button at the top which would easily slide that new div out and go back to the original one.
Is there an easy way to build this custom with jQuery? I already have been messing with $.load() but I'm not sure of how to:
1) slide/animate that external page into the div I need, and
2) add a "back" or "close" button that will animate/hide the div and show the original div instead.
Thanks in advance.

Sure, exactly as you said it...
$(divElement).load("newPage.html",function(){
$(divElement).slideIn();
});
Then on the click action of a back button element in that newPage.html
$(backButton).on("click",function(){
$(divElement).slideOut();
}

Loading certain images upon certain events (not on page load)

Is there a way in JS/jQuery to "block" the loading of certain images in the DOM, up until a certain event occurs?
In my case, I have a page of products (WooCommerce Shop page) where clicking a product opens a modal window containing the image gallery of that particular product. But instead of loading galleries of all products on page load (too slow) I'd like to bind the loading of the image gallery to the opening of the modal window.
I'm guessing it's not really possible but perhaps there's some trick that comes close?

You can add an img element in your modal window without any src attribute and update the src attribute based on the product selection.
Here's a Pen showcasing the idea :)

A satisfying way to achieve the same end result is to sabotage the src attribute of images, and then restore this attribute later on with JS.
Found at https://stackoverflow.com/a/5402812/871404 (thanks #arkantos too!)

Onclick not working in panel after page change

I'm creating a small webapp using jquery mobile and php. I have an issue where I have a menu in a panel which i need to run an onclick event from. This works fine when the page has been re-loaded either using data-ajax='false' or running a page refresh. However when I try to use the event after a page change it just doesn't respond at all.
Here is my onclick code
$('#searchOptionMap').click(function()
{
window.alert("map clicked ");
});
and you can see the js fiddle here http://jsfiddle.net/jbcvnz0p/
If you go to page 1 - panel click - map click the alert appears
If you then navigate to page 2 - panel click - map click the alert doesn't appear
If you stay on page 2 and click the map collapsible - alert appears
You can see that the same onclick event works for a collapsible set outside the panel, just not within it. Is there any fix for this other than using data-ajax='false' or running a page refresh?

You have two divs with the same id, when you bind something with jQuery using an id, it only does the first one.
$('#searchOptionMap').click(function()
{
window.alert("map clicked");
});
So use a class instead, or make the panel external if it's going to be the same panel for both pages.
(#searchOptionMap2 works in this case because there's only one of them)

Calling a server side function in the java script of on click event of a div ASP.NET

I have web page with four grid views. Each grid is hidden under a div tag. Whenever user clicks on div the data grid corresponding to the div is shown. I have binded data to the grid views at the page load only, since the data size is huge I cannot load the data binding at the page as the time taking to page load is huge. I was thinking a way that grid view gets data loaded only when user clicks on the corresponding div tag .
Kindly advice me how can we do it ?

As stated by the first comment, you need to convert the grids to load via AJAX to achieve this.

You can use the function toggle() from jQuery to display/hide the divs.
With jQuery, you can also add events when you click on a div. This event should fire the appropriate jQuery function.
http://api.jquery.com/toggle-event/