Imagine that I have two divs , left div and right div ,
In the left div I have some button. When I click on the home button the page home.php loaded in the right div, I use load() function to do this and when I click on about button the page about.php loaded in the right div .
My problem is that I have some other buttons in that page (I mean about.php). When I click on it some other pages must load in the right div.
I mean when I click on about button in the left div, about.php loaded in the right div.
I don't have a problem doing this it's work fine , but the problem is when i click on a button in about.php, I want about.php to be hide and load x.php in his place (right div).
This is the code that I have :
$('#about').click(function () {
$('#rightdiv').load('about.php', function() {
$('#about_button').click(function () {
$('#rightdiv').load('x.php');
})
})
})
First of all, you shouldn't nest your click handlers like you have done - they should be separate. Second, when you load the about.php jQuery is unaware of the new stuff that you have placed in the DOM. To fix that you use event delegation, meaning the click event from about.php will bubble up to an element that already existed at the time the page was loaded. jQuery is aware of that element and will handle the event properly.
$('#about').click(function () {
$('#rightdiv').load('about.php');
});
// 'click' event delegated to 'body'
$('body').on('click', '#about_button', function () { // #about_button is in about.php
$('#rightdiv').load('x.php');
})
Instead of binding the event to the items on load, you tell the browser to check ther a.nav's which occur in the document.
<a class="nav" href="about.php">about.php</a>
<a class="nav" href="other.php">other.php</a>
<a class="nav" href="last.php">last.php</a>
$(document).on('click', 'a.nav',function (e) {
e.preventDefault();
var page = this.href;
$('#rightdiv').load(page);
})
It's better to make the first selecttor ( $(document) ) as close to the actual elements, and highly recommended you use an ID:
$('#rightdiv').on('click', 'a.nav',function (e) {});
In this snippet, all a.nav in #rightdiv will get triggered, initial load or dynamicly.
you have to bind all click events after you load that php page, so create a function, that will do it after every .load call
Related
I know how to make a button that will call a jQuery load function. I also know how to create a normal HTML a element.
However I do not know how to combine them so that when the link receives a left click, it will load() some data into a specific div on the current page, but will otherwise act as a normal a to a different page of the same website if it receives a middle or right click (to enable opening the link into a new tab).
In a jQuery click event the which property lets you know which mouse button was clicked. 1 is the left, 2 is the middle and 3 is the right.
As such you can listen for the left click and perform your load() call:
$('#foo').mousedown(function(e) {
if (e.which === 1) {
e.preventDefault();
console.log('left click!');
// $('#someElement').load(...);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Click me
Will try to keep this simple so its not too much reading
I have a simple page with the following ...
$divid = 'append_here_$x;
$clickme = 'click_$x';
<div id='$clickme'>Click Me</div>
<div id='$divid'></div>
Then , I have a separate php file that builds content in a while loop generating a unique id for each div.
while ...
$imgid = 'imgid_$z' ...
<div id='$imgid'>This was appended</div>
Finally, I have this just for testing and keeping things short
$( "[id^='imgid_']").on( "click", function() {
alert('you clicked me');
});
This above works fine for the most part. If you were to click on click me, it will do ajax call and a post against the file with the while loop in it, return data and append it inside the append_here_ div. The problem is the new appended data that also has an id so yo can click will not respond to the simple click.
The way you link the click event to the elements of the page will not work for elements added later.
You are linking the event to the elements present by the time you define the click events, but if you add items later, they won't have the event on them. You could do:
$(document).on('click', '[id^="imgid_"]', function() {
alert('you clicked me');
});
That way, the event will be on the document, which is present at the startup, and everytime you click, it will check the selector (second parameter), so the new elements will respond to the click.
I builded for my home page (index.php) a navigation bar, where I can click on one of the available links (anchors). Selecting one link a new body is loaded inside my page (index.php) that contains this code:
<script type="text/javascript">
$(document).ready(function(){
$('#myselector a').click(function(e) {
var url = $(this).attr('href');
$('#body').load(url);
e.preventDefault();
});
});
this works good.
But, now after loading new page page1.php inside the body of index.php I have this trouble:
My page1.php contains a form, and after the submission I need to reload the index.php with page2.php inside. How can I perfrom this?
Note: I edit my question: If you think that now it is clear can you upvote plese? (I was banned for this question and I can't post other question)
In order to catch events from nodes inserted at a later point you need to use event-delegation, for example like this:
$("body").on("click", "a", function(e){
var url = $(this).attr('href');
e.preventDefault();
$('#body').load(url);
});
This way every click on a link, which is a childnode of body will cause the eventhandler to fire. If you do not want to target all links, but just specific ones you can do that by adding a class to them and the selector.
I Have a PHP page that is like this:
Here is the Schematics:
http://img233.imageshack.us/img233/4895/13423274.jpg
In DIV 1 And DIV 2 i made Ajax calls for Content. The Ajax Calls Are made from the main Page.
If i want to make a call From DIV 1 to change DIV 2 it doesnt Work =/
I Tried:
document.getElementById('div2').innerHTML = data;
Can Anyone Help Me? Thankyou!
An id cannot start with a number, so that could lead to problems.
Apart from that it depends on where your javascript is located and how and when you attach it to your event handler.
If the javascript is included in the code that is loaded in DIV 1, there shouldn´t be a problem, but if it already is on the page, you need to attach it to the newly loaded DIV 1 as soon as it´s loaded.
See for example the jQuery .live() function documentation for a detailed explaination of what I mean.
So in DIV1's content you have some links that, say, want to load content in to DIV2? What you'd need to do then is add event listeners to the links in DIV1 so that when they're clicked they'll created AJAX calls that load content into DIV2.
I'd recommend using jQuery (http://jquery.com/) and you can do something like this:
// getting the content into DIV1
$( '#div1' ).load( '/path/to/backend.php', function()
{
// the ajax request is complete, so let's add listeners to the a tags in DIV1
$( '#div1 a' ).click( function()
{
// this clears DIV2's content
$( '#div2' ).empty();
// and now we load some ajax by getting the href of the a tag and passing that to our backend
$( '#div2' ).load( '/path/to/backend.php', { page: $( this ).attr( 'href' ) };
});
});
You can read more here: http://api.jquery.com/load/
I use 4 link (submenu button) on my site. Every link open a DIV tag.
This DIV tags default stat is hide. (with jquery)
$('div[class*="my_"]').hide();
After i click a submenu then i show() the div tag i need:
$('a#submenu_1').click( function() {
$('div[class*="my_"]').hide(); // hide all DIV if some of them opened before
$('div.my_submenu_1').toggle('slow');
});
This is work well, till i patient to wait to hide if other DIV is opened before. But if im a click too fast between sub-menus then sometimes jquery can't HIDE the div tag before SHOWn the new.
My i use some dealy .. wait?
Could you suggest me something?!
I agree with #Ghommey, but you may also want to do the show as part of the callback to hide() so that you know that all of the others are hidden first.
$('div[class^="my_"]').stop().hide(0,function() {
$('div.my_submenu_1').show('slow');
});
Note, that you could probably rewrite this a little more generically.
$('a.menu').click( function() {
var menuID = $(this).attr('href');
$('div.menu').stop().hide(0,function() {
$(menuID).show('slow');
});
return false;
});
where your HTML looks like:
Menu 1
Menu 2
...
<div id="my_menu_1" class="menu">...</div>
<div id="my_menu_2" class="menu">...</div>
This would have the advantage of having the link actually work if javascript were turned off.