I want to load content from a div with ID maininner from a URL on my own site http://www.salcombeyurts.com/stage/yurt1.html into a div with id yurt1_avail on another url http://www.salcombeyurts.com/stage/availability.html on the same site.
I have tried a test outside the CMS and it works. I am using this JQuery:
<div id="yurt1_avail"></div>
<script type="text/javascript">
$(document).ready(function() {
$('#yurt1_avail').load('yurt1.html #maininner');
});
</script>
Is it possible to do this when using CMS/MySQL and .htaccess rewrites for SEF URLs? Is this only possible on static content html pages?.
If this method wont work, what alternatives do I have? I need to load the content of an availability table on one page onto a summary page that will display 3 different availability tables. I am using Joomla and the availability component I have chosen can only be directly linked to, it has no module option or short-code for embedding into articles or modules.
Maybe iFrames could be used, but how would I CSS then to hide all the rest of the page content? I only need the content from #maininner.
Or is there anything in the HTML5/CSS3 markup that will help me?
The AJAX call is an http request so it will work even if you have URL rewriting.
CASE 1 - If you need the content to be uploaded in the main div (the part of the layout where the content is usually shown) then you will have to completely disable your editor (by default is tinyMCE).
Don't try to just edit the HTML source code by clicking the "HTML" button, it won't work because javascript code is cleaned up by TinyMCE.
CASE 2 - If the content of the AJAX request is to be uploaded somewhere else, e.g. in the sidebar, the you'll have to use a Joomla Module, maybe a code-friendly module such as one of these: http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules
Related
So I'm trying to build an informational page on my website that is fairly expansive, enough so that it has it's own Nav and Sub-nav.
The nav is currently built and now I need to introduce and link the content to appear the way that I want it to, but that's where I'm beginning to get lost in how I should structure it efficiently. I'll try to give as detailed a run-down of the structure it lives is as possible.
First of all, all of this must happen on one page of the site. The links in the navigation should trigger different content, but in interacting with this Nav one should never leave the page (I suppose reloading it is okay, but not preferable).
The page is loaded from a "template.php" that basically just has different div's that contain a function $definepage to load their content.
Something like:
<div class="middleArea" id="infoPage">
<div id="Nav" class="content">
<?php require($definepage); ?>
</div>
<div class="returnNav"><img>backbutton</img></div>
</div>
I want to add a separate div in this template that will be for showing the user's desired content dynamically without leaving the page. So if "Item 6a" is chosen this div will be loaded with the item's corresponding content, then if "Item2b" is chosen the div instead is loaded with that item's content - with the previous content no longer there.
I have about eight Main Nav items and six of them have multi-item subnavs. So there's a lot of content which is why I didn't want to have it all existing on the page and simply hidden and shown with the links for page load reasons.
But I need the links from the first div (in the template) to load the correct .php in the (to be) content area div, as well as stay "active" while the corresponding php is loaded to remain highlighted - show that that link's info is currently being shown.
Can this be accomplished through a href="#anchors"? Or can I somehow have the content area exist in the same div of the template, but still load from external php so all of it doesn't have to load with the page? (I figured php within php within php was a bad idea)
If you want to load some content without reloading the page, you may use AJAX.
You should use JavaScript to change the content of the page without reloading it/changing the URL, using AJAX calls as mentioned by #antoyo to transfer data between the server and client as needed.
Here's an example for an ajax request with jQuery:
http://jsfiddle.net/dj50uev5/1/
HTML:
<div id="placeholder">
</div>
<input type="button" value="Ajax Call Test" />
Javascript:
$('input').click(function() {
$.ajax({
url: "internalUrlOrFile.txt",
context: document.body
}).success(function(data) {
$('#placeholder').html( data );
});
});
I can't really provide a working sample where the content is added automatically due to cross domain origin policies.
Let me know if you need further clarification.
Possible Solution:
What if I use iframe to load a "separate site" as a separate directory in my site's root folder whose pages would contain the needed content. The links in the Nav would then be URLs pointing to the corresponding page in the "content site"?
Any glaring functionality issues here? On paper it looks like it would work.
*(Please disregard the previous idiom's ironic use for the web medium)
I got a .html Page with jQueryMobile. This page sends a database request to a .php script on my server. Then the script returns the result with html code and jQuery Mobile theme features like data-role="listview" included. But the JQM theme is not shown in my frontend. Only the "normal" html style of ul and li. Anyone of you know how to show the database results in jQuery theme? Thanks in advance!
When dynamically adding new jQuery Mobile its content markup can only be enhanced manually through use of a proper enhancement functions. Every widget has an unique function.
This should do it:
$('#listviewID').listview('refresh');
In case this error is thrown:
cannot call methods on listview prior to initialization
use this:
$('#listviewID').listview().listview('refresh');
There's also another solution. Instead of enhancing single component you can enhance whole content DIV, do it like this:
$('contentDivID').trigger('create');
or it can be done on a whole page like this:
$('pageDivID').trigger('pagecreate');
If you want to find more about this process (with working examples) take a look at this ARTICLE, to make it transparent it is a link to my blog post.
i have been building a jquery navigation based site without reloads ( using PHP and AJAX ) and have recently come across the problem of page "back", "forward", and "reload" features as well as SEO friendliness.
--skip this section to get straight to question--
my site is currently (not using AJAX but ) loading a single index.php which has several "content" divs, one of which is visible (class="active") while the others are not displayed. When the user clicks a navigation link, a nice animation switches between content divs.
I have apache rewrites to map things like
http://mysite.com/about
to
http://mysite.com/index.php?page=about
where the "about" section would be the one thats displayed by default (while the other "content" divs are hidden). based on this parameter, i include the proper meta tags for the pages. my sitemap has mysite.com/about, mysite.com/blog so that they get indexed as nice separate pages.
However, I've recently decided to make this ajax-based since i plan to incorporate a lot more content and its stupid to load all content on one page.
Note: I'm also now implementing Smarty templates.
I decided to implement hash tags, but saw the inherent SEO problems, then i discovered hashbangs (wth?!) and then found the new HTML5 stuff with history.pushState() and History.js and have decided to use it.
so here comes the main question
if i have just one page which loads page templates in a content div with ajax, using history.pushState() to modify URL and using mod_rewrite and a PHP back-end that can serve a default content template in the case of a direct request like "mysite.com/about" (mysite.com/index.php?page=about) (for basic useabilty and SEO), i cannot also set meta content for direct requests unless i have two templates - a content template - and a meta template? is there another way around this?
are tags like <title> and <meta name="description"> important enough to warrant having a template especially for them?
in summary, i want my nice mod_rewrite URLS to pull up on google with the correct title and meta description for a particular ajax-loaded page content template.
EDIT
i'm going for pretty much the same thing they have going on here at hypem.com. they have an event listener which changes the <title> tag when new content is listed. they also serve the correct <meta name="description"> tag, but only if it is a direct request to one of the main pages, like blogs - other pages, like http://hypem.com/blog/indie+today/10332, return the meta tag for the main blog page, and only when directly requested
I would first build the site to work with all direct links and no ajax, and then add the ajax. However, only include the code that adds the ajax/history functionality if the page is being requested by a browser. If a web crawler hits your site, don't include the ajax/history functionality.
Here's the situation.
I have a site where clicking hyperlinks within a certain div makes a jQuery function get the content of a div from a separate page. Because of this, the URL don't change. I need it to change as well as writing an entry in history.
My pages are setup like this (not sure this is the smartest way of going though)
access.php (main logon)
new-user.php
forgot-pass.php
index.php
controlpanel.php
etcetc. Now, all of these pages are reachable on their own and are mainly identical and all contain a div called "container". When clicking links, the content from this div gets erased and the content from the coresponding div (container) gets loaded from the file of the URL (href). I'm terrible at explaining..
So basically, what I need is some javascript that picks up the href link address and just pastes it in the url bar at the same time as it creates an entry in history so the back and forth buttons work.
I plan on extending this in a while as well, translating query strings as well. But there are a few constant static pages I need to take care of first. Any help would be very appreciated! :)
You are not allowed to change the entire URL by JavaScript but you can use URL hashes. I recommend you the browser history plug-in. You can simply register a handler to react on URL changes and load your corresponding content via ajax.
Have you looked at the jquery address plugin? Look at the examples. Is this similar to what you want?
It's not possible with "normal urls" (we must wait for a new generation of browsers...)
But there is a "trick": playing with anchors.
A link like "same_page.php#anchor" does not reload the page, but act on both the history and the adress bar.
So, if instead of having url like "page.php?param=lorem", you could have "page.php#param=lorem", you have your solution :)
Basically I want to replicate the page changing effect found here, at http://timvandamme.com/
But instead of using #values I want to use PHP includes, mainly because I want the site to be as uber-seo-friendly as possible... but still have this nice effect.
So is there a way of doing this? I have a main index file which includes other php files in the centre using the usual 'GET' method, so my pages look like: "index.php?page=about"
In my jQuery code I want to have a declaration where if I click the navigation, the content scrolls up, then once the relevant PHP file has loaded, have the content scroll back down and show the new page content (whilst also of navigated to the new page in the address bar, so if the user clicks the back button in their browser, they return to the previous page).
I know how to code the scrolling bits, it's just literally the ajax loading includes / page navigation parts I'm struggling to work out :\
Any help would be MUCH appreciated! Thanks in advance.
Use standard links in your navigation. In your onClick function, use event.preventDefault() to prevent the pages from redirecting your actual users (but they still appear as normal links to search engines).
Foo
<script>$("a").click(function(event){
event.preventDefault();
navigate($(this).attr('href'));
});</script>
Use the onClick function of the links to change the page's content with AJAX (just like it appears on the site you linked), but additionally set up each "page" (using error documents, mod_rewrite or something) to display its content, but allow navigation in this same way. By doing so, you will have the same functionality with the search-friendliness you desire.
To add to the others, some search engines understand this problem and offer site map utilities. You can check out google's site map solutions here:
http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=156184
The site map will allow you to explicitly inform google about certain uri's (like http://timvandamme.com/#about).