Q&A
動的に行うのですか、静的でもいいのですか？ 動的なら Web アプリで対処するということになりそうですが、そこは考えてますか？ 静的でよければ外部スクリプトファイルとして読む順番だけだと思いますが。
###前提・実現したいこと
あるjqueryファイルを別のJqueryファイルを読み込んだときに読み込ませたいのですがどのように書けばよいでしょうか？（オーバーライドにあたると思います。）
宜しくお願い致します。
###試したこと
$(document).ready( function(){
});
を試してみましたが、オーバーライドすることはありませんでした。
###ソースコード
【abcJs.phtml】
Jquery
1<script type="text/javascript" language="javascript"><!-- 2$(window).load(function() 3{ 4 <? /* 住所と物件名から基本情報を取得 */ ?> 5 $("#getSearchRent").click(function() 6 { 7 <? /* ダイアログを開く */ ?> 8 objSearchRentDialog = new ModalDialog({ 9 dialogId : 'searchRentDialog', 10 height: 480, 11 width: 985, 12 title: '物件を候補から取込みます', 13 }); 14 15 searchRentDialog = objSearchRentDialog.open(); 16 17 $("#searchRentDialog").html('検索中') 18 .dialog('open') 19 .load( 20 "<?= $searchAjax ?>", 21 { 22 classcode : '<?= $rentClass ?>', 23 name : $("#realEstateName1").val(), 24 spare : $("#spareDetail").val(), 25 code1 : $("#todofukenCode").val(), 26 code2 : $("#shikuchosonCode").val(), 27 code3 : $("#oazaTsushoCode").val(), 28 code4 : $("#azaChomokuCode").val(), 29 <? if($this->kanriFlg): ?> 30 kanriFlg : 1, 31 <? endif; ?> 32 firstTime : 1 33 } 34 ); 35 }); 36}); 37 // --> 38</script>
【defeJs.phtml】
<?=$this->render('/search/abcJs.phtml'); ?> <script type="text/javascript" language="javascript"><!-- $(window).load(function() { //フリガナ自動入力 Name = ''; NameKana = ''; $('input#Name').katakanaAutoComplete($('input#NameKana'), Name, NameKana); });
ghiJs.phtml
<script type="text/javascript" language="javascript"> $(function(){ $("#Time").on('change keyup',function(){ var time = $(this).val(); if(time === ""){ $(this).next('span').next('input[type="text"]').val(''); } else { $(this).next('span').next('input[type="text"]').val(time * 50); } }); }); </script>
HTML
<div class="ttl_bt_box"> <button type="button" id="getSearchRent">検索ダイアログ </button> </div> <table> <tr> <th> 名前 </th> <td> <?= $this->form->Name ?> <?= $this->error($this->form->Name) ?> </td> </tr> <tr> <th> フリガナ </th> <td> <?= $this->form->NameKana ?> <?= $this->error($this->form->NameKana) ?> </td> </tr> </table> <table> <tr> <th> 時間・距離 </th> <td> <span id="Time"> <?= $this->form->Time ?>分・ <?= $this->form->Distance ?>m </span> <?= $this->error($this->form->Time) ?> <?= $this->error($this->form->Distance) ?> </td> </tr> </table>
※ソースコードを追記しました。
ボタンをクリックしてフォームに数字を入れ、その数字の積を別のフォームに入れる処理を書こうとしているので、動的ですね。Webアプリで対処することは考えておるいませんでした…
もう少し具体的に書かないと JavaScript だけで済むのか、Web アプリでの対応が必要か分からないです。
失礼しました。ボタンをクリックすると、Aというjqueryの処理が走り、その処理が完了したときにBというjqueryの処理を走らせたいのです。
すみませんが、その情報では自分は答えようがないです。オーバーライドとかの話ではなく、ボタンクリックで A ⇒ B 順番に走らせればいいと思ってしまいます。
AとBとではふぁいいるが異なっておりますが、そのような処理はどのように書けばよいのでしょうか？
前にも書きましたが、今提供されている情報では自分は答えようがないです。（情報不足です） もっと具体的に（あくまで具体的に）どういうことがしたいのか書いてください。
画面上でボタンを押すとウィンドウが表示され、そのウィンドウの中で情報を入力し、その情報をメインの画面上に反映させるととメイン画面上のフォームに値（数字）が入力されます。そしてメイン画面に数字が入力されたときに、その数字×50されたものをメイン画面上の別のフォームに表示させたいのです。
ウィンドウって何ですか？ jQuery UI の Dialog のようなもの？ その操作は Web サーバーは介在しなくてブラウザ側だけで JavaScript/jQuery で行うのですか。とにかく分からないところだらけで、スミマセンが自分はギブアップ状態です。
失礼しました。dialogになります。また、データはsqlからとってきますが、その操作はブラウザ側だけでjqueryで行われます。質問の仕方が稚拙で申し訳ございません。
質問者さんの問題・課題を再現できる必要最低限のコード（あくまで必要最低限の。ただし、できればコピペすれば動く程度に）を質問欄にアップして、それをベースに説明していただけませんか？
最初の質問「あるJQueryファイルを、別のjQueryファイルを読み込んだ後に読み込ませる方法」と話が変わってきていませんか？
ソースコードを追記させていただきました。
せっかくソースをアップしていただいたのですが PHP では自分はお手上げです。お役に立てずすみませんが、他の方の回答をお待ちください。
そうでしたか。ご回答ありがとうございました。
SurferOnWww さん、これ PHP の体裁をとった js ですよ。なぜ phtml なのかよくわかりませんし、分ける意味もわかりません。質問者さん、なぜ分けてるんですか？
実際はほかにも多くのコードがそれぞれのJsに記載されています。役割毎にファイルを分けて後の混乱を防ぐためです。
すごく混乱したソースです。
ZuishinさんはJsファイルを統一すれば私の問題を解決できると仰っているのでしょうか？それ以前の話でしょうか
背後からまた何が出てくるかわからない以上、断言はできませんが、可能性はあります。
Zuishin さん、フォローをありがとうございます。ご指摘の通りのようですが、やっぱり自分はお手上げです。すみません。
ご回答ありがとうございます。もし現状のままファイルを分けた状態で私の問題を解決することはできますでしょうか？つまり、abcJs.phtmlのなかのdialogが走った後に、defeJs.phtmlとghiJsそれぞれのfunctionを走らせるというものです。
うわ、と思ってよく読んでないので、あとでちゃんと読んで考えてみます。ちょっと仕事が入りました。
すみません。大変ありがとうございます。宜しくお願い致します。
回答1件
0
ベストアンサー
まず、掲示されたファイルをどうやって合成しているのか不明な上、katakanaAutoComplete などうちでは動かないものもあるので、完全な動作確認は無理です。
それを踏まえた上で一般的な環境で動作確認できるものを作ってみました。
以下の HTML から呼ばれる二つのスクリプトは問題なく動作しました。
オーバーライドという言葉は例えばオブジェクト指向でメソッドの上書きをする時に用いられる言葉なので、誤用と思います。上書きではなく追加しています。
動作のタイミングですが、どちらも $(window).load が指定されているので、並行して動作します。ダイアログが閉じた時に動作させるには、クローズイベントハンドラを実装してください。
モジュール化を無視してスパゲッティのまま適当なところで PHP ファイルに分けるという仕様をそのまま使いたいのであれば、苦労なさると思います。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8" /> 6 <title></title> 7 <link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.min.css"> 8 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 9 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> 10 <script src="abc.js"></script> 11 <script src="def.js"></script> 12</head> 13 14<body> 15<div class="ttl_bt_box"> 16 <button type="button" id="getSearchRent">検索ダイアログ 17 </button> 18</div> 19<table> 20 <tr> 21 <th> 22 名前 23 </th> 24 <td> 25 山田 太郎 26 </td> 27 </tr> 28 <tr> 29 <th> 30 フリガナ 31 </th> 32 <td id="kana"> 33 ヤマダ タロウ 34 </td> 35 </tr> 36</table> 37 38<table> 39 <tr> 40 <th> 41 時間・距離 42 </th> 43 <td> 44 <span id="Time"> 45 10分・ 46 500m 47 </span> 48 </td> 49 </tr> 50</table> 51</body> 52 53</html>
abc.js
JavaScript
1$(window).load(function() 2{ 3 /* 住所と物件名から基本情報を取得 */ 4 $("#getSearchRent").click(function() 5 { 6 /* ダイアログを開く */ 7 $('<div id="searchRentDialog">').dialog({ 8 title: '物件を候補から取込みます', 9 modal: true, 10 height: 480, 11 width: 985, 12 buttons: { 13 '閉じる': function () { 14 // thisは、ダイアログボックス 15 $(this).dialog("close"); 16 } 17 } 18 }); 19 var dialog = $('#searchRentDialog'); 20 dialog.html('検索中'); 21 }); 22});
def.js
JavaScript
1$(window).load(function() 2{ 3 $('#kana').text('ワレワレハ ウチュウジンダ'); 4});
投稿2017/03/12 11:26
総合スコア28660
あなたの回答
tips
プレビュー
