We Keep Coding

jQuery function that dynamically load data AND also execute js?

For example we have two php pages (same domain):
index.php
data.php (that uses a jQuery script)
If I load a part of the "data.php" inside the "index.php" I have to re execute the js file from the "data.php" like this:
$( ".box" ).load("data.php .my_data", function() {
$.getScript("https://website.com/js/data.js");
});
Is there an other/better way to load a part from the external data.php and automatically execute all js that is connected with it?

data.php (this template contains no script)
<div class="template">
<div class="title">
<span>Title</span>
</div>
<div class="content">
<span>Content</span>
</div>
<div>
<button type="button">Read</button>
</div>
</div>
Script on index.php:
In this example, I just show the event when clicking on the button, there are some ways to define it:
Option 1: Write the event after loading template successfully
$('.box').load('data.php').done(function (template) {
template = $(template).appendTo('body');
template.on('click', 'button', function () {
console.log('clicked!');
});
});
Option 2: Write the event outside the event which is used to load the template
$('.box').load('data.php').done(function (template) {
$(template).appendTo('body');
});
$(document).on('click', 'button', function () {
console.log('clicked!');
});
This ways require all of the scripts which are working on data.php are ready on index.php.
If you don't want to move/split the code:
data.php:
<div class="template">
<div class="title">
<span>Title</span>
</div>
<div class="content">
<span>Content</span>
</div>
<div>
<button type="button">Read</button>
</div>
</div>
<script src="/js/data.js"></script>
In the file data.js, if you want to load something more but not immediately, make sure you're working with document (there are more ways but I highly recommend this):
data.js
// this code works imediately after your document has `.load` class
$(document).on('click', '.load', function () {
// this code will work if your document already has `.box` class
$('.box').load('some_data.php').done(function (template) {
console.log(template);
});
});
On the index.php, after appending the template, the code will work correctly. Nothing is automatically more.

featherlight.js - Run script on modal load

Problem
HTML
<div id="form-lightbox">
<div class="form">
<div id="ajaxreplace">
<script type="text/javascript">
jQuery(function() {
jQuery.ajaxReplace({
//parameters
});
});
</script>
</div>
</div>
</div>
open lightbox
It is a custom script that replaces the script with a form from the backend.
The problem is, that featherlight.js copies the source and displays
the clone in the lightbox.
That duplication of code can't be handled by the library for the form.
I changed the script-tag-type to "text/x-template" so the script does
not run directly. But then the form isn't rendered in the lightbox.
Question: How can I use featherlight to run the script on loading the the lightbox?

To run code after the lightbox is opened, use callbacks (e.g. afterOpen).
If you don't want content to be duplicated, use the persist option.
HTH

issue with page show event in Jquery mobile?

I am unable to fire an event on page show. In my home page I have a select menu which will dynamically get the values from DB. My functionality is working fine but event does not happen. I need to fire my function when I my page gets loaded. How to do that
<div data-role="page" id="homePage">
<div data-role="header" data-theme="b">
<h1>
Heading
</h1>
</div>
<div data-role="content">
<select name="select-choice" id="select-choice">
<option value="Select Category">Select Category
</select>
</select>
</div>
</div>
I have fired the event as follows, but function does not fired
$(document).on("pageshow", "#homePage", function () {
alert("on page show event occurred!! ");
// I did my logic here...
});
GIve some suggestions that which event is better to use and how to do that.

Paste this in your page and you will get sequence in which events fired.
For the convenient event that fired instead of console.log insert your function call.
$(document).on('pagebeforecreate',function(){console.log('pagebeforecreate');});
$(document).on('pagecreate',function(){console.log('pagecreate');});
$(document).on('pageinit',function(){console.log('pageinit');});
$(document).on('pagebeforehide',function(){console.log('pagebeforehide');});
$(document).on('pagebeforeshow',function(){console.log('pagebeforeshow');});
$(document).on('pageremove',function(){console.log('pageremove');});
$(document).on('pageshow',function(){console.log('pageshow');});
$(document).on('pagehide',function(){console.log('pagehide');});
$(window).load(function () {
console.log("window loaded");
});
$(function () {
console.log('document ready');
});
$(window).on('unload',function () {console.log("window unloaded");});

