2

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?

Chris Watts
  • 6,197
  • 7
  • 49
  • 98
Ricla
  • 105
  • 1
  • 9
  • So by default you are only returning snippets of HTML unless the frontpage is requested? You should be able to detect on the server side (in the .php code) if the request was made using AJAX. If so, return a snippet of HTML, otherwise return the whole page. – HaukurHaf Dec 19 '16 at 11:12
  • @HaukurHaf It could be a good solution but how can I check if is an ajax request without having spoofing problems? Is that the only solution? Or am I missing something? – Ricla Dec 19 '16 at 11:28
  • I will write a full method for you if you can first show me how you handle links either with code or textually. – Chris Watts Dec 19 '16 at 12:59

3 Answers3

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.

Sajan Sharma
  • 109
  • 5
  • Probably no need for `include_once` here, so considering it has a performance impact it should be replaced with just `include`. – Chris Watts Dec 19 '16 at 11:58
  • In this case if I refresh the httt://abc.com/search?htmlOnly=1 page, I get only the AJAX response from the server so I have the same problem. – Ricla Dec 19 '16 at 12:06
  • Moreover, if I load more than 1 content in the same page, it become hard to handle. – Ricla Dec 19 '16 at 12:09
  • @Ricla Have your AJAX call add the GET parameters. The link on the page only needs to contain /search – Chris Watts Dec 19 '16 at 12:09
  • @CJxD Yes, AJAX call add GET parameters. In my html there is no href attribute – Ricla Dec 19 '16 at 13:05
  • if you don't want "htmlOnly=1" in URL then you can send this in POST method and check it with $_POST['htmlOnly'] and you will get the whole page HTML even open "httt://abc.com/search?htmlOnly=1" in browser – Sajan Sharma Dec 19 '16 at 13:53
  • @SajanSharma The exposed problem is not only for the http://sani.com/search page. So I'm searching a general solution. I have a lot of links that make a get request, I can't make every request with POST method. There is an other solution? – Ricla Dec 19 '16 at 14:15
0

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.

Dmitry Divin
  • 11
  • 5
  • But if I click on the refresh browser button when I am on the /getSearchHtml page, I have the same problem. – Ricla Dec 19 '16 at 11:43
  • @Ricla: the point is if the user needs the search page, they go to /search. If the AJAX needs the search page, it uses /getSearchHtml or maybe /get/search might be a better idea. Problem is this isn't a very scalable solution - the issue will be there for every page, not just search. – Chris Watts Dec 19 '16 at 12:07
  • @CJxD Yes, it's not a scalable solution. Moreover, If the user refresh the page after the AJAX request (in this case, the url is /getSearchHtml ), I get only the AJAX response. Instead I should get the whole page. – Ricla Dec 19 '16 at 12:14
0

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.

Lalit srikar
  • 82
  • 8
  • My HomePage is already splitted into Header, Body and Footer. Body contains other divs. An AJAX response can replace one of these divs or the body. – Ricla Dec 19 '16 at 13:38