1つのファイル上で複数のjavascriptを作動

質問

ボタンを押したり、キーを入力すると別ファイルを呼び出すjavascriptがあります。
今回、同じページに同スクリプトを2つ設置しました。

*********************************************
【Script1】 キーを入力すると./find.phpを呼び出す
*********************************************

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("./find.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})
}
</script>

*************************************************
Script 1 を呼び出すキー入力画面
*************************************************
<form id="searchform" method="post">
<input type="text" name="search_term" id="search_term"/>
<input type="submit" value="全表示" id="search_button" />
</form>

*********************************************
【Script 2】 キーを入力すると./find_op.phpを呼び出す
*********************************************

<script type='text/javascript'>
$(document).ready(function(){
$("#search_results_op").slideUp();
$("#search_button_op").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term_op").keyup(function(e){
e.preventDefault();
ajax_search();
});
});
function ajax_search(){
$("#search_results_op").show();
var search_val=$("#search_term_op").val();
$.post("./find_op.php", {search_term : search_val}, function(data2){
if (data2.length>0){
$("#search_results_op").html(data2);
}
})
}
</script>

*************************************************
Script 2 を呼び出すキー入力画面
*************************************************

<form id="searchform_op" method="post">
<input type="text" name="search_term_op" id="search_term_op" />
<input type="submit" value="全表示" id="search_button_op" />
</form>

*********************************************

問題点

「Script 1 を呼び出すキー入力画面」上で文字を入力したりボタンを押したりすると、なぜかScript2が稼働してしまいます。

1つのページの中で、「Script 1」「Script2」がそれぞれ別々に稼働するためにはどこを変更すればよいでしょうか?

回答No.1

noname#247307 · ベストアンサー

Ajaxでデータを取得するための処理が、どちらもajax_search関数になっています。おそらくそれで1つ目のajax_search関数が、2つ目のajax_searchで上書きされているのでしょう。

2つ目のajax_search関数と、これを呼び出している部分の名前を変更すれば動くと思います。

それと、直接は関係ありませんが、できれば$(document).readyの処理は１つにまとめたほうがいいと思いますよ。メンテナンスもしやすいですし。

お礼

ありがとうございます。
下記で出来ました。
本当にありがとうございました。感謝します。

<script type='text/javascript'>
$(document).ready(function(){
$("#search_results").slideUp();
$("#search_button").click(function(e){
e.preventDefault();
ajax_search();
});
$("#search_term").keyup(function(e){
e.preventDefault();
ajax_search();
});
});
function ajax_search(){
$("#search_results").show();
var search_val=$("#search_term").val();
$.post("./find.php", {search_term : search_val}, function(data){
if (data.length>0){
$("#search_results").html(data);
}
})

$("#search_results_op").slideUp();
$("#search_button_op").click(function(e){
e.preventDefault();
ajax_search2();
});
$("#search_term_op").keyup(function(e){
e.preventDefault();
ajax_search2();
});
});
function ajax_search2(){
$("#search_results_op").show();
var search_val=$("#search_term_op").val();
$.post("./find_callput_op.php", {search_term_op : search_val}, function(data2){
if (data2.length>0){
$("#search_results_op").html(data2);
}
})

}

</script>