I'm not brilliant with AJAX but could somebody please write me a quick code for switching a DIV tag with an external page.
For example:
<script type="text/javascript">
// Fun Stuff Here //
</script>
<div id="random">HIDDEN</div>
It would be AWESOME if the content could fade-in when it's loaded.
Ok, I have this so far (but it doesn't seem to be working):
<ul>
<li>ss3</li>
<li>ss4</li>
</ul>
<script type="text/javascript">
$(function(){
$("a.load").click(function (e) {
e.preventDefault();
$("#folioWrap").load($(this).attr("href"));
});
});
</script>
<div id="folioWrap"></div>
You may want to try this JavaScript AJAX loader jQuery plugin that can load page elements content via AJAX and it alters all the links in such way that when you click on the links of the AJAX loaded content, the new page element content is also loaded via AJAX.
I suppose you can hack it to add any fade transition effects when the new page element is loaded.
Related
I've tried several options to try and load the content from a div on one page with id="container" into a div on a different html page id="landing".
I used the answer here and also lots of variations of it
Load content of a div on another page
I've run a test and Jquery is being loaded.
The test files are here http://www.salcombeyurts.co.uk/test/landing.html
My code looks like this:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
This will eventually end up on a PHP page. Part of a Joomla site.
You run the script before the #landing div is defined.
Run your code after the DOM ready event
$(function(){
$('#landing').load('source.html #container');
});
It seems like the suggestion you got was to do an AJAX request and load the entire page into the #container div on the current page, which is not a bad idea. What you seem to be trying to do, on the other hand, is load the page and then get the content of a div inside that page and put it in a container div on the current page, which is overly complicated and a bad solution to what ever the problem is.
Here is my solution none the less
$(function() {
$.get('page with the div you want', function(data) {
var content = $(data); //turn the page into a jquery object
var div = content.find('#div'); // this is the div you want the content from
$('#container').html(div.html()); // this will set the content of the current div
});
});
I would move your script to the bottom of the page and replace it like so.
Original:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
New:
<script type="text/javascript">
$(document).ready(function() {
$('#landing').load('source.html #container');
});
</script>
Note the space removal between source.html and #container.
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 want to be able to click on a link lower down my PHP page, it send a variable and outputs the result in a <div> tag at the top half of the page.
I've linked to latest jquery, and so far I have this in my <head>:
<script type="text/javascript">
$().ready(function() {
$("#result").load("crimes_result.php");
});
</script>
And in my <body>:
<div id="result"></div>
What I need though, is that the div to be shown and depending on the result of a variable sent by a link the user clicks lower down the page.
like crimes_result.php?id=4334 or crimes_result.php?id=54543
How can I finish my script so it does that?
NOTE: I'm useless in ajax/jquery/javascript
If I understand correctly, simply call .load() from a click event and pass it the href of the link:
HTML:
<a class="loadlink" href="crimes_result.php?id=4334">Click Me<a>
JS:
$(".loadlink").click( function(event) {
event.preventDefault();
$("#result").load($(this).attr("href"));
});
Example: http://jsfiddle.net/jtbowden/ueucL/1/
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.
when I click on "Click Here" then a page must open inside
<script....>
$('yahoo').html('<a href=desc.php>');
</script>
<div id='yahoo'></div>
<div id='clickhere'>Click here</div>
Thanks
Dave
I think you're looking for AJAX to fetch the page for you. Something like this might work:
<script type="text/javascript">
$(function() {
$('#clickhere').click(function() {
$('#yahoo').load('desc.php');
});
});
</script>
<div id='yahoo'></div>
<div id='clickhere'>Click here</div>
First you need to wrap the script inside $(function() { ... }) to execute your code on page load. This is equivalent to $(document).ready(function() { ... }).
Next you have to bind a click event to the #clickhere element so you can actually do something when the user clicks on it.
When the user clicks on the #clickhere div, load() will fetch the contents of the given url inside the element you call it from. So, this snippet means that when the #clickhere div is clicked, desc.php is loaded inside #yahoo div.
ID selector is #ID, not just ID
Use jQuery AJAX load method to load desc.php page
You should execute your jQuery code after DOMContentLoaded event
Wrap your code in $(document).ready(function() { });, which will insure that the code executes after the DOM is available to your code. Otherwise, $('yahoo') will likely return no matched elements.
Why not try target_self ? I also fixed some code
<script....>
$('yahoo').html('<a href=desc.php target='>self'>Click here</a>');
</script>
<div id='yahoo'></div>
<div id='clickhere'>Click here</div>