AJAX

最初にお店付近を表示させておいて、 ボタンをタップで、現在地からの道順ナビが HTML上に表示される形が理想です。 上記をjquery mobileを使わずに、 HTML5のみで作成ってできますか？ 無理な場合、jquery mobileを使えば作成できますか？

お世話になります。 現在、php等でwebシステムを作成しております。 ローカルネットワーク内にサーバをたて、そこに接続して開発を行っているのですが、javascript処理やAjax処理を多数使用しているページを何回か読み込むと、cssが崩れ、Ajax関連のレスポンスがないといったエラーが頻発していしまいます。 Fiddlerでエラーを確認してみたのですが、502エラーとなっており、画像読み込み時のでエラーが多いようです。 また、直接関係するかどうかはわからないのですが、「通常、各ソケット アドレスに対してプロトコル、ネットワーク アドレス、またはポートのどれか 1 つのみを使用できます。」といったエラーが出力されていました。 開発環境は以下の通りです。 Centos5.5 apche2.2.3 PHP5.3.5 考えられることは調べてみたのですが、手詰まりしていました。 対応策等おわかりの方がいらっしゃいましたら、ご教授の程をお願いしたいと思います。 お手数おかけ致しますが、宜しくお願い致します。

http://code.google.com/p/company-project/source/browse/trunk/css/sexylightbox.v2.3.jquery.js?r=4 上記のSexyLightboxというプラグインを AJAXで読み込んだ先で使用したいと思っているのですが、 普通に画像リンクに飛んでしまい、うまくいきません。 どなたかご教授いただければと思います。 よろしくお願いいたします。

いつもこちらでお世話になっています。 jQuery初心者です。 また、お知恵を拝借したく、お願いします。 以下のようなHTMLがあります。 やりたい事は <div class="info">の中の要素全て(ul以下)を <div class="hoge">の中にも表示したいのです。 ですが、以下のスクリプトのように書くと、 今度は、<div class="info">の中の要素が表示されなくなり、 <div class="hoge">の中に表示されました。 <div class="info">の中の要素は 表示のままで、重複して<div class="hoge">の中に 表示させる方法ってありますか？ ▼HTML ------------------- <div class="hoge"></div> ～別要素(省略)～ <div class="info"> 　<ul> 　　<li>項目1</li> 　　<li>項目2</li> 　</ul> </div> ▼Script ------------------- var contents = $("div.info ul"); $("div.hoge").html(contents); ------------------- 多分、基本的な事なのかもですが、 1つの要素を重複して表示できる方法がありましたら 詳しい方、ご教授ください。 どうぞ宜しくお願いいたします。

今スマートフォンのトップページのロゴに自分のサイトのURLをリンクしているのですが、【error loading page】とでてリンク先に飛ぶ事が出来ません。 たとえば【a.com】というドメインを持ってたとして、ナビ部分のHOMEに【a.com】をリンクしてあるボタンを置いたとします。 それを押すと、【error loading page】と表示されてトップページに飛ぶことが出来ません。 どうすればこのエラーは解消されますでしょうか？？

