jqueryのAJAXで通信が完了した時のアラートをLightbox風
- jqueryのAJAXを使用して通信が完了した時にLightbox風のアラートを表示する方法を教えてください。
- AJAX通信が完了した時に出力されるアラートを、Lightboxのデザインで表示する方法を教えてください。
- jqueryのAJAXを使って通信が完了した時に、メッセージをLightbox風のアラートで表示する方法を教えてください。
- ベストアンサー
jqueryのAJAXで通信が完了した時のアラートをLightbox風
jqueryのAJAXで通信が完了した時のアラートをLightbox風に表示したい。 コード <script type="text/javascript"> //<![CDATA[ $(function(){ $('#exebtn').click(function() { $.ajax({ type: "post", url : "sendmail.php", data : { message: $('#message').val(), exebtn:$('#exebtn').val()}, datatype:'text', //ここの部分をどう変えれば出来るのでしょうか？ success: function(data) { if(data != ''){ alert(data); }}, }); }); }); //]]> </script> ご教授、宜しくお願い致します。
- chocoon
- お礼率100% (6/6)
- AJAX
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
jQuery-UI の Dialog を modal で使えばいいかと。
関連するQ&A
- jqueryでAJAX非同期通信をしてphpからメールを送信する。送信
jqueryでAJAX非同期通信をしてphpからメールを送信する。送信完了後にlightbox風に「送信しました」と表示させたい。 sendmail.phpにpostでフォームの内容が渡りません。どうやってsendmail.phpに値を渡して sendmail.phpの$msgを戻して、表示させるのでしょうか？ 素人です。1週間ほど調べましたが、これが限界でした。 宜しくお願いします。 index.php <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("#exeBtn").click(function() { $.ajax({ url : "sendmail.php", type : "post", data : ({ message: $('#message').val(),{off:$('#exeBtn').val()}), datatype:'json', success: function( dispMsg(){ if('<?=$msg?>' != ''){ alert('<?=$msg?>'); } }}, }); }); }); //]]> </script> </head> <body> <form> <input id="message" type="hidden" name="message" value="EntryTitle"/> <input id="exeBtn" type="button" name="off" value="リンク切れ" /> </form> </body> </html> sendmail.php <?php header(’Content-Type: text/xml; charset=UTF-8′); $off=$_POST["off"]; $body = stripslashes($_POST['message']); if ($off != ""){ $to = "hogehoge@hogehoge.co.jp"; $subject = "報告"; $subject=mb_convert_encoding($subject,"JIS","utf-8"); $body=mb_convert_encoding($body,"JIS","utf-8"); $ret = mb_send_mail($to,$subject,$body); if($ret){ $msg = '送信しました'; }else{ $msg = '送信失敗しました'; } } } ?>
- ベストアンサー
- AJAX
- Jquery AJAXで、1ページに複数のフォームを設置するにはどうす
Jquery AJAXで、1ページに複数のフォームを設置するにはどうすればいいでしょうか？ 現在、以下のコードでメール送信をしてます。 1ページに複数のフォームがあり、押されたフォームボタンによって、そのフォームに対応した各value値をajaxの処理のところで受け取りたいです。 今のコードだと1つ目のフォームボタンを押すと正常にメールが送信されますが2つ目のフォームボタンを 押しても何も起こりません。 formにユニークなidをつけてsendmail.phpに変数を渡す前に、フォームボタンが押される度に ここの値をクリアしなければならないのかなと思っています。 >data : { message: $('#message').val(), exebtn:$('#exebtn').val()}, ----- index.php ------------------------- <略> <script type="text/javascript"> //<![CDATA[ $(function(){ $('#exebtn').click(function() { $.ajax({ type: "post", url : "sendmail.php", data : { message: $('#message').val(), exebtn:$('#exebtn').val()}, datatype:'text', success: function(data) { if(data != ''){ alert(data); }}, }); }); }); //]]> </script> </head> <body> <MTEntries> <form id="link" method="POST"> <input id="message" type="hidden" name="message" value="<$MTEntryTitle$>"/> <input id="exebtn" type="button" name="exebtn" value="リンク切れ"/> </form> </MTEntries> </body> </html> ----------------------------------------- ---- sendmail.php -------------------- <?php header('Content-Type: text/plain; charset=UTF-8'); $off=$_POST["exebtn"]; $message=$_POST["message"]; if ($off != ""){ $to = "hogehoge@hoge.jp"; $from = "hoge1@hoge.com"; $header = "From: $from\n"; $subject = "報告"; $subject = mb_convert_encoding($subject,"JIS","utf-8"); $message = mb_convert_encoding($message,"JIS","utf-8"); $ret = mb_send_mail($to,$subject,$message,$header); if($ret){ $msg = '送信しました'; }else{ $msg = '送信失敗しました'; } } echo $msg; ?> --------------------------------------------- ご教授、宜しくお願い致します。
- 締切済み
- AJAX
- jQueryでajax
ajax（jQuery使用）を使った以下のサンプルは、 セレクトボックスを選択すると、ボタンを表示するのですが、 そのボタンをクリックしても、アラート（This is success!）が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが 検知しないような感じですが、いったいどこが間違っているのかわかりません。 どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>
- ベストアンサー
- AJAX
- jQuery $.ajax JSON形式のPOST
jQuery $.ajax JSON形式のPOSTでフォーム内容を送信し、送信先のPHPでメール送信させるプログラムをかいているのですが、どうしても$.ajaxのerrorが呼び出される状況です。errorが呼び出されますが、PHPの方のメール送信はできております。 PHP側の出力がうまくいっていないのではないかと思いますが、原因がわかりません。どなたかご教授いただけないでしょうか？宜しくお願いします。 ---js--- $("#send").click(function(){ var NAME = $('#name').val(); var EMAIL = $('#email').val(); var TITLE = $('#titlel').val(); var COMMENT = $('#comment').val(); $.ajax({ url : "sendmail.php", dataType : "json", data : {name:NAME, email:EMAIL, title:TITLE, comment:COMMENT}, type : "post", success : function(data){ if(data != ''){ alert(data.result); } }, error : function(){ alert("通信に失敗しました。"); } }); }); ---sendmail.php--- if($_SERVER["REQUEST_METHOD"] != "POST"){ header("HTTP/1.0 404 Not Found"); return; }else{ //メール送信処理 （省略） $message = "送信完了メッセージ"; $result = array('result' => $message); echo json_encode($result); }
- ベストアンサー
- JavaScript
- jqueryのajax()内からグローバル配列に
jqueryのajax(){success: function()内からグローバル連想配列に値を格納したい。 jqueryのajax()でhtmlファイルを読み込み配列に格納。 その後他の関数で使いたいと考えていますが グローバル連想配列に格納できません。 success: function()内でさらに関数を定義もして見ましたが反応せず。。。 （プルダウンメニューを変更したら実行する関数） 以下ソースになります。 ----------------------------------------------------------- $(function() { objectarray = new Object(); $.ajax({ type: 'GET', url: 'hoge.html', dataType: 'html', success: function(data) { var text = []; $(data).each(function(i){ text = $(this).text().split("\n"); }); var alldata = $.grep(text, function(e){return e;});//空白やデータなしを削除 for(i=0; i<alldata.length; i++){ objectarray[i] = (alldata[i]); alert("forの中" + objectarray[i]);//取得できた } alert("forの外" + objectarray);//取得できた return objectarray;//あってもなくても変わらない。。。 }, error:function() { alert('問題がありました。htmlデータがありませんでした。'); } //return objectarray;←有効にするとjsが認識されなくなります。 }); alert("ajaxの外" + objectarray[0]);//何も表示されない、firebugでみるとobjectarrayには値が入っている。 }); ----------------------------------------------------------- 上記はnew Object()でやっておりますがnew Array()でも同じ結果でした。 回避策をご教授いただけましたら幸いです。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- jquery lightboxを設定しようとしていますが問題がでてます
jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか 以下のＨＴＭＬソースに足らない部分がありますか？ ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>
- ベストアンサー
- JavaScript
- Jquery.ajaxでHTML読み込み
現在、Jquery.ajaxを使って外部HTMLの読み込み処理を行い、処理完了後にフェードで表示させるということをしているのですが、読み込んだHTMLに貼り付けてある画像が読み込まれる前にHTMLが表示されてしまい、困っています。 Jquery.ajaxでは内包されている画像の監視まではできないのでしょうか？ 下記が今作っているコードです。 $contest.css({ "opacity": 0 }); $.ajax({ type: "GET", url: "hoge.html" dataType: "html", success: function(data) { $contest.html($(data).find("#hoge")); }, complete: function() { $contest.stop().animate({ "opacity": 1 }, 1000, "easeOutCubic"); } }); おわかりになる方、ご教授お願いします。
- 締切済み
- JavaScript
- jquery ajax 外部html 読み込み
現在、数年前にjquery(v1.4.3)を用いて制作したページの更新を行っており それに伴いjqueryも最新版(v1.11.1)への移行を試している最中なのですが ajaxの外部htmlを読み込む処理が実行されなくなり困っております。 旧バージョンとではメソッドの記述法が異なることは理解できておりますが 色々と書き換えてみたものの、以前のように動作させる事ができません。 以下がそれぞれの記述になりますが、もし問題にお気付きになられましたら ご指摘いただけますと幸いです。 jquery(v1.4.3): function loadAdd(obj){ $.ajax({ async: true, type: 'GET', url: tgtURL, dataType: 'html', cache: false, success: function(html){ var $div = $("#add"); $div.html(html); }, error: function(xhr, status, errorThrown){ alert("not found."); } }); } jquery(v1.11.1): function loadAdd(obj){ $.ajax({ async: true, type: 'GET', url: tgtURL, dataType: 'html', cache: false, }) .done(function(html){ var $div = $("#add"); $div.html(html); }) .fail(function(xhr, status, errorThrown){ alert("not found."); }); }
- ベストアンサー
- AJAX
- JQueryでAjax通信をキャンセルした時につて
JQueryでAjax通信時に、abort()でキャンセルを行うと通信はキャンセルになっているようですが、 サーバー側（Ajaxで呼ばれた処理）は、最後まで処理されてしまいます。 abort()を実行させた時に、サーバー側の処理まで中断させる方法はありますでしょうか？ 実行と中止は以下のような感じで書いています。 Ajax実行 arrXhr = $.ajax({ dataType: "json", type: "POST", url: "xxxxxxx.php", async: true, cache: false, data: sendData, success: function ( data ) { }, error: function ( XMLHttpRequest, textStatus, errorThrown ) { } }); 中止 xhr.abort();
- 締切済み
- AJAX
- jqueryを使いajaxで取得したデータをコールバック関数外で取得する方法
下記のようなスクリプトでjQueryを使い、ajaxでtextを取得します。 コールバック関数内では、もちろんtextが使えるのですが、コールバック関数外からはtextに一切アクセスできなくなります。 このようにグローバルからajaxで取得したデータは取得できないのでしょうか？ prototype.jsでも同じ結果です。 グローバルからの取得法、ご存知の方いらっしゃいましたらご教示頂ければと思います。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"><!-- $(document).ready(function (){ $.get("./sample.txt",function(text){ alert(text); // textが取得できる }); }); alert(text); // textが取得できない // --></script>
- 締切済み
- JavaScript
お礼
出来ました。ありがとうございます。