Is there a way to do this?
page1.php
--has
<div id="main">
<div id="content">hello</div>
</div>
index.php
--has
<div id="main">
</div>
Can I somehow grab the data from page1.php inside of the content div and load it into the main div in my index.php?
I have done this with the code provided at css-tricks url: http://css-tricks.com/examples/DynamicPage/
But this uses hash change events. I don't want to use the hash feature, just the load content feature, but I can't seem to isolate the code for that because I think it's built into the bbq hashchange plugin.
Is there an Ajax way of doing it?
Something like
$(selector).find('#main').load('#content');
Just put a filtering selector after the URL in .load's first argument:
$(document).ready(function() {
$("#main").load('page1.php #content');
});
That will inject the #main div in the current page with the contents of #content from page1.php.
Related
I want to hide the div till page load the i want show that div after the page is completely loaded, for that in my phtml file i tried this.
<div id='pilot' style="display : none">
<div class="trustpilot-widget" data-locale="en-US" data-template-id="5406e6b0d049e042d5f" data- businessunit-id="54c2a000ff00057c" data-style-height="28px" data-style-width="100%" data-theme="light">
Trustpilot
</div>
</div>
<script>
$(document).ready(function() {
$("#pilot").show();
});
</script>
But its not working, any help can be appreciated.
If your jQuery library is loaded in to the DOM and you can't see any errors on the console, then this code should work for 100% sure.
If this is your content all on the page, that will be rendered during milliseconds, so your jQuery code will be executed in no time. Make delayed showing the DIV, and in that case will seem like loaded after the page rendered.
I've got problem with jquery
page1.html
<div id="gold">gold value</div>
<!-- NAVIGATE -->
Go to page 2
page2.html
<div id="gold">gold value</div>
<!-- NAVIGATE -->
Go to page 1
main.js
$(document).on('pagebeforeshow', function () {
$('#gold').html(100);
});
This code working for page1.
When I navigate from page1 to page2 on page2 is string "gold value".
Its only working when I change main.js and page2.html like this:
$(document).on('pagebeforeshow', function () {
$('#gold').html(100);
$('#gold2').html(100);
});
and
when I change in page2.html
div id="gold2"
Due to the page loading method of jQuery Mobile, you may have many pages in the DOM at a certain time.
jQuery Mobile uses div elements with attribute data-role="page" to represent pages. First, make sure that your pages have a unique id, it does not matter if you separate your pages in many HTML files.
Now you can access your duplicate ID element specifying the current active page:
$(document).pagecontainer("getActivePage").find("#gold");
But I really recommend avoiding duplicate IDs, even in different pages. Use a class instead:
<div class="gold">gold value</div>
and
$(".gold").html(100);
This is the first page where I try to open the detail.html;
<a href="detail.html" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
I have problems to load the scripts on detail.html (after href link is clicked on first page)
Here is my script in header of details.html(the page I go after href is clicked on first page), Problem is I can NOT get the console test print, that function is NOT called when details.html page is loaded. It only hits after I manually refresh the page
<script>
$(document).bind("pageinit", function(){//or $(document).ready(function ()
console.log('test');
});
</script>
To understand your problem I think you need to first understand how jQuery Mobile "loads" external pages. By default when you click a link to a separate HTML page JQM loads the first data-role="page" on that page and attaches it to the DOM of the first page, the thing is JQM only loads that page div and not any scripts etc. that are outside that container.
If you want to run code for a second page, you either need to include that script on your first page and use event delegation (since the second page is not part of the DOM yet) or include the script withing the second page's date-role="page" wrapper.
Case in point in your case if you want to run code for your details page you either need to include the script on your first page for example assuming you have a div on your detail.html page like the following
<div id="details" data-role="page"> ..rest of your content
</div>
Then on your first page you could do the following
$(document).on('pageinit', '#details', function() {
console.log('test');
});
Or alternatively you can include a script tag withing your "details" page wrapper.
EDIT:
As I mentioned this is the default behavior, however if you wish you can tell jQuery Mobile to do a full post when loading a second page by adding in data-ajax="false" or rel="external" to your link for example
<a href="detail.html" data-ajax="false" data-role="none" role="link">
<div class="place">name</div>
<div class="arrow"></div>
<div class="ammount">-€4,<span class="fontsize14">25</span></div>
</a>
The difference between data-rel="external" and data-ajax="false" is if the second page is basically semantic in that data-rel="external" should be used if the second page is on a different domain.
I made you an working example: http://jsfiddle.net/Gajotres/Eqzd2/
$("#second").live('pagebeforeshow', function () {
console.log('This will only execute on second page!');
});
You can use on instead of live if you are using last version of jQuery.
Also take a look at my article about event flow in jQM page transition: https://stackoverflow.com/a/14010308/1848600
I am creating a jquery mobile web app which contains 3 pages, my header/nav for these pages doesnt change but in all the examples Ive seen the header and footer is added to each page. Is it possible just to add 1 nav and 1 footer then just switch the pages main content in and out like this structure:
<div id="header" data-role="header"></div>
<div id="page1" data-role="page">content</div>
<div id="page2" data-role="page">content</div>
<div id="page3" data-role="page">content</div>
<div id="footer" data-role="footer"></div>
Basically is there a way of just showing/hiding the main content and doing nothing with the header and footer?
Any advice on this would be great
Kyle
No, unfortunately JQM doesn't support this (yet), you'll need to add your role=header and role=footer on EVERY role=page you got (all 3 of them).
See documentation
I would stick to $.mobile.changePage() since that takes care of hashing and a lot of other events and not just use JQuery to .load() new content...
Hope this helps
Have a look at the load() method in jQuery -> http://api.jquery.com/load/
Here is an exmaple :
$('#navigation').click(function() {
$('#page1').load('page1.html');
});
This means that when something with an id of navigation is clicked it will call the load() function and replace the div with id of page1 with the contents of the loaded file.
you can use .load() in jQuery
for example in every page you will have this:
<div data-role="footer" class="ui-footer"></div>
now build this function:
function goTo(pageURL, transitionType) {
$.mobile.changePage(pageURL, transitionType);
$('.ui-footer').load('assets/includes/footer.html');
}
now when you move between pages, try onclick (or from code if you like) call:
goTo('home.html','slideup');
that would do the trick (this is what I use)
you can do the same for the headers as well.
keep in mind if the header or footer content changes for each version of the app (such as localization) you have to call this first, then fill in the localization text or anything else.
I hope this helps for your purpose
I'm trying to create a website with tabbed browsing and have followed a tutorial to make this. But the problem is that the code I'm currently is using doesent work as expected.
HTML-code:
http://pastebin.com/CG146NS3
CSS-code: http://pastebin.com/4VCuAwJm
JavaScript: http://pastebin.com/sZhhQs6v
The tutorial I followed: http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/
The problem:
When I click one of the tabs the #content goes away with a slideUp and .load loads the content but it doesent place the content in #content.
You have some duplicate #ids.
Remember when you do:
var toLoad = $(this).attr('href')+' #content';
// other execution
function loadContent() {
$('#content').load(toLoad,function(){
$('#content').slideDown('normal');
});
you are actually loading a page fragment #content into #content in your page. So you end up with this:
<div id='content'>
<div id='content'>Random Data</div>
</div>
Okay, based on your comment..Just make sure that you actually have a DIv with ID #content in your random html files.