デフォルトで指定の文字を表示し、クリックしたら文字を入れ替えることをしたいのですが・・・・

Question

echo "<div id='tab01'>";
echo "<div class='new_left'>";
echo "<font color='white'>";
echo "<a href='#' id='u1000_create'>新規作成</a><br>";
$result = $mysqli->query("SELECT id from UPDATE_INFO order by id");
if($result)
{
//1行ずつ取り出し
while($row = $result->fetch_object())
{
echo "<font color='white'>";
//エスケープして表示
$pid = htmlspecialchars($row->id);
echo "<a href='#' id='$pid'>".$pid."</a>";
echo "</font>";
echo "<br>";
}
}
echo "</font>";
echo "</div>";

echo "<div class='new_right' id='section01'>";
	echo "<font color='white'>";
		echo "<script type='text/javascript'>";
		?>
				$("a").on('click', function() {
				var uid = this.id;
				if(uid)
				{
					$('#section01').load('./test511_select.php?uid='+uid);
				}
			});
		<?php
		echo "</script>"; 
	echo "</font>";
echo "</div>";

echo "</div>";

今現時点ではクリックしないとtest511_select.phpファイルから取ってきた文字を表示しません。
改善したいのはクリックしなくても設定した文字を表示し、クリックしたらtest511_select.phpファイルから取ってきた文字を入れ替えるようにさせたいのです。

ＵＲＬ：http://www.low-cost-travel.pe.hu/test513.php

大変恐縮ですが教えていただけないでしょうか？

Answer 1

まずPHPであれば必要部分だけ<php ・・・ ?>で囲むようにして、他は普通のHTMLで書いたほうが可読性が上がるかと思います。
ま、それはさておき…

$(function() {
}); 

を上手に活用して、DOM読み込み時に表示するようにすればよいかと思います。

Comments

[ojityan]

すいません。サンプルとか頂けないでしょうか？

[yu-ri]

うーん主様の文章をもう一度読み返してみたら、矛盾がありますね…

---
今現時点ではクリックしないとtest511_select.phpファイルから取ってきた文字を表示しません。
改善したいのはクリックしなくても設定した文字を表示し、クリックしたらtest511_select.phpファイルから取ってきた文字を入れ替えるようにさせたいのです。
---

・クリックしないと指定ファイルからとってきた文字を表示しないのは×
・クリックしたら指定ファイルからとってきた文字を表示するのは○

…という風に読み取れるのですが…これって明らかに矛盾してますよね。

・最初に設定した文字を表示したいのに表示されない
・クリックしても値が入れ替わらない
・クリックしなくても指定ファイルから取り出した値をまず表示させたい

このどれに当てはまりますでしょうか。

[ojityan]

下記を見ていただけないでしょうか？
http://low-cost-travel.lk6.co/test511.php#

【操作】
一番下のEiterをクリック⇒タブメニューの下の右側が何も表示されてません。
ダイアログをを開いた時点で新規作成(左)の画面と同じを表示させたいのです。
今現時点だとダイアログを開いて新規作成のリンクをクリックしないとと右の
画面が変わりません。

[yu-ri]

動作云々の前に。

http://low-cost-travel.lk6.co/

上記を叩いたら見えてはいけないものが見えてしまいました。
It Works!あたりに変えておいた方がよいかと思います。

いやぁ怖い怖い…。

[yu-ri]

で、ソース拝見した限りこれでどうでしょうか。
test511-dialog.js

$('#open2').click(function() {
$("#mado2").ipop();
$("a#u1000_create").trigger('click');
});

[ojityan]

いぜん文字化けの原因を調査していた時のままにしておりました。
ひとつは無事解決できました。ありがとうございます。
ただ、ほかのタブをクリックするとまた新規作成をクリックしないと
同じことになってしまいます。
たとえばトラベルをクリックしたら新規作成画面を表示させるには
どうしたらいいでしょうか。
今調べている最中でですが、もしサンプルコードを書いてる最中で
解決したらすいません。

[yu-ri]

要は何かをクリックしたときに、連動して他のクリックが働けばよいのかと思います。
何かのクリック時にtriggerで目的の要素をクリックするようにしてみてはいかがでしょうか。

[ojityan]

ありがとうございます。もう一度確認してみます。

[ojityan]

$('#tab02').click(function() {
$("a#t4000_create").trigger('click');
});
tab02(トラベル)をクリックしたら右側にトラベル用の新規作成が表示されるかと
思いますが、表示されません。これでは不十分なのでしょうか？

