Defer JavaScript execution till the content has been added to Document - javascript

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.

Related

How to load a 'POST' type page into an iframe in Ember?

I have an old JSP page in my project. I need to include this page into my new page, where my new UI side is complete EmberJS.
Things that I have tried
I got the rendered HTML from JSP using an ajax call and try to render with {{{ var }}} handlebar, But there are lots of scripts inside the page. They are not getting parsed or executed.
How can I load the page into an iframe? The page is POST type.
You can create a hidden form that point the target to the iframe, then trigger the click() event on the hidden submit button when document loaded.
For Example
<form action="YOUR_JSP_URL" method="post" target="myIframe">
<input id="postToIframeBtn" style="display: none" type="submit" value=" " />
</form>
<iframe name="myIframe" src=""></iframe>
<script>
document.getElementById("postToIframeBtn").click();
</script>
Short answer, try to insert them into DOM inside components didInsertElement hook using jQuery.
Do not use {{{}}} it only work with HTML inserting.

Javascript is not executing while loading a php page2 into page1 via ajax

I am beginner to php and Javascript. i am facing an issue that is i've a page say page1 which has two input fields and a button(Go).While clicking 'Go' the page2 populates on same page (page1) which has a data table. i am trying to implement JS on that Table BUT JS scripts are not Executing.
(If i have a data table in a single page it works but upper scenario it does not).
Page1(Main page having inputs and button)
<script src="../javascript/file_history.js"></script>
<input name="advance_search" type="text" id="advance_search" size="26" />
<input name="button" type="button" onclick="showFileHistory()" value="Go" />
The Other Page having data table on ajax call through JS
<script src="../javascript/file_history.js"></script>
<script type="text/javascript" src="../javascript/gs_sortable.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script type="text/javascript">
var TSort_Data = new Array('tbl_filemgtview','s', 'i','f');
tsRegister();
alert('This should be pop up');
</script>
<table id="tbl_filemgtview">
<thead id="thead"> <tr class="viewpage_heading">
<th>Table heads </th></tr>
</thead></table>
What should be there? or the way of executing Script tags which are getting by pass in page 2?
Possibly Its because the elements previously were not in the DOM and when you click on the button the elements manipulate the DOM so events firing like
$("#test").click(function(){
// Do something
});
Wont work, Now to make it work you need to use
$(document).on("click", "#test", function(){
// Do something
});
it would be better if you provide us Code or jsfiddle

login screen page getter and setter

Can anyone help me? Basically I need a page that asks for a user's name on the first page of my website. This will then allow you to the home page. How can I use the person's name on the home page at the minute the home page is being over write with just a white page with what ever the person inputs on the screen before?
Login page code
<link href="CSS.css" rel="stylesheet" type="text/css" />
<div id="image">
<img src="../images/logo.jpg"/>
</div>
<div id="login">
<script type="text/javascript">
// Called on form's `onsubmit`
function tosubmit() {
// Getting the value of your text input
var mytext = document.getElementById("mytext").value;
// Storing the value above into localStorage
localStorage.setItem("mytext", mytext);
return true;
}
</script>
</head>
<body>
<center>
<!-- INLCUDING `ONSUBMIT` EVENT + ACTION URL -->
<form name="myform" onsubmit="tosubmit();" action="index.html">
<input id="mytext" type="text" name="data">
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
the home page code
<script>
// Called on body's `onload` event
function init() {
// Retrieving the text input's value which was stored into localStorage
var mytext = localStorage.getItem("mytext");
// Writing the value in the document
document.write(" "+mytext);
}
</script>
<body onload="init();">
</body>
The page is being overwritten by document.write. You shouldn't use it,
see the warning in the spec:
Warning! This method has very idiosyncratic behavior. In some cases,
this method can affect the state of the HTML parser while the parser
is running, resulting in a DOM that does not correspond to the source
of the document (e.g. if the string written is the string
"<plaintext>" or "<!--"). In other cases, the call can clear the
current page first, as if document.open() had been called. In yet more
cases, the method is simply ignored, or throws an exception. To make
matters worse, the exact behavior of this method can in some cases be
dependent on network latency, which can lead to failures that are very
hard to debug. For all these reasons, use of this method is strongly
discouraged.
Your case is this one:
In other cases, the call can clear the current page first, as if document.open() had been called.
To avoid that, you can use DOM methods:
document.body.appendChild(document.createTextNode(mytext));

