Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>For the demo linked in your question, achieving that functionality is actually really simple - as it doesn't use any AJAX at all (when you start to add AJAX to the mix, it get's more difficult - explained later). To achieve that functionality you would; upgrade your links to use hashes, then bind into the hashchange event. Unfortunately the hashchange event is not cross-browser compatible, though luckily there are many "history/remote plugins" available - our preferred one over the years has proven to be <strong><a href="http://www.balupton.com/projects/jquery-history" rel="noreferrer">jQuery History</a></strong>, it's open-source, got great support and is actively developed :-).</p> <p>Although, when it comes to adding AJAX functionality to the mix like such sites as Facebook, <a href="http://wbhomes.com.au" rel="noreferrer">WBHomes</a> and <a href="http://www.balupton.com" rel="noreferrer">Balupton.com</a> then you will start to face a whole series of seriously difficult problems! (I know as I was the lead architect for the last two sites!). Some of these problems are:</p> <ul> <li>How to gracefully and easily upgrade certain internal links to use the History and AJAX functionality, and detect when the hash has changed? while keeping other links working just like before.</li> <li>How to redirect from "www.yoursite.com/myapp/a/b/c" to "www.yoursite.com/myapp/#/a/b/c"? and still keep the experience smooth for the user such that the 3 necessary redirects are as smooth as possible.</li> <li>How to submit form values and data using AJAX and update the hash? and vice versa if they don't support Javascript.</li> <li>How to detect which particular area of the page the AJAX request is wanting? Such that subpages are displayed with the correct page.</li> <li>How to change the page title when the AJAX state changes? and other non-page content.</li> <li>How to perform nice intro/outro effects while the AJAX state loads and changes? such that the user isn't left in the dark.</li> <li>How to update the sidebar login info when we login via AJAX? As obviously we don't want that login button up the top left to be there anymore.</li> <li>How to still support the website for users that do not have JS enabled? Such that it gracefully degrades and still is indexable by Search Engines.</li> </ul> <p>The only open-source and reliable project I know of which tries to solve all those extremely difficult problems mentioned has proven to be <strong><a href="http://www.balupton.com/projects/jquery-ajaxy" rel="noreferrer">jQuery Ajaxy</a></strong>. It's effectively an extension to the jQuery History project mentioned before, providing a nice elegant high level interface to add AJAX functionality to the mix to take care of those difficult problems behind the scenes so we don't have to worry about them. It's also the chosen solution used in the last few commercial sites mentioned earlier.</p> <p>Good luck, and if you have any further questions then just post a comment on this answer and I'll get to it asap :-)</p> <p><strong>Update: There is now the HTML5 History API (pushState, popState) which deprecates the HTML4 <code>hashchange</code> functionality. <a href="https://github.com/balupton/history.js" rel="noreferrer">History.js</a> is now the sucessor to jQuery History and provides cross-browser compatibility for the HTML5 History API and an <a href="https://github.com/balupton/history.js/wiki/Intelligent-State-Handling" rel="noreferrer">optional</a> <code>hashchange</code> fallback for HTML4 browsers. jQuery Ajaxy will be upgraded for History.js</strong></p>
    singulars
    1. This table or related slice is empty.
    1. POHow to show Ajax requests in URL?
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USbalupton
    1. USbalupton
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POHow to show Ajax requests in URL?
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COHey! Thanks very much for your answer, I know that my demo isn't made with AJAX, however I will use AJAX to make my own, but that demo demonstrates the effect what I want to achieve, your example: `http://wbhomes.com.au/#/home` is extremely cool, this is 100% how I wanted, without `?` and such things, but for me any version is good what works, however if you could show me how did you made that, I would be very very happy :). And I know that it's extremely difficult because no one posted(I didn't find) anything about it, and I don't really know how to make it, I'm not a pro in javascript.
      singulars
      1. PO
      1. USAdam
    2. COThanks mate and I'm glad I've helped. Yeah I completely agree the wbhomes site is extremely cool! I've revised my post to go into the solution used for it (jQuery Ajaxy), so that should clear up anything left unsaid :-) If you want to know anything more then definitely feel free to post a comment, or you can always contact me directly on my website at www.balupton.com
      singulars
      1. PO
      1. USbalupton
    3. COHi @balupton ! Ajaxy is nice and cool but I think there is a huge problem with it. I can't specify where I want to put the `content`. So for example I have `link1 - onclick calls page1.php` and `link2 - onclick calls page2.php` but I want `link1` to change `div content1` and `link2` to change `div content2`, I hope you understand what I'm talking about :) I think with this feature would be almost perfect ;)
      singulars
      1. PO
      1. USAdam
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload