Hello i have this code to load php file into div. Its working but i need load next file into this div.
<script type="text/javascript">
$(function() {
$("a.load").on("click", function(load) {
load.preventDefault();
$("#zaw").hide().load(this.href).fadeToggle(1000);
});
});
</script>
<li><a class="load" href="zzz.php">zzz</a></li>
If i click "zzz" link loading file into my div (file table with images) i need hide this page and load next by click image.
UPDATE
Now working
<script type="text/javascript">
$(function() {
$("a.load").on("click", function(load) {
load.preventDefault();
$("#zaw").hide().empty().load(this.href).fadeToggle(1000);
});
});
</script>
You just simply need to bind another click event to an image (or table body) that you load through load() function. However, you may experience some issue with your click not working, and heres why:
If you attach two click handlers, one for a.load and second for, let's say, .image than only the first event will actually get bind to its element, and the socond one won't be attached because, well, .image doesn't exist yet - not untill you load it.
You could expect, that once you php file content will get loaded (with .image elements in it), then clicking them will fire an action you have declared, but it won't - those .image's are new DOM elements and they missed an event binding procedure which was done only once when the DOM was created (or DOM was ready if you use $.(document).ready()).
So, in order to get those clicks to work you need to either attatch them on load() function callback, like so:
$("a.load").on("click", function(load) {
load.preventDefault();
$("#zaw").hide().load(this.href, function(){
$(".image").on("click", function(e) {
$("#zaw").hide().load(/* load what you want */);
});
})
.fadeToggle(1000);
});
or insert .image click event binding inside php file you are loading or use some sort of delegation, for example:
$(document).on('click', '.image', function(){
/* do what you want */
});
which will make sure that even new, dynamically created DOM element will fire an action you want.
Related
I'd like know how to fire unique Handler triggered by clicked element loaded dynamically in parent div (so delegate) or when is directly loaded.
Firstly, <a class="manage-lnk>Manage</a> Elements are loaded directly, but after, further there are loaded dynamically
html
<div id="viewContainer">
<a class="manage-lnk">Manage</a>
</div>
lib.js.
I have to find this tip for it to work in both cases
$(document).on('click','.manage-lnk',function(){
alert(1);
});
$('.manage-lnk').on('click',function(){
alert(1);
});
what i want is to fire alert(1) although the element is dynamically loaded or not.
(PS:Excuse me for my english i speak french)
Fire this:
$('.manage-lnk').on('click',function(){
alert(1);
});
Each time you dynamically add another one of these:
<div id="viewContainer">
<a class="manage-lnk">Manage</a>
</div>
If it's dynamically loaded after the JS has fired it will not have the event attached.
It would make sense to add it to a function you can call just after the code that dynamically adds in the HTML:
function addNewHtmlSectionFunctionName() {
//Code to add div dynamically
}
function attachClickEventToManageLnk() {
$('.manage-lnk').on('click',function(){
alert(1);
});
}
$(function() {
addNewHtmlSectionFunctionName();
attachClickEventToManageLnk();
});
I have an index.php page that holds and loads all the content so it wont be neccessary to load to other pages and everything happens dynamically. So lets say i have a div in the index.php:
<div id="content"></div>
and i have a full content.php file that holds most of the divs/pages:
<div id="cont1">something :
<div id="innercont1">Dynamic click
</div>
</div>
<div id="changeinnercont1">
<img src="images/pic.jpg" />
</div>
so far so good but the jQuery\Ajax script isnt working in index.php where it should manipulate the divs from content.php. This is the script that loads onclick event the divs in #content from index.php and its working perfectly:
$("#content").fadeOut("slow",function(){
$("#content").load("content.php #cont1");
$("#content").fadeIn();
});
But when it loads this content from the content.php and when i click the link text nothing happens because of the another script in index.php that isnt working properly:
$(function () {
$("#innercont1").click(function (e) {
e.preventDefault();
$("#innercont1").load("content.php #changeinnercont1");
});
});
I think the browser isnt holding the loaded div from another page but only the #content from its own(index.php)
When the ("#innercont1").click event listener is created, there is no element in the DOM with the id innercont1, since that element is dynamically loaded from elsewhere. What you need for this instance is an event listener that will catch any element with that id at any time. You can bind the listener to the body element instead, like so:
$(document.body).on('click', '#innercont1', function(){
//code
});
It could be that your click event listener is being bound before #innercont1 exists. What happens if you load and bind the listener all in one block, e.g.
$("#content").fadeOut("slow",function(){
$("#content").load("content.php #cont1");
$("#innercont1").click(function (e) {
e.preventDefault();
$("#innercont1").load("content.php #changeinnercont1");
});
$("#content").fadeIn();
});
So I have a few "boxes" with an onclick function:
<div class="box" onclick="load(1);return false;"></div>
<div class="box" onclick="load(2);return false;"></div>
The onclick functions trigger a function that reads the content of a few seperate .php files (example1.php and example2.php).
These files contain other boxes made with fieldset instead of a div.
function load(num){
$("#loadthis").load("example"+num+".php");
}
And the function above is changing the content of this div down here:
<div id="loadthis">Load my fieldset boxes</div>
So far everything works, until I click on the fieldset boxes.
The background color of the fieldset should change when I click it and the radio inside the fieldset should be selected too (because of css styling), but both of this does not happen. But I can still select the radio when clicking the radio (not the box).
I have tested it in IE and in Chrome, this code works there most of the time.
But in firefox I cannot select the fieldset box 50% of the time.
I tried to experiment with the .on( class but it gives me the same effect.
$('fieldset.type-a').children('.row').children('.box.col-4').on("click", load);
function load(){
var index = $('fieldset.type-a').children('.row').children('.box.col-4').index( this );
index+=1;
$("#loadthis").load("fs"+index+".php");
}
Okay so after some searching I found that there is already an onclick function in a different .js file that being called:
function handleStep2() {
$('.step-form-2 input[type=radio]').change(function () {
$(this).closest('fieldset').find('.box').removeClass('active');
$(this).closest('.box').addClass('active');
$(this).attr('checked', 'checked');
});
$('.step-form-2 .select-box .box').click(function () {
$(this).find('input[type=radio]').trigger('change');
});
}
I am now going to try to merge the codes and see if that gets rid of the bug with the active class not being activated on click.
SOLVED: I solved it by indeed merging both the codes to 1 click function. Thanks for all your help guys, But I still wonder if this could be done a different way?
Look into event delegation, and if you're using jQuery it's easy
look into the jQuery API for .on(
Also you want to make sure you're using unobtrusive JS, so pull that out of your HTML, put it in a .js file as an event listener and load the script after the DOM has loaded as the last thing before your closing </body> tag
It should be a delay about loading php files content.
Is it work when you click one of them even takes time?
Maybe you should ajax for loading php files. By the way you can send data to php files using GET or POST methods.
You can check this examples.
If your function is initalized in an IIFE, inline js can´t access this function.
It´s weird that you say this sometimes works..
IIFE is a wrapper function to create capsules, so the client can´t modify your script in runtime.
Looks like this:
(function(){
/* code */
}());
It would be much better to create js-events:
on('body', 'click', '.box', function(e) {
console.log(e.target); // this is the clicked list item
});
Hope it helps..
I'm importing some php into a div block using a link like this
<a class="ajax-link" href="login.php">Login/Register</a>
and such script (that uses jquery load to fill the div block).
$(function() {
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#body-element").load(this.href);
});
});
Now let's say the loaded php file after running the php portion also contains a link with "ajax-link" class and I want that link too to change the contents of that div block
<?php
...
?>
<a class="ajax-link" href="view.php">View content</a>
But rather than running the above mentioned function on it, it seems to ignore it completely and opens a new page instead.
So basically... how can I run that script on imported parts of the page?
This is where event delegation comes in handy.
$(document.body).on("click", "a.ajax-link", function(e) {
// ...
});
This code needs to be re-run ... dynamically added objects are not included in previous on clicks.
$("a.ajax-link").on("click", function(e) {
e.preventDefault();
$("#body-element").load(this.href);
});
... you could also ... turn off the old watcher.
$("a.ajax-link").off("click");
UPDATE:
Try ...
$("a.ajax-link")
.off("click")
.on("click", function(e) {
e.preventDefault();
$("#body-element").load(this.href);
});
You have to apply the click listener on the newly added link as well, as the element has to be loaded into the DOM when applying the click listener in order for it to be applied. However, if you just re-run the same code you'll like run into the problem of having two event listeners on the first ajax-link.
Try this:
// We still use on doc ready to be sure the
// first link is present before applying listener
$(function()
{
// Reset all listeners on ajax-links and
// then apply listeners via function
resetAjaxLinks();
});
// This function will remove any ajaxlink
// listeners and then apply them correctly
function resetAjaxLinks()
{
// Remove event listeners and then on click....
$("a.ajax-link").off('click').on("click", function(e)
{
// Prevent default link action...
e.preventDefault();
// Load in your content...
$("#body-element").load(this.href);
// Once content is loaded in, reset event listeners!
resetAjaxLinks();
});
}
EDIT: This is not the best method for this. Instead, use event delegation as specified by this answer.
JQM elements on physical page:
#page_test1
button changing page to #page_test2
#page_test2
div #place to put something programmatically
to put button inside #place container I wrote the following (working) code:
$(document).on('pagebeforeshow', '#page_test2', function(event) {
$('#place').empty();
$('#place').append('Dynamic button inserted by JavaScript');
$('#place').trigger('create');
});
Ok, but when I take an attempt to move .on body to script level (directly under script tag) code inside become wrong because of context loose:
$(document).on('pagebeforeshow', '#page_test2', function(event) {
addButton(); // Attempt to move widget manipulation up
});
// Widget manipulation not changed but moved outside (level up) .on
// Not working
function addButton() {
$('#place').empty();
$('#place').append('Dynamic button inserted by JavaScript');
$('#place').trigger('create');
}
How to access JQM elements from different levels of JQM hierarchy and outside of it?
Guess it is very basic for JQM / Ajax so I will very thankful to take URL with common information.
To access an dynamically through code outside the target page, use the the following:
$(document).on(event, '.selector', function() { });
To access an dynamically through code inside the target page, use the the following:
$('.selector').on(event, function() { });