I am working on a site which has an animated background, the animation is powered by javascript and therefore when the user enters and submits a search it would be great if the animation were to continue smoothly whist the search was completed and results appended to the DOM.
I have managed to get to the point where the results of the search are returned to JS from an ajax request although inherently the url of the ajax request is different from the url currently displayed in browser.
So my goal is for the user to come onto the site at say, www.example.com/public/home/search
They type something into text input and press search, the url changes to something like
www.example.com/public/home/search?q=some+search+query or
www.example.com/public/home/search/somesearchquery or
www.example.com/public/home/search/#somesearchquery, etc.
but the page state remains the same, the results are appended to the DOM and no full reload occurs.
Returning to a url like the one above should load the page and send the query automatically, returning the page with the results already appended.
I don't know weather this is possible, with or without obeying the MVC pattern.
I am not using any mvc framework and would like to avoid it if I can but instead using a bare bones system similar to the one found at. https://www.youtube.com/watch?v=OsCTzGASImQ
Any ideas, suggestions, alternatives?
There are several answers here for "change URL without reload", for example: Modify the URL without reloading the page .
So, I think you just have to implement some solution from one of these answers and run some javascript that change the page.
You have to be careful, because the modified URL must to load the same version of the page the user is seeing after the changes caused by the javascript. Otherwise, if the user copy and paste the URL, he will not be happy.
One way to archive it is to create the javascript function that "updates" the page without reload it based on the text input (let's say, f). Then, if the user try to access directly the page
www.example.com/public/home/search?q=some+search+query
your server side code just return the page search with a call to this javascript function at the end, like that:
f("some search query")
so, this function will update the page and the final effect will be the same as the user just enter in the page and after tries to type some search query.
(Note that, this function f may be used in both cases: when users type the text to search and when users just paste the entirely URL).
Related
So I have this site that dynamically posts content using jquery and php. I would like to know how to generate permalinks. I think I could do it, but I dont even know what I should be searching for on google. You can see the site at www.eataustineat.com.
For example, I would like a link like eataustineat.com/claypit to that would go directly to the video review, instead of having to to search for it and then click the link.
I will describe the how the site works on a basic level:
first the user selects the "All Restaurants tab" in the content slider, then jquery slides to the third frame.
Next, a user selects a link from a list. This list is generated by sql queries in php, while javascript pushes the result of the php to a specific div.
When a user selects a link, jquery slides to the second slide. Once again, php runs a query while javascript pushes the content to a specific div. As a result, the user never leaves the index page.
I think it depends on how your website works. The ideal thing that I have in my mind at the moment is:
Decide a unique way to find your video (could be a title, a file name, an id: must not change), if you are using a database it's a column with a value different for each entry
Create a webpage that accept as a parameter (not optional) (possibly a $_GET parameter, not a post) that unique key and fills it's content with entry's data (the video review hopefully)
Now the permalink will be yourwebsite/yourwebpage?myparam=myvalue
Normally the permalink is the numerical id referred to that entry (thinking about databases in this case)
Edit 1: If what you mean is "moving the webpage to the link" (and not creating it), maybe you should ignore my answer, I didn't understand the question so.
What suggested Tadeck, if this is the case, is good
Edit 2: What about if, following the keylines I given you to create a permalink, you pass this value to the homepage and on page load you fire the event through the click() function (so it's like if the user clicks on the link, fires everything that you need, even the scroller thing)
Obviusly you need to give an ID to each tag, but I don't think it's a big problem (just use directly your "permalink value" as an id
The alternative in using click() method, is: give to the slider function a name so you can call it instead of waiting the click event only, expecially this part
$('.cross-link').live("click", function(){
You'll have to replace function() with a named function
then you will call, on page load, that function + ajaxpage('result.php?id=9', 'results2') + ajaxpage('videoloader.php?id=9') completely emulating the click event in this case.
You still need however an id in the a tag to find out which is the link
You should search for one (or both) of the following points:
pushState and onStateChange - preferred, nicest and probably what you are looking for,
location.hash and onhashchange - probably easier to implement (does not require you to support it on server side and works in older browsers too), but in this case you would get URL like http://eataustineat.com/#!claypit instead of http://eataustineat.com/claypit.
In this first case you would need to make sure server side scripting / configuration will invoke proper state within JS, when visited eg. by entering URL (http://eataustineat.com/claypit).
I'm a C# developer for Windows and I know NOT THAT MUCH about web programming. I have developed a special search engine in Java. I want to create a php interface for it. For now, I managed to connect php and Java via a Web Service. I watched some tutorials for creating a search engine and I have some slight idea of what should I do but I don't know exactly what to do with some problems. Here's the scenario I want to implement:
An Index page with a search box, user types the search query in that page, some results shows, if the user scrolls down, more results shows (like Facebook). When user clicks on a result item's link, the browser then opens another page that shows the result (also in my app).
Now what I know is that the index page should be a HTML file with a Get method to a PHP file.
What I don't know is How to enable "more" results? For this, my php should send an array containing the URL of the previous results to my Java service, get the results, add them to the array and wait. The next time it should use this array.
Please let me know what code structure should I use for my app.
Thanks in advance.
Edit:
Requested code samples in java server:
public String processQuery(String query, List<String> previousURLs);
this will be called for the first time like this:
processQuery("test", null);
suppose it has returned 2 results with urls:
http://www.bing.com
http://stackoverflow.com
these will be stored in an array and the second time:
processQuery("test", previous);
this will return new results which will be added at the end of the page.
You need to use AJAX (Asynchronous JavaScript and XML) requests. Essentially as a user scrolls down the page this triggers a request to get more results. You'd probably do something like cache the last result id to know from where to get the next batch of results. You'll need to brush up your javascript and possibly jQuery in order to figure out how to implement all this - ie trigger the request, handle the response and append new elements to the DOM.
An example website that does this is Duck Duck Go. Their search results page dynamically appends new results as you scroll. Make sure you have Firefox + Firebug to inspect the page, the network requests that get made and to step through (debug) the running javascript.
I did it with the help of this tutorial:
http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html
Why use AJAX for dynamic web pages when you can do it only with php?
The main reason to bother with AJAX is User Experience (UX).
Now AJAX won't necessarily improve UX in every single instance so in a lot of places sticking with pure PHP is perfectly okay.
But imagine the case where you have a text field on the site and a link to vote on something. Kinda like this site. When you add AJAX your users won't loose the text they entered in the textfield when they decide to vote on the link! How incredibly useful!
So if you care about your user's experience it is a good idea to use AJAX in situations like that.
PHP creates and outputs the Content to the Client Browser as it's a Server-Side Language and that's what it was built for, so on a request your code will access database, files etc. and then output the constructed html/text to the client.
Ajax just gives the User a more Desktop like feel. For example deleting a record and instead of the entire page reloading just letting the one element disappear from say a list and letting the server know that the record is to be deleted. But Remember to let the User know when you are busy sending data to the server (With a progress bar in .gif format for example). As lot's of user feel that if nothing happens on the screen to notify them, that the application is frozen which means they will either reload the page or just try to click the button again.
But you will need to provide some sort of compatibility with browsers that have Javascript disable and thus cannot use your AJAX functions, just something to keep in mind.
AJAX stands for Asynchronus Javascript and XML, meaning that a page can get new data, without having to reload a page.
PHP cannot send data without reloading the whole page. A user has to press a button, to send data.
An example of AJAX is for example google suggestions or the tag suggestions on this website.
currently I have the a basic jQuery gallery:
<ul>
<li>IMAGE</li>
<li>IMAGE</li>
</ul>
// with NAV stuff
I cycle through the images with animations and everything works great.
However, my client "NEEDS" another setup, whereby there will be a new page per slide. GQ.com is a good example of this. Click the link to check it out.
If you will notice, each time you click 'Previous' or 'Next' a new page is loaded, creating more pageviews for the site.
My Question:
Is it possible to have this with my current setup (b/c it can't change)? Or is it only possible through the server-side programming? How are they doing this?
Take a look at what's actually happening there. The URL for the "next" button looks like this:
Next
But when you click on it, where does it take you? You get here:
http://www.gq.com/style/wear-it-now/201010/best-jean-jackets-denim#slide=2
Notice the difference? It's a hash # instead of a question mark ?. They aren't reloading the entire page, they are making an HTTP request asynchronously in Javascript and using some form of hijax to change the browser's hash value (that which appears after the #...the only part that javascript can change), thereby allow the user to cycle backward and forward with the regular browser controls. The way to do this is to build in methods in your javascript to detect the value of what's after the hash both on page load and after a page's hash value has changed. Then you can have another javascript function actually control changing it when you click the "next" or "previous" buttons, and return false to kill the normal anchor href execution.
The reason this is called "hijax" is because your site still has perfectly-valid hrefs (e.g. you can go to that link above but replace the # with a ? and get to the exact same application state). This allows search engines to crawl your site and users without javascript to effectively use your site, while also providing all the AJAXery that people expect in fully-featured browsers. The trick here is to make sure that what comes after the # can be passed via AJAX to your server, have the server understand that it's an AJAX call, and process a return value that your javascript can understand. The easiest way is to use the extra bit after the # as the URL of your AJAX request and let the server interpret everything properly.
I've got a simple website using plain HTML/CSS to display and PHP/MySQL for data storage.
Now I'd like to add a toggle button similar to facebooks "like" button.
How can I act on the user pressing the button (add database record for this item, change button text) without leaving the page?
I thought this question would have been asked and diskussied to no end, but all solutions I found require some other frameworks than plain PHP as background.
You'll need to do it with javascript. Read up on "AJAX form posting".
A high level view:
user clicks on button
you capture the click via an onclick handler in javascript, and use it to call a javascript function
said function does a remote url request via XmlHttpRequest to a target page
that target page takes in the parameters passed via POST or GET and performs actions with them (eg add database record), and prints out any response required
the javascript function reads the response and acts accordingly (eg change button text)
and all this happens without refreshing the page.
You can do all this with pure low level javascript code, but plenty of libraries already abstract it while solving various issues with browser compatibilities. I'd suggest the jQuery javascript library. It provides an easy way to do exactly what you require, and good documentation.