Greetings Guru's, This is a little hard to explain, but I'll give it a shot.
I have a quick question regarding to the .live() function in JQuery. I'm going to simplify the example here. I have a page "index.php" that has a container "#display_files_container" which is populated with anchor links that are generated dynamically by a different page "process.php". The links are loaded into that same <div> when those links are selected based on the attributes of that link. See Examples:
INDEX.PHP
<html>
<head><title>index.php</title>
<!-- this function below loads process.php and passes it the dirid variable via post. I then use this post variable inside of process.php to pull other links from the database -->
<script language="text/javascript">
$('.directory').live("click", function() {
$('#display_files_container').load('plugins/project_files/process.php', {dirid: $(this).attr('dirid')});
});
</script>
</head>
<?php
/*This code initial populates the link array so we have the first links populated before the users clicks for the first time*/
some code to fetch the $current_directory_list array from the database initially....
>?
<body>
<div id='display_files_container'>
<?php
/*Cycle through the array and echo out all the links which have been pulled from DB*/
for($i=0;$i<$current_directory_count;$i++) {
echo "<a href='#' class='directory' dirid='".$current_directory_list[$i]['id']." '>".$current_directory_list[$i]['directory_name'].
"</a> ";
}
?>
</div>
</body>
</html>
PROCESS.PHP
this file includes code to populate the $current_directory_list[] array from the database based on the post variable "$_POST['dirid']" that was sent from the .click() method in index.php. It then echo's the results out and we display them in the #display_files_container container. When you click on those links the process repeats.
This works..... you can click though the directory tree and it loads the new links every time. However, it seems to want to .load() the process.php file many times over for one click. The number of times process.php is loaded seems to increase the more the links are clicked. So for example you can click on a link and firebug reports that process.php was loaded 23 times..... Eventually I would imagine I would record a stackoverflow. Please let me know if you have any ideas. Are there any ways that I can assure that .live() loads the process.php file only once?
Thanks,
-cs
What happens, is that everytime you click a link, you bind new click event handler to every link. This is possible because there can be multiple handlers for the particular event. You must return false in your handler to stop the event bubbling.
Update: I'm not sure why the handler gets bound multiple times, but my guess is that it has something to do with the special nature of 'live event' implementation. See chapter Event Delegation from the docs:
The handler passed to .live() is never bound to an element; instead, .live() binds a special handler to the root of the DOM tree.
Another solution is to use bind() or click() instead of live() and call it explicitly after the ajax has been loaded:
function bind_link_handler() {
$('.directory').click(function() {
$('#display_files_container').load('...', bind_link_handler);
})
}
Just so everyone is in the loop my new line of .live() code looks like this:
$('.directory').live("click", function() {
$('#display_files_container').load('plugins/project_files/process.php', {dirid: $(this).attr('dirid')});
return false;
});
Related
I've looked at a lot of StackOverflow answers but can't find an answer that is working. This seems like it should be so simple.
I have a PHP single page web app. It has a nav bar that loads pages as includes. Clicking the nav bar invokes a jQuery function to load a different include and inject a class into a div. This works in the nav.
In one of the includes, I have an HTML link:
<div class="page-content">
<a class='btn-primary'>See Examples</a>
</div>
This is the jQuery I want it to execute:
$(".btn-primary").click(function() {
alert('you clicked me');
$('.page').attr('class', 'page examples');
// REPLACE THE CURRENT INCLUDE
$('.page-content').load('includes/page-examples.php');
window.scrollTo(0, 0);
});
But the link does not execute the function. Changing it to a div does not work. Clicking will not even execute the alert.
I've tried to put the link in php echo or php print, but it makes no difference. I've checked all my naming and there isn't a typo.
What is the best way to make it work?
----- EDIT -----
The jQuery is being called from a js file called from the index.php head tag, and is in the DOM ready statement. It looks like the DOM is ready before the include with the link loads. If I remove the link's js from the js file and put it in the include with the link, then the link works, but this will create a problem as other internal links are added to the site in other includes.
What is the best way to fix ?
It sounds like your javascript click binding $(".btn-primary").click(...); is executed on DOM-ready.
But at that time the .btn-primary is not yet in the DOM as it only gets inserted into the DOM after you include it (if I understood it right).
Therefore the binding never happens and after your first include gets loaded the click binding code is never executed again and therefore the .btn-primary element has no onClick event.
You need to run your javascript snippet after that .btn-primary element gets inserted in the DOM, eg. like this:
$('.page-content').load('includes/first-include.php', function(){
$(".btn-primary").click(function() {
whatever...
});
});
First step
Check if you are importing jQuery library (it seems obvious, but we
can forget to import the library sometimes or the library URL is wrong
and the browser cannot recognize it as well). And remember you need import jQuery before the function you wrote.
Second step
If you need to inject a class into some element using jQuery, the easiest way to do this is:
Instead...
$('.page').attr('class', 'page examples');
Change to...
$('.page').addClass('examples');
In this example above, you can omit the 'page' and let only 'examples', because the class ".page" is already there.
Another thing, this will only work if the element with ".page" class already exists in your HTML.
Third step:
Add a callback to .load function and see if it worked properly:
$('.page-content').load('includes/page-examples.php', function(){
alert("Nice, my content was loaded!");
// You can put this action here, so it will execute after the content is loaded
window.scrollTo(0, 0);
});
ORIGINAL POST: Not sure why I am having such a hard time grasping this but I am creating a page that executes a query to list a set of records per a user. I am wanting to create a div that shows the details of a select record from the list. I am attempting to load that record with the following:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
$("#form").load("tm-reserves-form-test.php?ContactID"+$ContactID);
});
});
Initial form loads but I can not get my .click function to work using the URL parameters.
How can I pass the url parameter from my current query into a div that loads an external page and executes a second query based on that url paramenter (primary id)?
Thanks in advanced for helping me out!
EDIT POST: Found solution, but another issue has arisen.
So I took a crash course this weekend on ajax and I found a working solution here:
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
So with this example, when the page loads the div form is loaded with a default page. With a click function on the label #record the div #form is than loaded with a parameter of ContactID that is a string value inside of #ContactID. All that seems to work very well (even passes the parameter correctly).
The issue now is that it is only allowing me to pass the first record to my div. Any thoughts on what I need to implement next? I originally thought it was to clear the var but that didn't work either.
The original query parameters are not readily available to a running script. So $ContactID is not resolved to an actual value.
See this page on methods for extracting query parameters from the current page:
Get query string parameters with jQuery
$(document).ready(function(){
// load index page when the page loads
$("#form").load("tm-reserves-form.php");
$("#record").click(function(){
// load home page on click
var ContactID = document.getElementById('ContactID').value;
$("#form").load("tm-reserves-form.php", {"ContactID": ContactID});
});
});
This code solved my initial question, but led to an additional question.
So basically my question is very simple, I have two buttons, I for page forward, one for page backwards, If one of those is pushed, a javascript function is called inside an onClick Event. Javascript then gets the variables of the page and then redirects to the next page, the only problem is, that I need to pass those variables to PHP in order to put them into the Database. So for that I make a load of cookies to pass the variables.
However, I was wondering if something like this would work :
<form>
<a onClick="nexpage();" onSubmit="phpScript.php"> <img src = "previous button.jpg"/> </a>
</form>
The idea behind this is that I want to store the variables in a PHP script, which will put them in a display:none; <div> and then for javascript to get the variables out. This instead of using cookies.
So is it possible to run a PHP script to get the variables and when the script is finished to get them, Javascript kicks in to redirect to the next page...
The reason I don't test this at this moment, is that my code is 100% complete, I don't want any sudden changes that maybe won't work at all. Yes I know back-up this and that, but I thought just asking here, maybe someone will know the answer!
Sincerly,
Harmen Brinkman
You can also use onClick = "this.form.submit(); return false;".
There is no any event like onSubmit for link, instead form do have onSubmit event.
Normal Way as OP asked.
<form action = "phpScript.php" method = "POST">
you can use document.getElementById("my_form").submit();
#Dipesh Parmar – Good point. You could also do:
window.onload=function() {
document.getElementById('my-form').onsubmit=function() {
// do what you want with the form
// AJAX POST CALL TO PHP PAGE
// Should be triggered on form submit
alert('hi');
// You must return false to prevent the default form behavior
return false;
}
});
Inspiration by Capture a form submit in JavaScript
I have a php application in which the web page displayed to the user. The page has some links "Edit", "Rename", etc.
When the user clicks on the link a dialogbox prompts. The dialogbox is nothing but a HTML <div> form that gets instantly displayed when the user clicks on the "Rename" or "Edit" link.
When I looked at the html source code (i.e. view -> source in Internet Explorer) I found the following Javascript and HTML code
<a class="update renameButton" href="javascript:void(0);">Rename</a>
I'm unable to understand how the dialogbox gets promted with the above code.
I expected the code to be something like the following:
<a class="update" onclick='rename();' href="javascript:void(0);">Rename</a>
Can someone help me understand this?
Some JavaScript loaded from a <script> element probably binds an event handler function to the element.
The event handler is most likely bound to the element elsewhere (from an included JavaScript file perhaps). For example:
document.getElementsByClassName("update")[0].addEventListener("click", function () {
// Do something on click of the first `.update` element
}, false);
you should not setup event listeners in html anymore like with onclick.
the page registers an event listener to the Object. e.g. with a library like jQuery.
You are absolutely correct! That is very natural to expect such a thing except that there are other ways to bind an event to an object as well.
If you check the JavaScript code on the page I am sure you will find perhaps something that looks like $('a.renameButton').click(function(){}); (if the site is using jQuery) or something similar that binds the onclick event of that particular tag to perform some specific actions.
First I want to say that the code in jsfiddle works exactly as I'm expecting. However, when I try to insert it in my page, it does not work.
I am using
get.ajax
To move html with php a mysql data into a div named #latest-divs. I have a form with an
input#search
button that gets
val()
when
.bind('input property...)
and checks if there is exact match in the child divs of #latest-divs. I call these child elements
#latestblock
If there is exact match, then the event should execute, which, as I mentioned above, works in the jsfiddle but dies on my site. I have attempted everything I could think of:
Load in php file
Load from head
Load from body
Load with and without "CDATA"
Change my jquery version
My site is codefault (dot) org.
The jsfiddle link is http://jsfiddle.net/gAnyM/10/.
As of right now, I am loading the second part (random positioning of divs) from script/latest-topics.php and the first part in head, from index.php.
are you sure you have it inside a:
$(document).ready( function() {
// code here
});
?
The dom needs to be ready before you bind things
jsfiddle adds this for you automatically
Try another kind of event
$('input#search').bind('change keyup', function()