I'm implementing Prototype Framework in my website to display multiple pages without refreshing. My question is since this requires Javascript to send html elements to the back end, how would I go about disabling the Javascript along with the corresponding PHP to send the html elements back to the front end if the user has Javascript disabled?
What I have is a menu with 4 classes, Services, About, Resources, Contact linked to different pages(services.html, about.html etc..). I need to know how I can disable the PHP/Javascript associated with the Prototype Framework and have the pages react normally with the menu as if they were simply hyperlinked to eachother with a href tags.
Loads of thanks to anyone who can help, its whats holding me back from using this.
Related
I need to develop mobile app with jQuery Mobile which will be packed with PhoneGap Build and distributed on Google Play. I need to have dynamic listviews which depending on which item is clicked will open new dynamically generated page which got information from MySql database.
Current setup is I generate listview with urls with different variables attached (category.html?cat=1, category.html?cat=2, ...) when I click on item the pageinit event is triggered for category.html and I parse (with JS) the url variable (cat=2) and I send query to my PHP page (which in turn query MySql) through $.get method and I insert the returned value (which is listview echoed back by PHP page) with $('div.ui-content').append(data).trigger('create'). This way sometimes works, sometimes doesn't(the page stays blank) or you must refresh the whole page etc. ...
Is it better to generate whole html for page in PHP and dynamically transition to new page with changePage() method? Or is any other method better?
Thanks :)
best way is to use 3 components,
server side framework: Slim is the easiest for this, nice simple routing, easy to implement, you can also do symphony, rails, etc
middleman: handlebars is great for inserting incoming data into html, try it for sure. angular is good as well, more complicated though. also with handlebars, you can have a different template file for every different page, very easy to maintain.
front end: jquery mobile is the most compprehensive i believe, ajax requests are piece of cake, and in the requests you can call your handlebars templates and insert stuff on the fly.
PS: you are still doing all this with "one" html page, but handlebars is helping you insert sub pages on the fly, jquery mobile helps you change the pages
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.
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).
I need to include the content, scripts, forms and dynamic abilities of one page in another onClick.
Take a look at http://www.divethegap.com/scuba-diving-programmes-dive-the-gap/dahab-master-scuba-diver.html
Then follow one of the links that says 'Beginner' 'Open Water Diver' etc....
You will find a PHP page with a series of options. It is an adaption of the wordpress blog system to produce only specific options for specific programmes by considering each type of each diving programme a category and then displaying only results from that category.
You will see that each option is also a collapsible panel and there are also several javascripts that calculate durations, quantities and prices. There is also a validating webform at the end.
Now go back to the first page. What I would like to do is include all the content from the second page after the main header inside tabbed panels on the first page so that the customers can immidietly see everything that is included. Essentially the options on the first page would become a series of tabs.
The only way I can see to do this is with an iFrame as each option would need a unique URL ending (that is .php?cat=26 or .php?cat=27). THe problem is that the collapsible panels will not work with an iFrame as the iFrame will not resize when the panels open. There were also some calculation problems, but I think that was more down to me staring at the screen for the last 3 hours not remembering to include everything.
I have tried it with resizing iframe SSI scripts and have got nowhere.
I tried actually embedding it in the page better with a ajax script, but that left behind all the scripts that make it work. I checked with full URL's on everything and it would not take work with any scripts.
I know that you could just make the whole page reload but then the user would be at the top of the page again, and even if another script was applied to slowly bring them down again it would not be anything near as easy to use as if it was like tabbed panels.
Any ideas.
Kind Regards,
Definitely no need for iframes. AJAX will do the trick here.
Here's a link with a demo + code:
http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm
I am hoping for some advice, imagine if you will will you are on a website and you are greeted solely with navigation menu, on click the navigation menu that is situated within the left hand side of the screen you can add various content to the right side of the screen that is loaded in individual ‘divs’ then collapsed in accordions(this effectively makes a one page site(Yes I am aware of poor SEO, Accesibility and Usability). Now this raises some questions from me.
1) What would be the best way to load in the data for each of these ‘modules’ as they are clicked. How would I load the codeigniter views in with leaving the index page?
2)The user can also remove ‘modules’ how could this be achieved without leaving the page?
3)If there are 3 pages that are loaded in from 3 different views all in an accordion how can i make it so only one accordion can be open?
4)If the ‘module’ has further links within it, it should load in another view to left of it, how could I control this?
I know I am asking alot of advice but I have never seen anything on the web that is like this and would really appreciate some feedback on the best way to approach this.
This really is a question on jQuery, and jQuery's Ajax methods. You're not asking about anything too difficult here. Just a menu that makes asynchronous calls to the server for content, and loads the respose HTML into a particular DIV.
$("a.homePage").click(function(){
showLoadingAnimation(); // Indicate ajax-loading
$("div.Container").load("/home", {}, function(){
hideLoadingAnimation(); // Hide indicator after content is loaded
});
});
This would load in your home view. Just be sure that it doesn't bring a template along with it. Once you get started on the actual development, return here to ask more specific questions to get quicker and more thorough responses.