We Keep Coding

Bootstrap slide event not working inside AJAX success

This is my code, 'slide' event inside AJAX success call.
success: function(data) {
$('#my_container').html(data);
// I am getting' #mycarousel' successfully in to #my_container
$('#mycarousel').bind('slid', function(e) {
console.log('hi');
}
// tried 'slid.bs.carousel' too, no change.
// btw, I can see my 'slid' function under event listeners for that element.
// when I paste the above binding code in console again it shows the element too.
});
I want to print the 'hi' to console on slid event, which is not working now.
Thanks

Check whether you have multiple versions of jquery libraries loaded in the page.
Use $.fn.jquery to find the loaded version and cross check it with the jquery version you have included and see both are same.

After loading the carousel dynamically, you have to initialize it (as androbin suggested):
$('#my_container').html(data);
$("#mycarousel").carousel();
$('#mycarousel').bind('slide.bs.carousel', function (e) {
console.log('slide event!');
});
$('#mycarousel').bind('slid', function (e) {
console.log("slid event!");
});
Here you can see it working: http://jsfiddle.net/faw242a8/1/
Make sure the html you are pulling in via ajax contains a valid carousel.
Reference: Carousel - Bootstrap

Redirect Jquery mobile to new page with triggering of functions in this page?

I am building a mobile app, using JQuery mobile, and in the front page let's call it page-1 contains navigation buttons to different pages let's call one of them page-2
Below are page-1
$(document).ready(function () {
$("body").pagecontainer({
defaults: true
});
$("#page-2").click(function () {
$("body").pagecontainer("change", "page-2.html", {
reload: true
});
$(document).ready(function () {
function_in_page - 2.init();
});
});
page-2 has the following
var function_in_page = {
init: function () {
alert('first-1');
$("#button-1").click(function () {
alert('second-1');
});
});
So what is happening that I get the alert of "First-1" but when I click the button with ID (button-1) nothing happens , any advise?

First of all, .pagecontainer() is auto-initialized with default settings, so you don't need to initialize it.
Secondly, refrain from using .ready() to add listeners in jQuery Mobile and stick to pagecontainer events instead. The latter events are fired whenever jQM framework loads a page and/or navigates to it via Ajax, especially in Single Page Model. Unlike .ready() which fires one time only when framework is initialized.
There are many methods to control your webapp using jQuery Mobile in a Single Page Model using pagecontainer events. The safest way is to give each page a unique ID in order to determine which event is omitted on which page. Another note, you need to know that no matter how many external pages you have, only two pages will remain in DOM; homepage and another external page you have navigated to from homepage.
To add listeners, use pagecreate event, it is equivalent to .ready() and can be delegated to specific pages.
<div data-role="page" id="home">
$(document).on("pagecreate", "#home", function () {
$(".selector").on("click", function () {
/* run code */
});
});
That event will fire once per page, but note that it will fire again on any external page loaded via Ajax. Therefore, you should remove previous bindings before adding new ones, by using .off(). Otherwise, attached listeners will multiple whenever you load an external page via Ajax.
<div data-role="page" id="second">
$(document).on("pagecreate", "#second", function () {
$(".selector").off("click").on("click", function () {
/* run code */
});
});
Keep all your custom JS code in head of all pages, although the code will be loaded once in first run. jQuery Mobile loads first page div of each external page, anything outside that div is entirely neglected.
Back to your code above, here is how it should look like. Give each page an ID, and use them to add click listeners. Let's assume home is homepage and second is page-2.html.
$(document).on("pagecreate", "#home", function () {
$("#btn").on("click", function () {
$.mobile.pageContainer.pagecontainer("change", "page-2.html");
});
});
Now, page-2.html is visible. Add a click listener to button-1.
$(document).on("pagecreate", "#second", function () {
$("#button-1").off("click").on("click", function () {
alert("page 2");
});
});
Demo
Read more about pagecontainer events.

If the script in page-2 is executed to early the button might not exist yet. Try wrapping it in a document.ready
$(document).ready(function(){
var function_in_page={init:function(){
alert('first-1');
$("#button-1").click(function(){
alert('second-1');
});});
});

Bootstrap 3 modal doesnt always activate ajax code

I'm sure there is a simple answer to this I just don't seem to be able to resolve it.
I am using the bootstrap modal to return ajax content from specified url. (using $.removeData() between loads to remove content).
The problem comes with running JS on content from the form presented in the modal.
I am currently using (simplified) from within the final file (returned by ajax):
$('#myModalLg').on('shown.bs.modal', function(e) {
$(this).on('submit', 'form', function(ev) {
... event handler for form...
});
});
EDIT: along with other event handlers (datepicker for within modal included) but this code is only loaded once and then fails to activate again until the full page is reloaded
On close code:
$('#myModal, #myModalLg').on('hidden.bs.modal', function (e) {
$(e.target).removeData();
$(e.target).off('shown.bs.modal');
$('#myModal, #myModalLg').on('shown.bs.modal', function () {
$(this).find(':input:first')[0].focus();
});
});
I would be expecting the handlers to run each time #myModalLg is shown and then when it is closed it removed what has been entered and restores each time but doesn't seem to work like that.

you never turn off your shown.bs.modal have you looked into the One Event In JQuery:
I'm not sure if this will help but it seems like your redeclaring your shown.bs.modal multiple times you might want to change that to a one instead of on
$('#myModal, #myModalLg').one('shown.bs.modal', function () {
$(this).find(':input:first')[0].focus();
});

mockjax loader - stop from running for specific function

I am making use of Jonathan Sampson's answer for my jquery busy loader. it works 100% and detects any jquery posting or the like and shows the loader.
my problem is that most times I want the user to wait when I fetch info from the database so happy for the loader to appear.
What I want however, is for certain functions only for the loader not to show when I save info to the database.
the fiddle can be found here
for example, the below causes the loader to run. how can I modify this so mockjax knows not to run for this function only?
$(document).on("click", function(){
$.get("/mockjax");
});
Thanks for the help as always.

Short version (with code)
Click the heading - Animation
Click the paragraph - No Animation
http://jsfiddle.net/hPS2v/
$.ajax({
url: "/mockjax",
type: "GET",
global: false //This is the key
});
--
The slightly longer version
There is a great variable available in the $.ajax() method which let's you stop ajax events from firing (but not the ajax itself). This is called global. From the docs
global (default: true)
Type: Boolean
Whether to trigger global Ajax
event handlers for this request. The default is true. Set to false to
prevent the global handlers like ajaxStart or ajaxStop from being
triggered. This can be used to control various Ajax Events.
With this in mind, I have slightly changed your code a little to demonstrate how we can make this work.
1) Moved the AJAX call into a function with 2 parameters: URL and eventTrigger. Basically we want the URL to be "/mockajax", and the eventTrigger to be true or false (depending on if and when you want to show your animation)
2) I took the event handler off the $(document) and added 2 events to the heading tags and the p tags so I can demonstrate the AJAX working in 2 places with the same code (1 with and 1 without an animation)
Hope this helps!