[yu-ri]

ソース拝見しました。
$('#open2').click(function() {
$("#mado2").ipop();
$("a#u1000_create").trigger('click');

$('#tab02').click(function() {
$("a#t4000_create").trigger('click');
});
});

これを、

$('#open2').click(function() {
$("#mado2").ipop();
$("a#u1000_create").trigger('click');
});
$('#tab02').click(function() {
$("a#t4000_create").trigger('click');
});

こうしてみたらどうでしょうか。

[ojityan]

実はそのパターンはすでに確認済みで今ほかのパターンを探しております。
ディスクのクリーンアップや履歴の削除などをしましたが、状況などが一向
変わりません。
今ほかのパターンを探しておりますが、もしお時間が頂けるようでしたら
ご協力いただけたら幸いです。

[yu-ri]

ソースを拝見しようとしたら404でした…
お手数ですが閲覧できるURLをご提示いただけますでしょうか。
何となく原因は分かるのですが、確証を得たいので。

[ojityan]

yu-riさん
私がどうやら動作確認をしすぎてレンタルサーバ（未来サーバ）が落ちたぽいです。
上記も変更しますが、下記のＵＲＬを記載しておきます。お手数おかけして申し訳ございません。
http://www.low-cost-travel.pe.hu/test512.php

[yu-ri]

$('#tab02').click(function() {
$("a#t4000_create").trigger('click');
});
これはtab02というIDを持つ要素をクリックしたときに動きます。
ソースを拝見する限り、実際にはそのIDの中にあるAタグをクリックしておりますので、そもそも上記JQueryが動いていないものと思われます。

$("#tab02 a[href=#tab02]").click(function() {
$("a#t4000_create").trigger('click');
});

でいかがでしょうか。

[ojityan]

yuiさん
少しだけ進展したような感じだと思います。
今現時点だと以下のようになっております。
１、ＥＤＩＴでダイアログを開かれます。
２．個人ページの新規作成画面が表示されます
３．トラベルというタブをクリックします。
４．新規作成のリンクをクリックしてが新規作成用の画面が表示されます。
５．技術関連のタブをクリックします。
６．再度トラベルのタブをクリックします。
７．トラベルの新規作成の画面が表示されます。
８．再度個人ページのタブをクリックします。
９．個人ページの新規作成画面が表示されます

【改善したい流れ】
１、ＥＤＩＴでダイアログを開かれます。
２．個人ページの新規作成画面が表示されます
３．トラベルというタブをクリックします。
４．トラベルの新規作成画面が表示されます。
５．技術関連というタブをクリックします。
６．技術関連の新規作成画面が表示されます。
上記のようにしたいのですがお力を頼ってばかりで申し訳ございません。

[yu-ri]

あーすいません、ソース改めて拝見しましたがタグ指定間違ってましたね…。

$("#tab02 a[href=#tab02]")
↓
$("ul#tabnavi a[href=#tab02]")

でいけるかも。

[ojityan]

まだ『改善したい流れ』のような感じにならないです(^^;)
着実に近いづいているのは確かなのですが・・・・。

[yu-ri]

ふーむ…今落ち着いてソースを洗いなおしているのですが、至る所でAタグのクリックイベントが発生しており、どれが優先しているかわからないですね…。
DOM読み込み完了時のイベントも散乱しておりますゆえ、一度目的を整理したうえでソースを綺麗にした方がいいかもしれません。

[ojityan]

危険なことは承知でしました。
ご連絡ありがとうございます。

[yu-ri]

ちょ…中々危険なことをされますね…（汗
落としましたのでコメントは即刻編集しておいてください。

Answer 2

$(window).on('load', function() {});を利用したらどうでしょう。

追記
yu-riさんの言うとおり、$(function(){});を利用した方が良さそうなので、そちらで書きます。

$(function(){
    $('#section01').load('./test511_select.php');
    $("a").on('click', function() { 
        var uid = this.id; 
        if(uid) 
        { 
            $('#section01').load('./test511_select.php?uid='+uid); 
        } 
    });
});

こんな感じになるかと思います。

Comments

[ojityan]

すいません。サンプルを頂けないでしょうか？

[ojityan]

$('#section01').load('./test511_select.php');
上記のコードが入ってしまうとダイアログが起動しなくなってしまいます。
＄.onではやるとダイアログが起動しますが、希望通りの動作がしません。