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.
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);
});
});
Here is my current setup.
I have two pages running on the jquery mobile framework.
index.php
article.php
In bother headers I have a js file called ratings.
here is my js ratings.js:
$(document).ready(function(){
$("#rating_1").click(function () {
$("#rating_2").css('backgroundPosition', '0px 0px');
$(this).css('backgroundPosition', '-45px 0px');
});
});
When I load index.php and then go to article.php none of my triggers to ratings.js work.
If I add rel="external" or data-ajax="false" my triggers work.
However then I lose the ability to have my loader wheel come up.
Any suggestions?
Thanks!
Important: Use $(document).bind('pageinit'), not
$(document).ready()
The first thing you learn in jQuery is to call code inside the
$(document).ready() function so everything will execute as soon as
the DOM is loaded. However, in jQuery Mobile, Ajax is used to load the
contents of each page into the DOM as you navigate, and the DOM ready
handler only executes for the first page. To execute code whenever a
new page is loaded and created, you can bind to the pageinit event.
This event is explained in detail at the bottom of this page.
http://jquerymobile.com/demos/1.1.0/docs/api/events.html
Try:
$(document).bind('pageinit', function() {
$("#rating_1").click(function() {
$("#rating_2").css('backgroundPosition', '0px 0px');
$(this).css('backgroundPosition', '-45px 0px');
});
});
You should put everything inside:
<div id="page" data-role="page">
<!--here-->
</div>
Script in the <head></head> section will not be loaded while ajax loading.
The problem is that jQuery loads pages via Ajax and therefore, it only loads the
<div data-role="page"> </div>
parts of the page.
You can do 3 things to solve this kind of an issue.
1.) The one which you have already tried ( which is to make a data-ajax=false ) which makes your page load completely again and not showing your loader wheel.
2.) You can make the event a live event:
$("#rating_1").live('click', function () {
$("#rating_2").css('backgroundPosition', '0px 0px');
$(this).css('backgroundPosition', '-45px 0px');
});
This will make it look for any new #rating_1 and will add the click event to it.'
3.) Instead of using $(document).ready you can use $( '#myPage' ).live( 'pageinit',function(event){}; function.
I have a main (index) page which loads pages dynamically and places them inside it's div but the Javascript within those pages doesn't execute. Specifically this part
<script type="text/javascript">
$(document).ready(function(){
$('#regForm').submit(function(e) {
register();
e.preventDefault();
});
});
</script>
You will have to use getScript like this:
$('#foo').load('bar.html', function(){
$.getScript("js/fileName.js");
// call a function from fileName.js
});
You will have to put your JS code in that file and call that via getScript and then you can call functions from it as shown above.
Write your javascript in the index.php or write at the bottom of loaded page without document.ready
This is in reality a cross-browser issue: When <div>s are dynamically filled with HTML containing <script> tags, these scripts may or may not run - and this behaviour is different not only between browsers, but also between browser versions.
The only workaround I know of is to extract your JS, send it seperately and execute it after the <div> content has been set.
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.