Get complete page not only Ajax response fragment

Question

I am developing a web app using Javascript client side with Jquery Library and PHP server side. I made extensive use of AJAX and I'm not using any href attribute on link elements. Only the home page is loaded from zero. The others are requested by AJAX calls and the AJAX responses are put into the home page, for example using the Jquery .html() function, to display new pages.

The problem is when I run http://sani.com/index.php, I get the home page. If I click on search button, I get the http://sani.com/search page. But if I run http://sani.com/search on the address bar, I get only the AJAX response so the content to put inside the homepage and not the whole http://sani.com/search page.

How can I get the complete http://sani.com/search page when I run this url on the address bar? What am I doing wrong?

Answer 1

Keep it simple. Just add another route that will return search html. For example:

/search - will return your whole rendered search page. /getSearchHtml - will return your only html snippet you need.

It will help you to avoid confusion in your routes.

Answer 2

Just break your index page into three pages

• header.php
• content.php
• footer.php

and include them on index page

<?php
include_once 'header.php';
include_once 'content.php';
include_once 'footer.php';
?>

and do same on search page and put header and footer page in condition

<?php
if(empty($_GET['htmlOnly'])) include_once 'header.php';
include_once 'content.php';
if(empty($_GET['htmlOnly'])) include_once 'footer.php';
?>

now your ajax URL will be httt://abc.com/search?htmlOnly=1 and it will only load content part

and without "htmlOnly=1" httt://abc.com/search will load the whole HTML page.

Answer 3

You can use a common layout using some framework with

1. Header
2. Body
3. Footer

The content in the body may change and header, footer will be common. If you click on search button the ajax code is loaded in 'body' part , if you open '/search' page separately also it will load with the common header and footer.

You have to give separate names for search page and the ajax file, as the ajax code is only a part of '/search' page, if you want to access it separately you need to use common layout which will be the combination of whole page.