urlにパラメータ付加後、htmlを書き換える動きがうまくいきません

Question

###前提・実現したいこと
ここに質問したいことを詳細に書いてください

下記のコードでaタクをクリックした時、morebtクラスのidを取得し、locationでurlにパラメータを追加→
if文でパラメータがあることを確認されたら、下記のコードのよう、htmlを書き換える動きを実装したいのですが、
なぜかパラメータが追加された後に、htmlが元の状態に戻ってしまいます…
コードの実行順の問題かとも思い、
先にhtmlを書き換え、パラメータを追加する方法や
その逆の方法も試したのですが、どちらもhtmlが元に戻るだけでした…
一瞬だけhtmlが変わることからコード自体は順番通り実行されているようですが、
なぜか最後に元の状態に戻ってしまいます…

《参考サイト》
http://imas-cinderella.com/news/
http://www.hai-furi.com/news/

のように、各記事をクリックしたらurlの後ろにパラメータを付けたいのですが
これがなかなか上手くいきません…

お手数ですが、ご回答の程、
何卒宜しくお願い致します。

###発生している問題・エラーメッセージ

エラーメッセージは出ていませんが、urlにパラメータを与えた後、一瞬下記のコード通りにhtmlが変わりますが、
また最初のhtmlの状態に戻ってしまいます…

###該当のソースコード

$(document).ready( function(){

    $("a.morebt").click(function(e){
		e.preventDefault();
		var id = $(this).attr("id");
	    var url = location.href;
	    var pair=document.location.search;
	    window.location.search = '?article_id=' + id;

		if( pair.length !== null ){
			var html = "";
		var category = $(this).parent().parent().parent().find(".news_category").text();
		var title = $(this).parent().parent().parent().find(".news_title_text").text();
		var texts = $(this).parent().parent().parent().find(".news_text").text();
		var imgArray = [];
		var thumb = $(this).parent().parent().parent().find(".news_thumb img").each(function(){
			   text = $(this).attr("src");
			   imgArray.push(text)});
		$("#allwrap").addClass("detail");
		$(".news_box").css({"display": "none"});
		html += '<div class ="news__detail_box mode_detail">';
		html += '<div class="news__detail_title cf">';
		html += '<div class="news__detail_category"><p>' + category + '</p></div>';
		html += '<div class="news__detail_title_text"><p>' + title + '</p></div>';
		html += '</div>';
		html += '<div class="news__detail_thumb">';
		html += '<img src="' + imgArray[0] + '">';
		html += '</div>';
		html += '<div class="news__detail_text"><p>' + texts + '</p></div>';
		html += '<div class="news__detail_share">';
		html += '</div>';
		html += '<div class="news__detail_nav">';
		html += '</div>';
		html += '</div>';
		$("#news").html(html);	
		}				
		
	});
	
});

###試したこと

上記で述べたよう、コードの読み込み順番を変えるなどは
試してみましたがダメでした…

###補足情報(言語/FW/ツール等のバージョンなど)
html / css / javascript / jquery dw cs6

Answer 1

【window.location - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Window/location

window.location を書き換えるとその時点で画面遷移が起こります。
History API を使えば希望されている動作に近づくと思います。

【javascriptを使ったSEO対策まとめ - Qiita】
http://qiita.com/ykyk1218/items/78ed3bce0371a4ee219c

【Manipulating the browser history - Web developer guide | MDN】
https://developer.mozilla.org/ja/docs/Web/Guide/DOM/Manipulating_the_browser_history

【HTML5 History APIで非同期通信時にURLを変更する方法 | 株式会社LIG】
http://liginc.co.jp/web/js/other-js/162559

【History APIとスマホブラウザでのハマりどころ - Qiita】
http://qiita.com/nenokido2000/items/2dd8da77d06837c8a510

Answer 2

多分やろうとしてらっしゃることはJavaScriptでやることではありません。
他の回答者さんもおっしゃっている通り、クエリ文字列を渡すとサーバーへのリクエストが発生します。（要するにページが再読込されます）
参考に挙げられているサイトはどちらもサーバーサイドスクリプトを使用しています。（JavaScriptはクライアントサイドスクリプト）

参考に加えておくと
参考のサイトで言えば、?p=2 は
「2ページ目にあたるデータを返せ」とサーバーへリクエスト
→データベースからそのデータを取得
→htmlを生成
※ポイントは動的ページではあるものの、一時的なものではない。検索エンジンからもOK。
JavaScriptで動的に生成する場合、基本「一時的なページ」になり、検索エンジンにもキャッシュされません。（※例外あり）

---

そもそもクエリ文字列（回答者さんのおっしゃっている「パラメータ」）とは
WebブラウザなどがWebサーバに送信するデータをURLの末尾に特定の形式で表記したものです。

JavaScriptで何かをする為のものというよりは、クエリに渡した値をサーバーへリクエストとして送り
それに対し、予めサーバーサイドスクリプトで定義されているレスポンス（Ex. ページ内容の変更、データベースから特定のデータのみを抽出しHtmlを生成…など）を返すためものです。

どうしてもJavaScriptのみで作成したいのなら

『URLに何らかの文字列を付与した上でhtmlの書き換え』（＝ 動的に一時的なHtmlページを作成したい）
場合、location.hashを利用した「ハッシュ(#)」 or 「ハッシュバン(#!)（※非推奨になってたような気がします）」
を使うのが妥当かなと思います。
（質問内容から推測するに、MVCみたいなものをつくりたい、という訳でもなさそうなので）

あるいは（あんまり意味はないのですが）
『ページロード時にページにクエリ文字列がある状態ではhtmlを書き換える』という処理にする

$(document).ready( function(){
var pair = window.location.search;

// !== null は常にtrueと評価されるので条件として使用するものではありません
// クエリ文字列が無い場合は空文字列（「''」）が入っていると判断され、nullではありません
if( pair === '?article_id=1'){
  //クエリがarticle_id=1の時のhtmlなど
}else if( pair === '?article_id=2'){
  //クエリがarticle_id=2の時のhtmlなど
}

    $("a.morebt").click(function(e){
        //クリックイベントはクエリ文字列の追加だけにする（これで勝手にページ遷移するので）
        e.preventDefault();
        var id = $(this).attr("id");
        window.location.search = '?article_id=' + id;
    });
});

1. .click()内のif文をまるまる$(document).ready(function(){}直下へ移動（if文がページロード時に実行されるように）
2. クリックイベントはクエリの書き換えのみに

とすれば、一応は「URLにはクエリ文字列が入り、ページ内容がそれに応じた形状になる」ようにはなります。

※繰り返しますが、これをJavaScriptで行うメリットはありません。

Answer 3

window.location.searchの動きはhttps://developer.mozilla.org/ja/docs/Web/API/Window/locationを参照ください。
代入した値がサーバに送られ、再読み込みされるまでの一瞬だけjs側の処理が進みリロードされる、という流れになっています。

例えば
http://hogehoge.com/?article_id=1
で受け取れるようサーバー側に処理を追加してあげればよいかと思います。

参考にされている2つのサイトともページリロードが走っているので、なにもクライアント側でhtmlの書き換えだけを行っているわけではないと思います。

Answer 4

window.location.search = '?article_id=' + id;

上記コードの実行により再読み込みが行われてるのではないかと思います。

回避する方法はいくつかあると思いますが、if文の中身をごっそりと
ページロード時の処理に移動し、「もしurlに'article_id='という文字列が入っていたら」
などの条件を追加するなどが一番簡単な気がします。