ایجاد history در برنامه Ajax

[Webber]

سلام دوستان

بنده یه برنامه دارم که با جی کوئری درخواست هایی رو ارسال و دریافت می کنه ولی همونطور که می دونید در این صورت صفحه history نداره یعنی دکمه های Back , Forward مرورگر کار نمی کنن . می خواستم یه روش ساده و کاربردی تست شده بفرمایین که این مشکل هم حل بشه . البته جستجوی زیادی کردم و پلاگین هایی مثل bbq,history.js و pushstate رو پیدا کردم ولی نتونستم پیاده شون کنم .
مثلا بخوایم history به کد زیر اضافه کنیم چیکار باید بکنیم .

	    $('#netnav a').each(function(){
            var elem = $(this);
	        var classname=$(elem).attr("class");
	        var address  =$(elem).attr("href");
			
            $(this).click(function(e){


                var request =$.ajax({
                             type: "POST",
                             url : address,
                             data: "aliAjax=1"
                });
                    request.done(function( page ) {
			
  
                    $('#pagebody').empty().html(page);
	                    $('#netnav a').each(function(){
                            if($(this).hasClass('onnettab'))
                            $(this).removeClass('onnettab');   

							

                        });
	                //arr_classes = classname.split(' ');alert(classname);
	                $("."+classname).addClass('onnettab');
	                
                    });
                e.preventDefault();
            });
			
			
        });

پیشاپیش ممنونم

 

[eAmin]

روش استفاده از history plugin ساده است، از اینجا دانلودش کنید.
درون خودش چندتا نمونه هست که میتونید استفاده کنید.

در هر حال مثالی که درون خود این فایل رو توضیح میدم که چطور با یکی خودتون سازگار کنید.
اول از همه باید لینکهایی به این شکل داشته باشید:

<div id="ids">
	<a href="#x.html">load x.html</a>
	<a href="#y.html">load y.html</a>
	<a href="#z.html">load z.html</a>
</div>

بعد پلاگین رو باید به اینصورت فراخوانی کنید و کدهایی که وظیفه لود کردن فایلها رو دارن رو درونش قرار بدید:

	$.history.init(function(url) {
		var request = $.ajax({
			type: "POST",
			url : url || "",
			data: "aliAjax=1"
		});

		request.done(function( page ) {
			$('#content').html(page);
		});
	});

بعد درون رویداد کلیک لینکها این کدها رو قرار میدید، به اینصورت:

	$('#ids a').live('click', function(e) {
		var url = $(this).attr('href');
		url = url.replace(/^.*#/, '');
		$.history.load(url);
		return false;
	});

در نهایت کدشما به اینصورت میشه:

jQuery(document).ready(function($) {

	$.history.init(function(url) {
		var request = $.ajax({
			type: "POST",
			url : url || "",
			data: "aliAjax=1"
		});

		request.done(function( page ) {
			$('#content').html(page);
		});
	});

	$('#ids a').live('click', function(e) {
		var url = $(this).attr('href');
		url = url.replace(/^.*#/, '');
		$.history.load(url);
		return false;
	});
});

روش کلی به این صورت هست، حالا شما میتونید باقی کدهایی که نیاز دارید رو به این کدها اضافه کنید تا کار مورد نظرتون رو انجام بده.