I found the asnwer to my question in another thread: How to load PHP file into DIV by jQuery?
the only problem i have is: i cant send someone a link with a certain file loaded into the did. its always just the home url. is there any way to include that into the url?
i used the following code:
$(document).ready(function(){
$("#artists").click(function(){
$("#content").load('urltocontent.php');
});
});
in my index.php i have a #content and everything works smoothly.
i plan on opening every content in php in that div. but when i open the page, of course the div is empty, because no link was clicked that opens content in the div. is there a way to generate an url that opens the content? so i could spread links
Assuming you are calling your page like this : http://example.com?url=page_to_include.com
You can use this code :
$(document).ready(function(){
$("#contents").load('<?php echo $_GET['url']; ?>');
});
You can use the # .. thats how its usually done in javascript. so by adding #artists behind the url.. Example:
$(function(){
$("#button1").click(function(){
$("#content").html("content of button 1. can load with ajax like you did");
});
$("#button2").click(function(){
$("#content").html("content of button 2. can load with ajax like you did");
});
$(document.URL.substr(document.URL.indexOf('#')) ).click();
})
Now go to yoururl.php#button1
Related
I have a page I'm working on where a user clicks a link and it loads a new php file into an existing div. It works but the page that loads into the div will not function with existing Javascript stuff in the page.
I can include the
<script type="text/javascript" src="js/admin.js"></script>
into the loaded pages but when you flick back and forth between the pages I notice that RAM usage starts to go up and up, so I don't think this is the best way of doing it.
Any ideas how the loaded page can function with the already-loaded javascript from the index page?
Thanks!
bind your events like this :
$(document).on({
"event" : function(e) {},
...
}, "selector");
If you are using bind or click type events change to using something like on (or live or delegate if you are required to use jquery version less than 1.9)
OR/AND
In your function that loads in the page via ajax provide a call back that initiates only what is needed. Example:
$('#myDiv').load('ajax/page.php', function(){
$('#myDiv a').customPlugin('whatever');
$('#myDiv button').bind('click', function(){
window.open('http://www.google.com/', 'some-window');
});
});
I have created a menu which is simply a series of DIVs and am using the following code
$(".menu_item").click(function(){
window.location = $(this).attr("data-href");
return false;
});
to make the entire DIV for each item clickable. I have a "container" DIV setup with content initially loaded via php-include, but want different content to load when a different menu item is clicked.
I know I can use JQuery.load to target the loading of an external file into a sepcific DIV but it looks that would mean coding separate instances of jquery for each link? I would also rather stick to using php includes if possible. Can I use jquery.load to load via php include?
Any help on how to achieve this would be appreciated.
Here's the rest of the code:
/* Menu Item */
<div class="menu_item" data-href="link1.html">
Link 1
</div>
/* Container to load link into */
<div id="myContentDiv"></div>
You can use the jQuery AJAX shorthand method load() which makes the ajax request and on completion populates the element with response
$(".menu_item").click(function(e){
var url= $(this).data('href')
$('#myContentDiv').load( url);
return false;/* edit to prevent browser following link*/
});
API Reference: http://api.jquery.com/load/
$(".menu_item").click(function(e){
e.preventDefault();
$.ajax({
url: $(this).attr("data-href"),
context: $('#div-to-replace-content')
}).done(function(data){
$(this).append(data);
});
});
Can I make an AJAX call immediately after loading a page? To be more specific, I have an ajax action on click of some html tag (say in page 1). Now when I come to the same page (page 1) from some other page (say page 2), (i.e.. on ready of the document) can I make that ajax call which is present in the onclick of that appropriate html tag? I am using PHP as server side script..
There were confusion on my question.. Let me explain more.
I have an phtml page where there are lot of ajax calls on click of various tags.
Lets say, tag1 has send-message functionality ajax call which on click loads a compose message part of html.
Similarly tag2 has photo display funcitonality ajax call which on click loads the photo display part of html.
Now I'm in page 2 which is a search result page Where I have a link for page 1. That link is send-message link. So now I have to come to page 2 and with compose message part html loaded. I want to load it via ajax which will be performed on clik of the send-message link (tag 1)in page 1. How to accomplish this? How will I inform to page 1 to load the compose message part of html through ajax?
you can call that function explain below
<script type="text/javascript">
function_name();
</script>
Im not sure what you want to achieve here but if you're asking if you could do AJAX on ready of the document, then i think you can..
Check this out in jquery
$(document).ready(function(e) {
$.ajax({
type:'POST',
url:g_site_path+'search/agentpopup',
dataType:'html',
data:data,
success:function(html){
$("#agentpopup").html(html);
}
})
}
$_SERVER['HTTP_REFERER']
Is the php data-feild that will tell from where the page request is coming (Ex. Page 2 has requested Page 1). Note that HTTP-Referer is by its very nature risky and can easily be spoofed. To test for document ready, you can use something like jQuery
$(document).ready(function() {
$.ajax('your_ajax_script.php', function(result) {
/* Do what ever you want to do of result*/
console.log(result);
});
});
I have 2 php pages named "personal_info" and "portfolio". I load them via php functions in codeigniter http://www.mysite.com/controller/personal_info and http://www.mysite.com/controller/portfolio.
I have a page with menu tabs linked to personal_info and portfolio and I want to load the pages via ajax when a tab is clicked. If js is turned off in the browser the tabs should just go to the url.
I am using the jquery .load() function to load the pages.
<script type="text/javascript">
$(document).ready(function(){
$('#personal_info').click(function() {
$('#result').load('personal_info #load'); //load fragments from #load div
});
$('#portfolio').click(function() {
$('#result').load('portfolio #load');
});
});
</script>
HTML
<div id="tab">General Info</div>
<div id="tab">Portfolio</div>
<div id="result"></div>
Issue: When I click on a tab it treats it as a link and goes to the URL instead of loading the page via jquery. How can I disable the link if javascript is on? Also, I noticed that javascript is not loaded from fragments in the pages, and if I put the javascript in the page I load data it doesn't pick it up.
What is a good solution for this?
EDIT:
For loading js, I just wrapped the entire page in the result div and am loading the other pages with the js and header, footer.
For the first issue: put return false; at the end of each 'click' function:
$('#personal_info').click(function() {
$('#result').load('personal_info');
return false;
});
Edit: For the second issue, maybe pull out any jquery/javascript and run it from a central application.js file?
You need to prevent the default action of the <a/> element. You can accomplish this by using event.preventDefault()
$('#personal_info').click(function(e) {
$('#result').load('personal_info');
e.preventDefault();
});
$('#portfolio').click(function(e) {
$('#result').load('portfolio');
e.preventDefault();
});
To stop the default action from occurring (following the link) you need to use return false at the end of your jQuery click() functions.
With regard to your second issue ("javascript is not loaded from the [dynamically loaded] pages"), ensure that you are using jQuery's .live functionality to attach handlers.
I'm using jQuery to dynamically load php pages into my page using the .load() function, so far this has been successful but if you click on various links to update the div with the .load() it starts to flicker between the new clicked page and the old one, this is pretty annoying and has anyone got a fix?
Current code:
$(document).ready(function(){
$('a').click(function() {
$('#content').load($(this).attr("href"));
return false;
});
});
The flickering is possibly caused because the dimensions of the #content div vary between loads, try to slideTogle it before loading or use another transition between loads
example :
$(document).ready(function(){
$('a').click(function() {
$('#content').slideUp('slow',function(){
$('#content').load($(this).attr("href"),function(data){
$('#content').slideDown('slow');
});
})
return false;
});
});
I hope it is ok to question the premise. You're making all links use ajax to replace #content's contents? Doesn't that break the browser's forward/back button behavior? If so, I personally would not like to use such a site.