Is it possible to change this to display an element loaded later on in the document:
function tracksinfox_{$page_trackid}()
{
document.getElementById('tracksinfoxshow_{$page_trackid}').innerHTML = 'get stuff here';
}
In the place of "get stuff here", I would like to display a div by id, but the div is created later in the page load using PHP.
with jQuery's on(), you can add event handlers to elements which are added later to the document. http://api.jquery.com/on/
you can make the function perform after document ready by document.onreadystatechange:
document.onreadystatechange=function() {
if(document.readyState == 'complete'){
tracksinfox_{$page_trackid}();
}
}
or just use window.onload event simply;
window.onload = tracksinfox_{$page_trackid};
but there's one more thing you have to know, if you like to perform two or more function after document ready, you can do it like this:
run_after_document_ready( tracksinfox_{$page_trackid} );
run_after_document_ready( somethingelse );
run_after_document_ready( somethingelse2 );
function run_after_document_ready( callback ) {
callback_saver = window.onload;
window.onload = function (){
if ( typeof callback_saver == "function" ){
callback_saver();
}
callback();
}
}
or just use the jQuery
$(document).ready(tracksinfox_{$page_trackid});
$(document).ready(somethiselse);
$(document).ready(somethiselse2);
NOTICE: window.onload has a little different with document.ready, for more information, you should to find the documents about window.onload, document.onreadystatechange and the jquery document ready.
How about using jQuery and doing something like the following. It establishes a callback method that will be called when a new element with id="info" is added to the DOM, then it adds a new DIV with id="info", which causes the callback function to be executed. The callback function unregisters itself (thus it will only ever be called once), then sets the update-me DIV's text based on the new DIV.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="update-me">I will be updated.</div>
<script language="javascript">
jQuery(function ($) {
$("body").on("DOMNodeInserted", "#info", function(e){
$("body").off("DOMNodeInserted", "#info");
$("#update-me").text( $(e.target).text() );
});
$("body").append("<div id='info'>I have changed.</div>");
});
</script>
</body>
</html>
Related
I have an index.html page which, using jquery, calls somepage.php residing within the same site to load the contents of this index.html page.
So this is the intended page load sequence:
index.html -> somepage.php -> submit.php (if submit button is clicked)
The index.html has only the "main-div" and no contents as such. When the somepage.php is called, the "main-div" contents are loaded by running the php script. The main-div contains a sub div with a small form with a submit button. Using jQuery,I see if the submit button is clicked, and when clicked, the submit.php script is called.
This is the barebone code:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery.js"></script>
<script>
$('document').ready(function(){
$("#main-div").load("http://www.someurl.com/somepage.php");
$('#item-submit').click(function(){
jsURL = $('#input').val();
submit(jsURL);
});
function submit(jsURL){
$.get(
'http://www.someurl.com/submit.php',
{ item: jsURL },
function(data){
if(data=="success")
{
$('#submit-status').html(data);
}
else
{
$('#submit-status').html(data);
}
}
);
}
});
</script>
</head>
<body>
<div id="main-div"> </div>
</body>
</html>
Now the issue:
The index.html page loads with everything displayed correctly (the small form with the submit button, all other main-div contents, everything is displayed). However, the submit button does not call the submit.php script, meaning I believe that the jQuery code corresponding to the click event is not being registered.
I am fairly new to jQuery. Does this have something to do with how I have "ordered" the code in the jQuery .ready()? Something to do with the DOM not being ready before the function is called, or maybe an issue with the .load() in jQuery?
Try this :
<script>
$(document).ready(function(){
$("#main-div").load("http://www.someurl.com/somepage.php",function(){
$("#main-div").on('click', '#item-submit', function(e){
e.preventDefault();
var jsURL = $('#input').attr('value');
submit(jsURL);
});
});
});
function submit(jsURL){
$.ajax({
url:'http://www.someurl.com/submit.php',
type :'GET',
success: function(data){
$('#submit-status').html(data);
}
});
}
</script>
$(document).ready(function(){
$("#main-div").load("http://www.someurl.com/somepage.php");
$("#main-div").on('click', '#item-submit', function(e){
e.preventDefault();
var jsURL = $('#input').val();
submit(jsURL);
});
function submit(jsURL){
$.get('http://www.someurl.com/submit.php', {item: jsURL}, function(data){
$('#submit-status').html(data);
});
}
});
Do not quote the document
load() is a shortcut for $.ajax, and it's async, so #item-submit does'nt exist when you attach the event handler, you need a delegated event handler for that.
If it's really a submit button inside a form, make you sure you prevent the default action so the form does'nt get submitted.
The load function works asynchronously. With your code #item-submit is not yet there when you try to bind the event handler.
Bind the event handler on succes:
$("#main-div").load("http://www.someurl.com/somepage.php", function () {
$('#item-submit').click(function () {
jsURL = $('#input').val();
submit(jsURL);
});
});
load loads the data asynchronously, which means time by the time you are assigning a click handler on submit button the button itself might not be yet on the page. To overcome this you have two options:
Specify a success handler for load.
$("#main-div").load("http://www.someurl.com/somepage.php", function(){
$('#item-submit').click(function(){
jsURL = $('#input').val();
submit(jsURL);
});
});
Use on to indicate that the click handler should be assigned to elements that are or will be on the page.
$('#item-submit').on('click', function(){
jsURL = $('#input').val();
submit(jsURL);
});
As all pointed out, the load function works asynchronously so, your click handler is not working for the 'future' div.
You can bind handler to a future element like this:
$(document).on('click', '#item-submit', function(event){
jsURL = $('#input').val();
submit(jsURL);
});
This way you can bind your handler in the jQuery document ready function.
I am attempting to submit a form contained in a parent window from a child iframe using jQuery without much luck.
In the child window I have the following validation function:
<script type="text/javascript" src="templates/js/jquery.js"></script>
<script type="text/javascript" src="templates/js/jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#form_invoice_item").validate({
submitHandler: function (form) {
// Check if main invoice already saved
if ($('#invoice_id').val() == "") {
// Change target to processing iframe
try {
parent.$('#invoice_form').ajaxSubmit();
} catch(e) { //debug
alert ("Error:" + e);
}
} else {
alert ("Saving invoice " + $('#invoice_id').val() + ' items'); }
//form.submit(); //debug
}
});
});
</script>
<form method="post" id="form_invoice_item" name="form_invoice_item" action="index.php" target="invoice_items">
The error that occurs at parent.$('#invoice_form').ajaxSubmit(); is
Error:TypeError: Object [object Object] has no method 'ajaxSubmit'
If I use the following snippet which is just in plain Javascript, there is no problem(Obviously this isn't jQuery but it gets the job done). How do i do this in jQuery:
parent.document.getElementById('invoice_form').target='process';
parent.document.getElementById('invoice_form').submit();
parent.document.getElementById('invoice_form').target='';
I have a hidden iframe called process which has its display property set to hidden.
If you are in a popup and you want to access the opening window, use window.opener.
Try this:
window.opener.$('#invoice_form').ajaxSubmit();
Instead of this:
parent.$('#invoice_form').ajaxSubmit();
Also see this post.
-------EDIT-----
Don't forget to load jQuery form plugin in those window in which you call it:
<script src="http://malsup.github.com/jquery.form.js"></script>
Just use the parent selector:
$('#invoice_form',window.parent.document)
This should work:
$(parent).find('#invoice_form').submit();
try this..
$(parent).find('#invoice_form').submit();
I have two files: index.php and cart.php
In cart.php I have few three functions - products_all(), products_shirts(), products_hoodies(). Those functions get info from my database and outputs it if called.
I want each of those functions to be called by clicking on hyperlinks and then to be outputed in a div tag, so that only the div tag is being refreshed not the whole site.
I read about jQuery/AJAX function load, but I can't get it to work.
If you don't want the whole page to be refreshed, there is no way around using ajax.
But it's not that hard. When using a library like jQuery, you can do it in a few lines.
Your HTNL + javscript code:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
function callFunction(yourfunction)
{
$.post('cart.php', { "function": yourfunction }, function(data) {
alert(data);
});
}
$(document).ready(function()
{
$("#functionOne").on("click", function()
{
callFunction(1)
});
$("#functionTwo").on("click", function()
{
callFunction(2)
});
});
</script>
</head>
<body>
<a id="functionOne">function one</a>
<a id="functionTwo">function two</a>
</body>
</html>
And on the server side (cart.php) something like this:
<?php
if (isset($_POST['function']))
{
switch ($_POST['function'])
{
case 1:
functionOne();
break;
case 2:
functionTwo();
break;
}
}
function functionOne()
{
echo "hi, i am func1";
}
function functionTwo()
{
echo "hi, i am func2";
}
This should get you started!
I have a page within wordpress that I want to password protect via a user role plugin. Everything works fine on straight forward pages but I have a page with window.onload = function() { that completely overrides the password function.
I want the page to load immediately after it's checked to see if the user is logged in or not.
Update:
I'm using this plugin and I just have the function:
<script type="text/javascript">
(function() {
window.onload = function() {
var map = new google.maps.Map(document.getElementById('map'), options);
...
} } )
</script>
Which then loads on this div:
<div id="map" style="width:100%; height:100%"></div>
You have to use addEventListener or attachEvent to load multiple functions. If you want to use window.onload = .., use the code in the last else block at the function below:
function addEvent(name, func) {
if (window.addEventListener) {
window.addEventListener(name, func, true);
} else if(window.attachEvent) {
window.attachEvent('on' + name, func);
} else {
var other_func = typeof window['on'+name] == "function" ? window['on'+name] : function(){};
window['on' + name] = function(ev){
func(ev);
other_func(ev);
}
}
}
addEvent('load', function(){
//Load function
});
Instead of assigning it directly to the onload property add it as an event listener
https://developer.mozilla.org/en/DOM/element.addEventListener
You'll need to use attachEvent for IE versions < 9.
http://msdn.microsoft.com/en-us/library/ms536343(v=vs.85).aspx
If you're using a framework such as jQuery or Prototype this can be abstracted out so you don't need to worry about different browsers.
<script type="text/javascript">
<!--//
// on DOM ready
$(document).ready(function (){
$("#current_rev").html("v"+$.jnotify.version);
$("a.example").bind("click", function (e){
// prevent default behavior
e.preventDefault();
var $ex = $($(this).attr("href")), code = $.trim($ex.text());
// execute the sample code
$.globalEval(code);
});
// style switcher
$("button.css_switcher").click(function (){
switchCSS(this.title);
});
});
//-->
</script>
Instead of using click events like [Run] and [Run]
How can I call events if a condition is true or false?
<?php
if (true){
[Run]}else{
[Run]}
?>
You mean "trigger" events? Your question is a bit confusing.
You can just add $("#example-1").trigger("click") to the document.ready function.
So if a condition is true on the server side it will do something on the client side when the page gets sent to the user.
Make sure you attach the click event before you trigger it.
$(function () {
// all event binds and other code
<?php
if ( $trigger ) {
echo "$('#".$element_id."').trigger( 'click' )";
}
?>
}
Make $trigger a true false and give all your links ids and pass the id as $element_id