I have the page (index.php) that contain one link with id="t1" and one div id="container".
<a id="t1" title="Users" href="utenti.php">Users</a>
<div id="container">
<!--Where does the contained-->
</div>
When I click the link I get a built-in external page (utenti.php)
This is code of Ajax:
$(document).ready(function(){
$("#t1").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
});
and so far all is well, but if I click a link in the page that is included (utenti.php) the page is not incorporated in the same div but is opened in a direct manner.
I tried to put in the file .JS the code Ajax, to recognize the ID of the links transforming into:
$(document).ready(function(){
$("#t1").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
$("#click").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
});
Where #click is id of the link contained in the page Utenti.php,but even so
I do not incorporate the page in the div.
I also tried to include directly the page with the script inside the page utenti.php but I recognize the first link (which is fine) but everyone else does!(not all other!)
If I understand correctly this system does not include actually the page as would the classic include of PHP.
He gives him also the values already included in the index is more a kind of visualization,only that I haven't understand how to pass the value of the links contained in utenti.php inside the main page index.php.
It should be
$(document).on("click","#t1",function(e){
e.preventDefault();
var href = $(this).attr("href");
$("#container").load(href);
});
If you want links on the page that is opened in the div to also be targeted to the div you can try a delegated click handler on the div itself.
$(document).ready(function () {
$("#t1").click(openLinksInDiv);
$("#container").on("click", "a", openLinksInDiv);
function openLinksInDiv(event) {
//$("#container").hide();
$("#container").load($(this).attr("href"), function () {
$("#container").show();
});
event.preventDefault();
}
});
Demo: http://jsfiddle.net/AN56C/
Or if you want all links on the page to open in that div, use:
$(document).on("click", "a", openLinksInDiv);
Noting that loading pages via Ajax won't work for any and all pages from external domains, but will work for pages from your own domain.
This whole thing seems to be the perfect case for an iframe rather than a div, in which case you could have links to external domains.
Related
Need help..
I have an index.php page. On that page, I have a link to page-2.php.
On page-2.php,
i also have a link to other page. May I know how to load the link on page-2.php in a same div on index.php page.
I'm using jQuery load method do to this. I'm able to load page-2.php inside a div on index.php. Below are the codes that I made.
$(document).ready(function() {
$('a#staff_info').click(function(e){ //link to page-2.php
e.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
$('a#upd_staff').click(function(){ //link on page2.php
var page_info = $('a#upd_staff').attr('href');
$('#content').load(page_info);
});
});
});
the above code will direct me to a new page not on a same div
Ajax is asynchronous.
$('#content').load(page);
The above starts loading page two
$('a#upd_staff').click(function(){ //link on page2.php
Then you try to bind your event handler to content from page 2 before it is has finished loading.
So when you click on the link, there is no JS bound to it, so it acts as a normal link.
Use deferred event handlers (so they listen on the document and check what element was clicked when the click happens).
$(document).ready(function() {
function ajaxLoad(event) {
event.preventDefault();
var page = $(this).attr('href');
$('#content').load(page);
}
$(document).on("click", "a#staff_info, a#upd_staff", ajaxLoad);
});
when you click on $('a#staff_info') this -- I can see that you use e.preventDefault(); for preventing the normal action of the anchor tag but when you click on $('a#upd_staff') this you did not use e.preventDefault(); -- that's why this redirect to page2.php. Use e.preventDefault(); - this for next one click may be this will help you
You can use get() for add directly on your div:
$(document).ready(function() {
$('a#staff_info').click(function(e){ //link to page-2.php
e.preventDefault();
var page = $(this).attr('href');
$.get(page, function(data, status){
//action on page loaded, data is your page result
$('#content').html(data)
});
$('a#upd_staff').click(function(){ //link on page2.php
var page_info = $('a#upd_staff').attr('href');
$('#content').load(page_info);
});
});
});
My question may sound confusing but actually it's not. Let me clear you the things. The scenario is I've following HTML code:
/*This is the hyperlink I've given for example here. Many such hyperlinks may present on a webpage representing different question ids' */
<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21679" title="Fixed" href="#fixedPopContent" class="fixed" data-q_id="21679" id="fix_21679">Fixed</a>
/*Following is the HTML code for jQuery Colorbox pop-up. This code has kept hidden initially.*/
<div class="hidden">
<div id="fixedPopContent" class="c-popup">
<h2 class="c-popup-header">Question Issue Fix</h2>
<div class="c-content">
<h3>Is question reported issue fixed?</h3>
Yes
No
</div>
</div>
</div>
Now upon clicking on this hyperlink I'm showing a pop-up(I've used jQUery Colorbox pop-up here. It's ok even if you are not familiar with this library.) On this pop-up there are two buttons Yes and No. Actually these are not buttons, these are hyperlinks but showing as a buttons using CSS. Now my issue is when user clicks on hyperlink 'Yes' the page is redirecting to the href attribute value and the page reloads.
Actually I want to get to the page mentioned in href attribute but the page should not get reload or refresh. How to achieve this? Following is the jQuery code for colorbox pop-up as well as for Yes and No buttons present on this pop-up. I've tried this much but it didn't work for me. The page is getting redirected and reloaded.
My code is as follows:
$(document).ready(function() {
$(".fixed").click(function(e) {
var action_url1 = $(this).attr('delhref');
var qid = $(this).data('q_id');
$('#fixedPop_url').attr('href', action_url1);
$(".fixed").colorbox({inline:true, width:666});
$("#fixedPop_url").click(function(event) {
event.preventDefault();
$("#fix_"+qid).hide();
$("#notfix_"+qid).show();
});
$(".c-btn").bind('click', function(){
$.colorbox.close();
});
});
});
So you need to load the page at the url but not navigate to it.
You can use .load() .
So in your case, lets say that your pop container div class is .popup, and the div where you want to load the urls content has an id say #container.
$(".popup a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('delhref');
$("#container").load(url);
});
Few things to keep in mind,
This will mostly not work for urls pointing to any other domain. (Same Origin Policy)
Any content loaded with this function (.load()) shall be inserted within the container and all the incomming scripts if any shall be executed.
You can do that with history.js. Here is an example;
HTML:
Delete
Update
<div id="content"></div>
JS:
var History = window.History;
if (!History.enabled) {
return false;
}
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
$('#content').load(State.url);
});
$('body').on('click', 'a', function(e) {
var urlPath = $(this).attr('href');
var Title = $(this).text();
History.pushState(null, Title, urlPath);
return false;
});
You can see code here: jsfiddle code
You can see demo here: jsfiddle demo
Note: Urls in example cannot be found. You need to update it according to your needs. This simply, loads content in href without refreshing your page.
This is my index.html page where am trying to implement a simple AJAX when clicked on anchor tag the text will be passed to PHP data.php page and that page will display the page being clicked. Yes, the code is working, but when I first click on the link nothing is displayed and from the second time it stars working. Where is the problem actually?
This is my script
<script>
$(document).click(function(){
$("a").click(function(){
//when clicked our ajax will work
$.get('data.php',{'page':$(this).text()},function(data){
$('#result').html(data);
});
});
});
</script>
And this is my PHP for the AJAX
<?php
$anchortext=$_GET['page'];
if(isset($anchortext))
{
echo 'this is a'.$anchortext;
}
?>
You misplaced $(document).click(..) for $(document).ready(....), so only after the first click the click handler is registered to the a element
$(document).ready(function(){
$("a").click(function(){
//when clicked our ajax will work
$.get('data.php',{'page':$(this).text()},function(data){
$('#result').html(data);
});
});
});
Use $(document).ready instead of $(document).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.
Why does the JQuery script I use in all my pages seems to only works before beginning to browse my tabs if the content of my tabs is the same everywhere ?
I have a tab view web page built with JQuery and AJAX.
This is my JQuery functions:
$(document).ready(function(){
$(".box .more").click(function(event){
alert('test');
});
$("a.linkTab").click(function(event){
var tabID = $('.linkTab')[0].toString().split('#')[1];
$.ajax({
url : "loadPage.php?tabID=" + tabID,
success : function (data) {
$('#body').html(data);
}
});
});
});
This is my body web page:
<div id="header">...</div>
<div id="body">
<div class="box">
<p class="more">LinkLike</p>
</div>
</div>
<div id="footer">9</div>
loadPage.php only include needed page that Ajax script sent.
My tab system works perfectly, I can navigate in the page I want. Before navigating, When I click on the LinkLike, the alert appears. But, when I browse tabs, When I click, there is nothing.
Why does the JQuery script seems to only works before beginning to browse.
Important, the file I imports from php contains exactly the same body than the first one. The file contains:
<div class="box">
<p class="more">LinkLike</p>
</div>
try
$(document).delegate(".box .more","click",function(event){
alert('test');
});
the reason probably is you can generating the link dynamically, and event handlers do not attach themselves to the dynamically inserted elements to the DOM. Previously .live was used but that now is deprecated, if you are using jquery version 1.7+ you can use the .on method or else you can use the delegate method to attach the event handler to the dynamic content. However you can also re-bind the events in the success callback of ajax request
$.ajax({
url : "loadPage.php?tabID=" + tabID,
success : function (data) {
$('#body').html(data);
$(".box").bind("click");
}
});
jQuery.on version1.7+
jQuery.delegate
You are replacing the entire body of the page when your click event fires; therefore, you will need to re-bind your click events once the new content is loaded.
$(document).ready blocks will only fire when the initial document loads, so the AJAX-ed in content will not cause the click events to be bound again, you'll have to do this in the success callback of the click event that replaces the body content.
function init() {
$("a.linkTab").click(function(event){
var tabID = $('.linkTab')[0].toString().split('#')[1];
$.ajax({
url : "loadPage.php?tabID=" + tabID,
success : function (data) {
$('#body').html(data);
init(); // re-bind events again
}
});
});
}
NOTE: This method will work, but it's probably a bit naive. Check out this jQuery page for more details on how to use the "delegate" jQuery method. The delegate method will bind click events both now as well as in the future.
Here is an example using "on", which supersedes "delegate" as of jQuery 1.7+:
// I'm not sure if you're referring to "body" the body tag or "body" the id of your div.
// Please adjust accordingly.
$("body").on("click", "a.linkTab", function() {
var tabID = $('.linkTab')[0].toString().split('#')[1];
$.ajax({
url : "loadPage.php?tabID=" + tabID,
success : function (data) {
$('#body').html(data);
}
});
});