I've noticde some websites like Twitter do not have the usual paginations. Instead, it has the "MORE" link. When it is clicked, it shows more tweet below without refreshing the page.
How does this technique work?
It requests via XHR the next set of results, loads them, and then inserts the HTML (via DOM methods or HTML serialised) into the page.
If you know nothing about what I described above, start your journey learning about XMLHttpRequest.
This can be done with jQuery.
Here is the page update mechanism:
$('.more').click( function() {
$(this).before('<div><h2>Post 3</h2><p>Content</p></div>');
});
Demo at: http://jsfiddle.net/WCprC/33/
However the content needs to be fetched from the server with something like .get()
The pagination system works almost similarly on server-side (slice an array, set an offset, etc.) however, instead of rendering the complete layout with the content, they only return a chunk of html.
It is then a combination of two techniques:
Ajax which uses XMLHttpRequest to fetch data from server
DOM and its method which is used to manipulate the HTML tree.
(thanks to David Dorward for pointing me out the lake of accuracy)
Related
I want to put Thumbs up/Thumbs down buttons on my website.
There will be quite a few of them displayed at once, so I don't want to have to do a POST and reload the page every time the user clicks on one.
I thought of using re-skinned radio buttons to choose Thumbs up/Thumbs down, but that would require the user to click a submit button.
So how do I do this? I am open to using JavaScript or some other form of Client-Side scripting, so long as it is built in to most/all web browsers.
Thanks!
YM
I would take a look at using jQuery, http://jquery.com/ It is a WIDELY used library and there is tons of support for it both here and # jQuery's website.
You could easily assign all those thumbs to do an ajax post to a save page with the correct id and the user would not know the difference
You're definitely going to need to use JavaScript on this. Well, there are other client-side languages that could technically do the job (ActionScript, for example), but JavaScript is definitely the best way to go.
Look into AJAX (Asynchronous JavaScript And XML). This is just a buzzwordy way of saying use the XMLHttpRequest() object to make page requests with JavaScript without reloading the page. Here's a good tutorial: http://www.w3schools.com/ajax/default.asp . Note that, despite the word "XML" being in the title, you don't have to use XML at all, and in many cases you won't.
What you'll basically do is this:
Have your thumbs-up and thumbs-down buttons linked to a JavaScript function (passing in whether it's a like or dislike via a function argument).
In that function, send a request to another page you create (a PHP script) which records the like/dislike. Optionally, you can have the PHP script echo out the new vote totals.
(optional) If you decided to have your PHP script output the new results, you can read that into JavaScript. You'll get the exact text of the PHP script's page output, so plan ahead according to that -- you can have the PHP script output the new vote totals in a user-friendly way and then just have your JavaScript replace a particular div with that output, for example.
Hello guys I newbie question :) - I am currently using PHP/Zend and now I need to display a form and other content in one of my pages. I do not want the page to reload and I cant use a pop-up window so the best option is to sort of dynamic display a "square" in the middle of the current page with this form being load on the go... this way i could have my pages (forms, text, whatever) being pulled in this square.
In order to keep compatibility with older/new and different browsers, what would be the best choice? DOJO - that is already in Zend, JQuery, or just HTML5/CSS3? Besides, if anyone could point me to some references of where can I find this info it would be great!
AJAX is the most common means (Asynchronous Javascript And Xml) to do this- which uses Javascript to poll other scripts (can be .php pages) which then return predefined output based on the request- this output can be content to inject into a page, or data which can then be interpreted by your page for another action (i.e. the output from another page etc..).
In this instance, your .php page could include JS (javascript) in the head, whether linked or inline, which would contain details for launching an AJAX request- namely, how often or on what trigger (button press etc), by what means (POST or GET), what is sent (any other variables you wish), what the target script is (the script which will handle the request and output your required content/data), and what to do when the response is recieved (i.e. which element on the page should be updated with the response).
A little about AJAX:
http://webdesign.about.com/od/ajax/a/aa101705.htm
http://webtrends.about.com/od/web20/a/what-is-ajax.htm
Likely the simplest way to begin is to use a pre-existing Javascript library like the ubiquitous jQuery (jquery.com), there are thousands of tutorials out there for it, and though you will need to do some Javascript programming, the library has meant that you can rely on fairly simple syntax to do so (as simple as $('#myelement').load('mypage.php')):
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/
http://www.sitepoint.com/ajax-jquery/
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/
In simple terms:
You have your php page with the element (area) that needs updating (page A)
Build another php script which outputs the content you want 'refreshing', e.g. the latest news stories, each time it is run (page B)
Link to the jQuery library in your header section (page A)
Write a simple jquery function in the header section of page A, which says every X seconds/minutes (or on demand), run an AJAX request to fetch the content of page B and insert into an element (DIV) within page A
---updated---
If you wish to use DOJO as opposed to jQuery, there is also a wealth of resources available:
http://dojotoolkit.org/documentation/tutorials/1.6/ajax/
http://www.infernodevelopment.com/dojo-ajax-tutorial
http://startdojo.com/2010/01/02/simple-ajax-form-tutorial/
http://today.java.net/pub/a/today/2006/04/27/building-ajax-with-dojo-and-json.html
http://www.ibm.com/developerworks/web/tutorials/wa-dojotoolkit/index.html
http://www.roseindia.net/dojo/
I want to "pull" or "load" an entire div from a separate page and display it on another page within a div.
I'm updating the home page's "latest news" div whenever the actual page for latest news is updated.
I would like to use php for this and I do not want the entire 2nd page to display, only the information in the div.
Thanks for any advice/suggestions,
Jeff
I recommend jQuery framework with load().
See documentation: load() - Loading Page Fragments
You can use PHP's DOM classes to remotely fetch the page and parse the HTML element text...
$dom = new DOMDocument();
$dom->loadHTMLFile('http://us3.php.net/manual/en/book.dom.php');
$div = $dom->getElementById('book.dom');
echo $div->nodeValue;
From what I can gather you're attempting to replicate an AJAX-style loading of content from an external source into your page. I've been thinking about this for a little bit, and I think it can be done.
You'd need to do the following:
1: Load the external page using curl, url fopen or similar. I'd recommend curl.
2: Initialize a DomDocument object if the page fetch is successful.
3: Use the DOM traversal functions to locate the div and retrieve its contents.
4: Insert the contents into your page with the method of your choice.
I've not attempted an actual implementation, as this is just an idea as to how to go about it. Hopefully though it will give you enough information to make a start.
Something like this with jQuery and the method load():
$(document).ready(function(){
var myInterval = setInterval(function(){
$("#news_div").load("/news.php");
}, 10000);
});
This would load news.php every 10th second and inject it in the div with the ID news_div.
However, you're better off looking at node.js, sockets et.c. if you have a lot of traffic.
expanding on #harakiri comment, you can also look into JQuery's live function which does basically the same, but in case you need future binding done automagically, live will do that opposed to load.
I have a search page on my site. The search pulls from a couple (eventually a few) API from external sources. Sometimes a search can take up to 5 seconds.
Because of this, I would like to load my search page at least with a loading gif, and let AJAX begin to pull the data, showing a bit at a time. (similar to http://gamespot.com although this is a bad example since the search doesn't work with JS disabled)
Of course I have to consider the users who have turned Javascript off, so for them I'd just let PHP do the search and they'll have to bear with the wait.
What is the best way to implement this? If I use <noscript>, then all users still have to wait for the 5 second PHP portion to load anyways.
Would I just have the search form send the user to different pages depending on their JS status?
Perhaps have the noscript part define an iframe that loads the results from the long-duration PHP query?
Would I just have the search form send the user to different pages depending on their JS status?
If you have the users coming to your page, and then sending the form, that's absolutely the best way to go. E.g.:
HTML:
<form id='theForm' action='long_search.php'>
....
JavaScript:
hookEvent(document.getElementById('theForm'), 'submit', function(event) {
event.preventDefault();
loadAjaxSearchResults();
return false;
});
...where hookEvent is a function that uses addEventListener or attachEvent (on IE).
Off-topic: The hookEvent thing, like a lot of this stuff, is easier if you use a library like jQuery, Prototype, YUI, Closure, or any of several others. For instance, with jQuery:
$("#theForm").submit(function() {
$("#resultsTarget").load("ajaxsearch.php", $(this).serialize());
return false;
});
Without JavaScript, you will need to post the data to the server and perform a full postback (refresh) on the page. Just like the good ol' days. ;)
no you apply your js code (autocomplete if i understoof right?) up to an input field. Think of Javascript like an extender. If js is disabled, no autocomplete is extended on the input field. You may put some text, where you say, dude, turn on js otherwise this will be a long search. And if js is on, hide the text
Progressive enhancement:
Build it so the PHP version works, first and foremost. This is accessible to all. Then, add javascript so that, if available, it performs ajax requests behind the scenes to grab the content and update the current page.
See this book as a simple, great read on the subject:
Bullet Proof Ajax
So I am trying to have a dynamic tabs kind of thing using both php and javascript. To make it much easier to understand, remember the two choices on facebook (Recent news and most recent) or something like that, when you click on one of them it just changes the content that you see in the middle without updating the page. i know how to delete the content in a div for example, but after deleting the content in the div (innerHTML = "") I want to populate it with the option chosen from the database.
So let's say I have an option (all) and an option (only this)
The default is all so when I run the page, I will just get all. However, if I click on only this, it will clear the div "my header" and will replace the content with the latest content from the database (database) and display it.
For that I need both php and javascript, is there a sample or an easy way to do this before i start digging around.
((Sorry if is not clear but the facebook example should be clear enough))
Whatyou are looking for a is AJAX/PHP approach.
Clicking on the tab
The current content gets removed. This is possible because it has a unique "id" attribute in the HTML code
The server is asked for the new content. This is the AJAX request that will be triggered after/while/... the content is removed.
The server sends back the code. This can be HTML, JSON, XML or similar.
You script recieves the answer, may "do" something with it (like some parsing or similar)
The content will be placed on the page (again, this is possible due to an unique "id"
This is basically the way it is done.
Check out the different JavaScript frameworks. They all come with nice AJAX support:
jQuery
MooTools
dojo
Prototype
And of course, SO is also a nice place to look at: https://stackoverflow.com/questions/tagged/ajax+php
What you're talking about is ajax.
I would suggest a javascript library to help leverage this, like jquery.
It can be as cool as
$.post('serverScript.php',
function(data) {
$('#idOfDivToUpdate').html(data); //shove script data into div
},'html' );
tutorial.