No pagechange event firing

In jQuery mobile, I am trying to detect a successful page change to a specific page. I have the following code, inline on the page I want to load.
<script>
$(document).bind( "pagebeforechange", function( e, data ) {
alert("pagebeforechange");
});
$(document).bind( "pagechange", function( e, data ) {
alert("pagechange");
});
$(document).bind( "pagechangefailed", function( e, data ) {
alert("pagechangefailed");
});
$(document).live( "pagebeforechange", function( e, data ) {
alert("pagebeforechange live");
});
$(document).live( "pagechange", function( e, data ) {
alert("pagechange live");
});
$(document).live( "pagechangefailed", function( e, data ) {
alert("pagechangefailed live");
});
</script>
I get the the appropriate alerts when loading the page directly, or refreshing, but not when navigating from another area in the Jquery Mobile app.
Page is called by the the "Your Car" Tab in the footer
<div id="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li>Home</li>
<li>Features</li>
<li>Your Car</li>
<li>Contact</li>
</ul>
</div>
</div>

Would it work to place your code in the pageshow event? It may if you are trying to detect the page or location. Something like this maybe:
<script type="text/javascript">
$('[data-role=page]').live('pageshow', function (event, ui) {
hash = location.hash;
page = hash.susbtr(1);
if (page.indexOf('about.html') >= 0) {
alert('you made it!');
}
});
</script>
UPDATE
After testing this scenario a bit more and rereading your question, I think I was able to reproduce the results.
This works as you described and only fires alerts when loading the page directly or refreshing the page:
<body>
<div data-role="page">
<!-- page stuff -->
</div>
<script type="text/javascript"> ..bind events... </script>
</body>
However, when I move the javascript directly inside the page, it works as expected and fires all of the bound events, no matter how the page was reached:
<body>
<div data-role="page">
<script type="text/javascript"> ..bind events... </script>
<!-- page stuff -->
</div>
</body>

Where are you binding to this events?
Have you read following in the Docs http://code.jquery.com/mobile/latest/demos/docs/api/events.html:
Important: Use pageInit(), not $(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as the
DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.

Luke's thinking is in the right direction: clearly the problem you had has to do with where in the code the binding is occurring. This is proved by shanabus.
However, in your case, you should be doing the binding when jQuery mobile's mobileinit event is fired, not pageInit, as Luke is suggesting.
Example (fires on all page change events):
<script type="text/javascript">
$(document).bind('mobileinit', function() {
$(document).on('pagechange', function () {
window.alert('page changed!');
});
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.js"></script>
As illustrated in the code above, be mindful that handlers triggered by mobileinit must be included before the jQuery mobile <script> tag.

Defer JavaScript execution till the content has been added to Document

I am trying to load some content into a page using Ajax. The html that is loaded contains some JavaScript code. Even though the code is wrapped within $(document).ready, it gets executed before the content is inserted into the document, because the parent document's Dom is ready by the time the content is loaded.
How can I defer the execution of the code, until the content has been inserted into the document. Here is the html that I am trying to load (this is the code for openid-selector)
<script type="text/javascript" src="/js/openid-jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
alert('ajax-html');
openid.init('openid_identifier');
});
</script>
<!-- Simple OpenID Selector -->
<form action="try_auth.php" method="get" id="openid_form">
<input type="hidden" name="action" value="verify" />
<fieldset>
<legend>Sign-in or Create New Account</legend>
<div id="openid_choice">
<p>Please click your account provider:</p>
<div id="openid_btns"></div>
</div>
<div id="openid_input_area">
<input id="openid_identifier" name="openid_identifier" type="text" value="http://www.joycebabu.com" />
<input id="openid_submit" type="submit" value="Sign-In"/>
</div>
</fieldset>
</form>
Update : Removed the noscript tag

It seems that the problem is that openid.init() is loading its own data and you want to manipulate that data after it has been loaded synchronously. There are a couple solutions:
Associate a callback function that executes when the asynchronous load is complete. Does the openid lib not offer you this functionality?
If you know the valid selectors of the data elements you want to manipulate before they've been added to the DOM, you can use .live().
I notice you are using the noscript tag. I advise against this strongly. Do all of your DOM manipulation through JS.