You can use a variable as a flag which denotes your preference of not showing the loader.
//let say, showLoader, by default true
var showLoader = true;
Now, add this to your ajax setup as required.
$(document).on({
ajaxStart: function () {
// if showLoader true, then shows loading image
if (showLoader)
$body.addClass("loading");
},
ajaxStop: function () {
$body.removeClass("loading");
// set showLoader to true
showLoader = true;
}
});
Change showLoader state as required by you.
$(document).on("click", function (e) {
// if target element is anchor tag, then do not show loading image - example
if (e.target.tagName === 'A') {
showLoader = false;
}
$.get("/mockjax");
});
JSFiddle: http://jsfiddle.net/VpDUG/5177/
Hope, it helps.

Show jquery mobile dialog only once on startup (web app)

My problem is that following code works fine (dialog show once on startup), but when I navigate to another page (with standard ajax activated), and then navigate back to the first page, the dialog is showing again (and then in a loop manner when I click "dismiss").
What am I doing wrong?
Code looks like that:
$(document).on('pageinit', '#pageindex', function(event) {
setTimeout(function(){
$('#dialog').click();
$('#dialog').remove();
},1000);
});

For a quick fix, replace .on with.one. However, normally pageinit event should fire once only, so there must be something causing it to fire multiple times.

The following code is executed once on single/multipage page and multiple pages approach:
$(document).on('pageinit', '#pageindex', function (event) {
$(this).off(event);
setTimeout(function () {
$('#dialog').click();
$('#dialog').remove();
}, 1000);
});