JSONデータをeval後、$.each(jQuery)を通すと、 順番が入れ変わってしまうのですが、どういう原因が想定されるでしょうか？ ＜JSON＞ data: { "5":{"id":"5","name":"5","menu1":"24"}, "9":{"id":"9","name":"9","menu1":"12"} "1":{"id":"1","name":"1","menu1":"4"}, "2":{"id":"2","name":"2","menu1":"2"}, } ※「menu1」降順で予めソート ＜コード＞ $.get("data.php?"+○○, function(data){ var list = eval( '(' + data + ')' ); $.each(list,function(i) { 上記コードを通すと、 Chromeで見た際、データがid順に並び変わります。 (FireFoxだと、元の順番通りです) ＜質問＞ 「eval」もしくは「$.each」を利用すると、 データの順番が入れ替わることがあるのでしょうか？ 入れ替わらないためには、どうすれば良いのでしょうか？

Ajax・jQueryで日本語をGETするとき、IEで文字化けします。 (Firefox,chromeでは文字化けは起こりません。IE6/7/8で確認すると文字化けします） どのようにしたら文字化けが起こらなくなるか教えていただければと思います。 環境 PHP:5.1.6 サーバー・HTMLの文字コードはUTF-8 下記のようなリンクを作り、「jquery.url.js」でパラメータを取得しています。 <a href="./test.php?keyword=テスト&cate=1"> （実際には下記のソースに示しますが、テストの文字はurlencordしています。） 【javascript部分】 <script type="text/javascript" src="jquery.url.js"></script> <script type="text/javascript"> $().ready ( function() { $('#sample-get').find('a').click ( function() { var url = $.url ( $(this).attr('href') ); $.ajax ({ type: 'GET', url: 'send.php', cache: false, data: url.attr ( 'query' ), success: function ( data, dataType ) { $('#test').html ( data ); }, error: function ( XMLHttpRequest, textStatus, errorThrown ) { this; alert('Error : ' + errorThrown); } }); return false; }); 【HTML(PHP)部分】 $keyword='テスト'; $keyword=urlencord($keyword);//urlエンコード echo<<<EOF <div id="sample-get"> <a href="./test.php?keyword=$keyword&cate=1"><img src="images/sample1.png" alt="sample1" height="200" width="200"></a> </div> EOF; 【PHP部分(send.php)】 <?php echo $_GET['keyword']; echo urldecord($_GET['keyword']); echo $_GET['cate']; ?>

画像をクリックしたときにjQuery,Ajaxを利用してGET/POSTをしたいです。 POSTとGETは良く使うので今回両方の流れを知りたいと思います。 PHPではPOST、GETは使うことができます。javascript,jQueryはちょっと触ったことのある程度です。 フォームに値を入力してjQueryとAjaxでPOSTでデータを送るのは下記ホームページを参考にしてみたら成功しました。 http://webcake.no003.info/webdesign/jquery-ajax-php-post-sample.html 今回は下記のような複数のパラメータを送信したいと思います。 画像Aをクリックした時にkeyword=aaaa,cate=1 画像Bをクリックした時にkeyword=bbbb,cate=2 画像Cをクリックした時にkeyword=cccc,cate=3 今までPHPでGETを使っていた時のHTML部分です↓ <a href="index.php?keyword=aaaa&cate=1"><img src="images/a.jpg"></a> <a href="index.php?keyword=bbbb&cate=2"><img src="images/b.jpg"></a> <a href="index.php?keyword=cccc&cate=3"><img src="images/c.jpg"></a> 「send.phpファイル」 <?php //POSTでデータが送られた場合 echo $_POST['keyword'].'<br>'; echo $_POST['cate'].'<br>'; //GETでデータが送られた場合 echo $_GET['keyword'].'<br>'; echo $_GET['cate'].'<br>'; ?> ==GET================================================================ （HTML部分） <a href="index.php?keyword=aaaa&cate=1"><img src="images/a.jpg"></a> の記載方法だと、クリックしたときにアドレスバーにアドレスが入力されるのでページが切り替わってしまいAjaxにならないので違う形にする必要があると思いますがどのようにkeyword,cateのパラメータを持たせればよいのでしょうか？ または、この形のままで良く、リンクした時にページが飛ばないような処理方法があるのでしょうか？（またはAjaxではあまりGETは使わないのでしょうか？） 上記に記載した、POSTの参考例のソースを記載します。 GETの場合にどのように変えたらよいのでしょうか。 $(document).ready(function() { var data = {request : $('#request').val()};//GETで複数値対応に書き換えが必要。 $.ajax({ type: "GET", url: "send.php", data: data, success: function(data, dataType) { $( '#test' ) . html( data ); },error: function(XMLHttpRequest, textStatus, errorThrown) { this; alert('Error : ' + errorThrown); } }); }); ==POST================================================================ （HTML部分） formを使う形になると思いますが、どのような書き方が良いのか教えて下さい。 画像を使うと下記のようになるとは思いますが、A,B,Cそれぞれにkeyword,cateの情報をどのように持たせておいたらよいのかがわかりません。 <form> <button type="submit" name="" value="*****"><img src="sample.gif"></button> </form> （jQuery部分） $(document).ready(function() { var data = {request : $('#request').val()};//POSTで複数値対応に書き換えが必要。 $.ajax({ type: "POST", url: "send.php", data: data, success: function(data, dataType) { $( '#test' ) . html( data ); },error: function(XMLHttpRequest, textStatus, errorThrown) { this; alert('Error : ' + errorThrown); } }); }); 以上、よろしくお願い致します。

スマホサイトの作成をしています。 やりたい事は、タイトル通りで jQueryを使って、 あるブロック要素の背景画像のURLを取得し、 そのデータをimgのsrc属性に入れて imgとして表示したいと考えております。 補足としいて ・imgは、同じブロック要素内に表示します。 ・取得するbackground-imageは絶対パスで書かれているものです。 スクリプトは以下のように書きました。 ---------------------------------------- var bgImg = $("#box").css("background-image"); var bgImgFile = bgImg.substring(5, bgImg.length - 2); $("#box").prepend("<img src='" + bgImgFile + "'>"); //最終的に#boxの背景画像をなくす処理 $("#box").css("background-image","none"); ---------------------------------------- ですが、bgImgの値がブラウザによって違うのです。 alert(bgImg)で確認してみると、下記のようにalert表示されました。 ●Firefoxでは　 　url("http://****.jpg") ●ios(iphone)では 　url(http://***.jpg)　　← " "が付いていない これにより、結果、bgImgFileの値が変わってしまい、 ios(iphone)では背景画像を表示できません。 もし可能であれば、これの原因や、 他にもし方法があれば教えて下さると助かります。 詳しい方、どうぞ宜しくお願いいたします。

Twitterのクライアントを自作しています。 リアルタイム更新をjQueryで行いたいのですが、あまり参考になるサイトがなく困っています。 「ここを見れば簡単にできる方法載ってるよ」または「こういう方法があるよ」というのがあれば是非教えて下さい。 よろしくお願いいたします。

jQuery.fn.hashtag = function () { return this.each( function() { var re = /(#([A-Za-z0-9_]+))/g $(this).html( $(this).html().replace( re, '<a href="http://twitter.com/#!/search?q=$1" target="_blank">$1</a>' ) ); }); } ハッシュタグ例：#test 結果：<a href="http://twitter.com/#!/search?q=#test" target="_blank">#test</a> 現在、上記の形でTwitterから得たテキストの中からハッシュタグを検出し、リンクに置き換えています。 しかしハッシュタグの場合は実際は、(例:～/search?q=#test)だと読み込めず、(例:～/search?q=%23test)としないとハッシュタグのリンクへは飛んでくれません。 なのでこれを上記の記述に加筆する形で#から%23に置き換えたいのですがいい方法はないでしょうか？ よろしくお願いいたします。

ブロック要素がありまして（下記<div id="box">boxの中身</div>） そのブロック要素の背景画像(背景は動的に生成)を 別の画像に変えたいと思っています。 ※現行のPCサイトのHTMLをいじらずに、スマホ対応しています 背景画像としては、 現在の背景画像⇒haikei.jpg 新しい背景画像⇒haikei_smp.jpg ↑こんな感じで ファイル名の「haikei」の部分は動的に生成しているため可変ですが、 もとの画像に「_smp」が付く画像ファイルを用意して、 対応したい考えています。 特にイベントはなく、loadしたら読み込む予定でいて 以下のように書いたのですが、 PC上のシミュレーターではうまくいくものの、 実際のスマートフォンで確認したら実行できませんでした。 PC上ではエラーもなかったのですが、 背景画像が変わらないといった不具合です。 HTML ---------------------- <div id="box">boxの中身</div> js ----------------------- $(function(){ 　//mainbgに現在の背景画像を格納 　var mainbg = $("#box").css("background-image") 　 　//mainbgを(".")で分割し、bgImgに格納 　bgImg = mainbg.split("."); 　var img01 = bgImg[0]; 　var img02 = bgImg[1]; 　//「_smp」を付与し、smp_mainbgに格納 　var smp_mainbg = img01 + "_smp." + img02 ; 　//jQueryでbackground-imageを変更操作 　$("#box").css("background-image" , smp_mainbg); }); そもそも、この書き方がよいのか分かりませんが もっとスマートの書き方がありましたら 別の方法でも、どうかご教授ください。 どうぞ宜しくお願いいたします。

Windowsでapacheサーバーをローカル内だけで利用する場合、 XMLHttpRequest()でステータスコードは必ず0になるのでしょうか。 0にならない方法はないのでしょうか。

以下ソースがあります。 ●main.js $(function(){ jQuery.ajax({ url : "./news.txt", type : "get", success : function(data){ alert(data); } }); }); ●news.txt test　と記述しています。 ●index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>jQuery Sample</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <h1>jQueryサンプル</h1> <p>非同期通信の処理</p> </body> </html> この三つのファイルを同じ階層に置き、index.htmlで実行したところ 非同期通信(testのアラート)が表示されました。 そこで、 index.htmlファイルの左側にメニューを設けて、 メニューをクリックすると、画像のみが切り替わるという 内容で、jqueryによるajax実装を行いたいのです。 (左のメニュー1がクリックされれば、リンゴの画像。 　メニュー2がクリックされれば、みかんの画像等) ulタグと、jquery関数にどういう仕掛けを入れると 果物画像の入れ替えが行えるでしょうか。 ご教授お願いします。

スマートフォンサイト制作中です。 やりたい事は 横並びにしている2種類のリスト項目数を jQueryを使って、揃えたいって事です。 以下のようなリストがあって、 2種類のulを横並びにしています。 （2列のテーブルみたいな感じ） <ul class="column1"> <li>あいう</li> <li>かきく</li> <li>さしす</li> </ul> <ul class="column2"> <li>アイウ</li> <li>カキク</li> <li>サシス</li> <li>タチツ</li> </ul> 例として、上記の場合、class="column2"の方が<li>が一つ多いので それに合わせてclass="column１"に<li>を追加して(追加した要素の中身はブランクで)、 横並びを揃えたいのです。 ※要素の中身が2行になったりしてズレることはないです。 考え方として、おそらく class="column1"とclass="column2"のそれぞれのエレメント数を size()で取得して そのエレメント数を比較して、大きい個数に合わせて、 足りない分を、足りない<ul>要素内にappend()を使って挿入でもするのかな？？ …って思っているのですが どのように書けばよいのか、やっぱり分からないのです。 ※ちなみにHTMLの、この<ul><li>リストは動的に生成しています。 現行のPCサイトのHTMLをいじらずに スマホ対応しているので、このリストを使った横並びを変えることは出来ないのです。 どなたか詳しい方、どうかご教授ください。 どうぞ宜しくお願いいたします。

apache2でAjaxの試しとして下記スクリプトだけのhtmlファイル(http://localhost/newfile.html)を 作り動作を確認してみました（空白部分は全角になっています）。すると最後の部分の alert("Error:　readyState　code　is　"　+　request.readyState);で 2→アラートのOKを押す→一瞬1になり3→アラートのOKを押す→一瞬1になり0→アラートのOKを押すと1になりました。そしてコンソールには ------------------------------------------------ GET　http://localhost/a.php　200　OK　60ms Component　returned　failure　code:　0x80004005　(NS_ERROR_FAILURE) request.send(url); ------------------------------------------------ といったエラー表示がでてしまいます。 また、request.openで渡すURLの「http://localhost/a.php」を「a.php」にすると、 一瞬1になり2→アラートのOKを押す→一瞬1になり0→アラートのOKを押すと1 になります。なぜ4にならないのでしょうか。 request.statusは全部0になっているようです。 <script　language="javascript"　type="text/javascript"> var　request　=　false; try　{ 　　request　=　new　XMLHttpRequest(); }　catch　(trymicrosoft)　{ 　　try　{ 　　　　request　=　new　ActiveXObject("Msxml2.XMLHTTP"); 　　}　catch　(othermicrosoft)　{ 　　　　try　{ 　　　　　　request　=　new　ActiveXObject("Microsoft.XMLHTTP"); 　　　　}　catch　(failed)　{ 　　　　　　request　=　false; 　　　　} 　　} } if　(!request) 　　alert("Error　initializing　XMLHttpRequest!"); window.onload　=　getCustomerInfo; function　getCustomerInfo()　{ var　url　=　"test"; request.open("GET",　"http://localhost/a.php",　true); request.onreadystatechange　=　updatePage; request.send(url); } function　updatePage()　{ if　(request.readyState　==　4){ if(request.status　==　200){ 　　 　var　response　=　request.responseText; 　　　　　　　　　document.write(response); }else　 if　(request.status　==　404){ 　　alert("Request　URL　does　not　exist"); 　　　　 }else{ 　　 　　alert("Error:　status　code　is　"　+　request.status); } }else{ 　　alert("Error:　readyState　code　is　"　+　request.readyState); } } </script>

現在、下記のコードで画像を読み込んで処理をしているのですが、 画像の読み込みを待たずに、画像のリサイズ処理が実行されて画像が表示されない 現象に陥りました。 読み込みが終わった画像から処理する方法を ご教授ください。 よろしくお願いいたします。 $.each(json.img,function(){ $('<img/>').attr('src',this).appendTo(images); }); preview.append(images); //この後にリサイズ処理

下記のコードのようにテキストエリアが変わったら処理を 実行したいのですが、keyup changeを指定すると 処理が２回実行されてしまいます。 テキストエリアが変化したら、１度づつ処理させるには どのようにしたらいいでしょうか？ ご教授の程、よろしくお願いいたします。 $(function(){ $('textarea').bind('keyup change',function(){ alert('処理'); }); });

//$(function(){ $("tr").click(function (){ this.style.backgroundColor = "yellow"; }); //}); jQueryで$(function())があってもなくても同じ動作をします。 どういった意味があるのでしょうか？

２日程、色々と試したのですが、どうしても自分で解決できそうにないので お世話になりたいと思い質問させて頂きました。 XMLHttpRequestを使用し、サーバーと非同期通信を行っているのですが ChromeとFireFoxの場合、戻り値のstatusが0になり、サーバーからのレスポンスデータを 取得する事ができません。IEでは7 ～ 9まで正常に動作する事を確認しております。 (環境) クライアントOS：Windows7 Professinal サーバーOS：Windows7 Professinal Webサーバー：IIS7.5 ブラウザ：Google Chrome 16.0.912.77 m, FireFox 10.0.1 (クライアント側プログラム) function requestMain(param) { 　　// サーバー名はxxxにさせて頂きました。 　　var url = "http://xxx.xxx.xxx.xxx/app/xhr.cgi?" + param; 　　var obj = createHttpRequest(); 　　obj.open("GET", url, true); 　　obj.setRequestHeader("If-Modified-Since", "Thu, 01 Jun 1970 00:00:00 GMT"); 　　ojb.onreadystatechange = function() 　　{ 　　　if (obj.readyState==4) 　　　{ 　　　　　alert(obj.status);　　　　　　　// ← ここが０に。IEだと200が返ってきます。 　　　　　alert(obj.responseText);　　　// ← IEの場合予期したデータがきます。Chrome/FF 　　　　　　　　　　　　　　　　　　　　　　　// ともに空です。 　　　} 　　} 　　httpoj.send(""); } function createHttpRequest() { 　　if(window.ActiveXObject) 　　{ 　　　try 　　　{ 　　　　return new ActiveXObject("Msxml2.XMLHTTP"); 　　　} 　　　catch (e) 　　　{ 　　　　try 　　　　{ 　　　　　　return new ActiveXObject("Microsoft.XMLHTTP"); 　　　　} 　　　　catch (e2) 　　　　{ 　　　　　return null; 　　　　} 　　} 　} 　else if(window.XMLHttpRequest) 　{ 　　return new XMLHttpRequest(); 　} } (サーバー側) static void main(string[] args) { 　　string rtnStr = "HTTP/1.0 200 OK\n"; 　　rtnStr += "<head>\n"; 　　rtnStr += "Access-Control-Allow-Origin:*\n" // ← クロスドメイン対策？？？ 　　rtnStr += "Content-Type: text/html; charset=UTF-8;\n; 　　rtnStr += "</head>\n\n"; 　　rtnStr += "<body>test is</body>"; 　　Console.WriteLine(rtnStr); } 試しに、prototype.jsのAjax.Requestを使用しても結果は同じでした。 後、プログラムでなく、ブラウザーのURL覧からCGIをコールするとtest isが表示されます。 ※ CGIはC#で書いています。ASP.NETがあるので意味がないのですが すみません。＾＾； 過去にも似たような質問をされた方がいらっしゃったのですが 結局クロスドメインの問題じゃない？とか回答がついてないとかで 答えがわかりませんでした。英語サイトにはそれなりに情報があるみたいですが 読めないのでよくわかりません ；＿； (調べろと言われればそれまでなのですが。。。) 組み込み系や、C/S・スタンドアロンでのWindowsアプリはそれなりの経験を 持っているのですが、Web系は今回初めてで、やり始めて丁度10日になります。 ですので、トンチンカンなご質問をしているかもわかりませんが、 どうぞよろしくお願いいたします。 P.S 最近html, css, javascriptがお試し程度にわかり４、５ページ画面遷移した 簡単なクライアント側アプリを作れる程度です。