Question

Finally, I find some article in http://code.google.com/intl/en/web/ajaxcrawling/docs/getting-started.html msnbc use this method. Thanks for all the friends.

Thanks for your all help. I will study it for myself :-}

Today, I updated my question again, remove all of my code. Maybe my thinking all wrong.

I want make a products show page.

One is index.php, another is search.php (as a jquery box page). index.php has some products catagory lists; each click on product catagory item will pass each value to search.php. search.php will create a mysql query and view products details. It(search.php) also has a search box.(search.php can turn a page to show multiple products; the search result looks similar to a jQuery gallery…).

I need to do any thing in search.php but without refreshing index.php.

I tried many method while I was thinking: Make search.php as an iframe (but can not judge search.php height when it turn page and index.php without refresh); use jquery ajax/json pass value from index.php to search.php, then get back all page’s value to index.php. (still met some url rule trouble. php depend on url pass values in search.php, but if the value change, the two page will refresh all. )

so. I think, ask, find, try…
Accidental, I find a site like my request.

in this url, change search word after %3D, only the box page refresh

in this url, change search word after = the page will refresh

I found somthing in its source code, is this the key rules?

<script type="text/javascript"> 
var fastReplace = function() {
    var href = document.location.href;
    var siteUrl = window.location.port ? window.location.protocol+'//'+window.location.hostname +':'+window.location.port : window.location.protocol+'//'+window.location.hostname;
    var delimiter = href.indexOf('#!') !== -1 ? '#!wallState=' : '#wallState=';

    var pieces = href.split(delimiter);
    if ( pieces[1] ) {
        var pieces2 = pieces[1].split('__');
        if ( pieces2[1] && pieces2[1].length > 1) {
            window.location.replace( unescape(pieces2[1].replace(/\+/g, " ")));
        }
    }
}();
</script> 

If so. in my condition. one page is index.php. another is search.php.
How to use js make a search url like

index.php#search.php?word=XXX&page=XXX

then how to pass value from one to another and avoid refreshing index.php?

Still waiting for help, waiting for some simple working code, only js, pass value get value.

Thanks to all.

Answer 1

assuming you really want to do something like here: http://powerwall.msnbc.msn.com/

I guess they are using a combination of ajax-requests and something like this: http://tkyk.github.com/jquery-history-plugin/

make shure that the navigation (all links, etc.) in the box works via ajax – check all the links and give them new functionality by js. you can write some function which requests the href url via ajax and then replace the content of your box. …

function change_box_links(output_area){
    output_area.find('a').each(function(){
        $(this).bind('click', function(e){
            e.preventDefault();
            var url = $(this).attr('href');
            $.ajax({
                url: url,
                success: function(data){
                    output_area.html(data);
                    //update url in addressbar
                    change_box_links(output_area);
                }
            });

        });
    });
}

it is upgradeable but shell show the main idea…

addendum[2011-05-15]

Get away from thinking you will have two files, that can handle some many “boxes”. i mean you can do this but it’s worth it.

but to be able to set up your templates like normal html page you could use the above script to parse the ajax requested html pages.

build your html-pages for

• viewing the content,
• viewing the search result
• , etc.

on your main page you have to provide some “box” where you can display what u need. i recommand a div:

<div id="yourbox"></div>

your main page has buttons to display that box with different content, like in the example page you have showed us. if you click one of those a JS will create an ajax call to the desired page:

(here with jquery)

$('#showsearch_button').bind('click', function(){showsearch();});

function show_search() {
    $.ajax({
        url: 'search.php',
        success: function(data){
            var output_area = $('#yourbox');
            output_area.html(data);
            $.address.hash('search');
            change_box_links(output_area);
         }
    });
});

for other buttons you will have similar functions.
the first function (see above) provides that the requested box-content can be written as a normal html page (so you can call it as stand-alone as well). here is the update of it where it also provides the hashtag url changes:

jquery and requireing the history-plugin

function change_box_links(output_area){
    output_area.find('a').each(function(){
        $(this).bind('click', function(e){
            e.preventDefault();
            var url = $(this).attr('href');
            $.ajax({
                url: url,
                success: function(data){
                    output_area.html(data);
                    var name = url.replace('/\.php/','');
                    $.address.hash(name);
                    change_box_links(output_area);
                }
            });

        });
    });
}

and you will need some kind of this function, which will bind the back and forward buttons of your browser:

$.address.change(function(event) {
    var name = $.address.hash();
    switch(name){
        case 'search': show_search(); break;
        default: alert("page not found: "+name);
    }
});

the above code should give an idea of how you can solve your problem. you will have to be very consequnt with filenames if you just copy and past this. again: it is improveable but shell show you the trick 😉