javascript jQuery stops?

I have some Jquery (mobile) actions on the .ready() function in order to initialize the html elements with the correct values (passed as $def var):
If I comment this actions (see the end of the script) the script works perfectly (but obviously without the necessary html 'select' initial values).
If I use the actions the script runs ok (until the last action) but it never reaches the next statement 'get_status()'...
<script type="text/javascript">
var gauge_humidity1,
gauge_temp1,
gauge_temp2,
gauge_temp3;
jQuery(document).ready(function() {
//### EVERYTHING WORK IF I COMMENT ALL THIS JQUERY'S ###
//initiate sliders
//OLD jQuery('#select_mode').val('$mode').slider('refresh');
jQuery('#select_mode').val('$mode')
jQuery('#select_r1_water').val('$r[0]');
jQuery('#select_r2_heat').val('$r[1]');
jQuery('#select_r345_window').val('$r[2]');
jQuery('#select_r6_shadow').val('$r[5]');
//initiate select_light
jQuery('#select_light').val('$s_ini[2][5]');
### END OF COMMENT ###
### IF I UNCOMMENT THE GET_STATUS() NEVER RUNS ###
get_status();
});
</script>
<form id="form_settings" action="" method="POST">
<div id="section" data-role="collapsible-set">
<div data-role="collapsible" data-collapsed="false">
<h3>
Control
</h3>
<div data-role="fieldcontain">
<label for="select_mode">
Modo
</label>
<select name="select_mode" id="select_mode" data-role="slider" onchange="update_mode()">
<option value="Manual">
Manual
</option>
<option value="Auto">
Auto
</option>
</select>
</div>
</div>
</div>
</form>
I think the problem is $(document).ready(), the equivalent of $(document).ready() in JQM is $(document).bind('pageinit')
Just have a look at the jQuery Mobile documentation : http://jquerymobile.com/demos/1.1.1/docs/api/events.html
Important: Use $(document).bind('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.
EDIT:
<script type="text/javascript">
jQuery('#page_settings').bind('pageinit', function() {
// Your code here
});
</script>
solution:
just added the 'pageinit' close to the html div data-role="page" and applied to '#page_settings' page (instead of document) since is were the controls are.
<div data-role="page" id="page_settings">
<script type="text/javascript">
jQuery('#page_settings').bind('pageinit', function() {
//initiate sliders
jQuery('#select_mode').val('$mode').slider('refresh');
jQuery('#select_r1_water').val('$r[0]').slider('refresh');
jQuery('#select_r2_heat').val('$r[1]').slider('refresh');
jQuery('#select_r345_window').val('$r[2]').slider('refresh');
jQuery('#select_r6_shadow').val('$r[5]').slider('refresh');
//initiate select_light
jQuery('#select_light').val('$s_ini[2][5]').selectmenu('refresh');
});
</script>

How to wait to append the data until after the form data has been added?

When I click the #screenrId, it submits the default data without having time to add the new data the user inputs. How to wait to append the data until after the form input field data has been added?
http://jsfiddle.net/XVCVE/1/
<script type="text/javascript">
$(document).ready(function() {
Screenr.Recorder( { subject:""}).appendTo("screenrId");
});
</script>
<form>
<h4>Subject <input name="subject" id='subject' type="text" ></h4>
</form>
<div id="screenrId" ></div>
I am trying to add the form data to the screen.recorder function before it appends it? Screenr.Recorder( { subject:""}).
Pretty sure I just fixed it: http://jsfiddle.net/XVCVE/3/
The problems:
The "javascript" section in jsfiddle assumes raw javascript, no <script> tags, so I moved that code to the top.
You had a very strange way to make sure the correct HTTP protocol (HTTP or HTTPS) was used to load the 3rd party library, when the browser will do that automatically if you just don't write the http: or https:.
After that, the button appeared after a slight delay.

Categories