Ajax Updaterでドラッグアンドドロップの実装がうまくいかない

2023/08/08 08:16

このQ&Aのポイント

現在、PHP+Ajaxを使用して商品をドラッグアンドドロップで買い物かごに入れるプログラムを組んでいますが、実装がうまくいきません。
ドラッグアンドドロップの機能は問題なく実装されていますが、商品を買い物かごに入れる動作がうまくいかないようです。
index.phpのcartAdd関数が正しく動作していない可能性があります。

ベストアンサー

Ajax Updaterでドラッグアンドドロップ

2008/10/30 00:03

正確にはタイトルがおかしいのですが… 現在、商品をドラッグアンドドロップで買い物かごに入れ、入れられた商品はカート上に表示されるというプログラムをPHP+Ajaxで組んでいます。しかし、ドラッグアンドドロップの機能を実装するところまではいいのですが、それを買い物かごに入れるという動作がうまくいきません。以下にソースコードを掲載します。 <script type="text/javascript">Droppables.add('lwi_navi_2', {accept:'items',onDrop:function(element){new Ajax.Updater("cart20to40", "index.php", {"method": "get", "parameters": "action=cartAdd& id= ' + encodeURIComponent(element.id) + ' },hoverclass:'nowHover'})</script> index.phpは現在表示しているページです。（カレントファイル） ParamatersのactionのcartAddで読みだされるのは /*カートにドロップされたとき*/ function cartAdd(){ //関数内で使用する配列名を決定 $ArrayName = "cart" + 20 + "to" + 40; //送られてきたドロップエレメンツの名前を区切り文字で配列に収納 $itemName = explode('_',$POST['id']); //配列itemNoの数字部分をint型に変換し収納 $itemId = (int)$itemName(1); //ArrayNameで定義された配列の商品IDと一致する行に1を足す $_SESSION[$ArrayName][$itemId] ++; //この配列を元にカート作成関数を実行 makeCartItem($startAge,$endAge); var_dump($cart20to40); return; } これを実行しても、ページには何の変化もありませんでした。何か手掛かり及び根本的な考え方の間違えがあれば教えてください。

noname#73526

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

noname#84373

2008/10/30 10:34 回答No.1

筋違いならごめん。買い物籠に入れているデータは、Javascript側ですべて管理して確認時にまとめて送信しては？

質問者

お礼 2008/11/14 01:11

お礼・締切がとんでもなく遅くなってゴメンなさい。参考になりました。

関連するQ&A

テキスト1文字をドラッグ＆ドロップするには
<div id="from">あいうえお</div> <div id="to">かきくけこ</div> とあって、「あ」の文字をドラッグ＆ドロップで「か」と「き」の間に挿入させるようなことがしたいのですが、何か良い方法とかライブラリとかありますか？よろしくお願いします！ # <div>は2つとも任意の場所にあって、絶対位置指定ではありません。
- 締切済み
- AJAX
ajaxで取得した配列の取り扱い
こんにちは。 jqueryとｐｈｐを利用して、ajaxの練習をしているのですが、受け取った配列の扱いではまってしまっています。 javascript.js $.ajax({ type : "post", url : "http://localhost/*****.php", data : post_data, datatype : "json", success :function(data,datatype){return_data(data);}, error : error_ajax(), }); php側では、受け取ったデータに応じて多次元配列を作り、jsonに変換してechoしています。そして以下が成功時に実行する関数です。 function return_data(obj){ //配列topic以下を処理する関数 disp_topic(obj['topic']); //配列topic以下を処理する関数 dixp_tags(obj['tags']); } すると、obj['topic']が見つからないというエラーが出ます。 firebugsで見てみると、function　return_dataの引数objには、jqueryがjsonからjavascriptのオブジェクトへ変換処理した配列が渡っているようです。。引数objの値は以下のようになっていいます。 { "topic": 　[{"tagno":"27","tags":"***"}], "tags": 　[{"tagno":"27","tags":"****","count":"6"}, 　　{"tagno":"29","tags":"****","count":"4"}, {"tagno":"1","tags":"****","count":"3"}, {"tagno":"9","tags":"****","count":"1"}] ｝変数obj内のtopicに応じた配列と、tagsに応じた配列をそれぞれ取り出し、それぞれの関数で処理したいのですが、これを取り出すのにはどのようにしたらよいのでしょうか。 var array = obj['topic'];　などと散々やってみたのですが、２日間解決できず・・・。よろしくお願い申し上げます。
- ベストアンサー
- JavaScript
ajaxでエラー処理
お世話になります。 prototype.jsを使ってajaxのエラー処理を考えております。そこで質問なのですが、以下のソースで OK.phpでは正常に処理が行われ、 NG.phpでは強制的にonFailure処理を行わせたいと考えております。 PHP側(NG.php)で、操作出来ませんでしょうか？よろしくお願いいたします。 <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript">  </script> </head> <body> <input type="button" value="正常処理" onClick="ajax('OK.php')"><br> <input type="button" value="エラー処理" onClick="ajax('NG.php')"><br> <div id="result"></div> <div id="errMsg"></div> </body> </html>
- 締切済み
- JavaScript
JAVAアプレットでドラッグ＆ドロップ
JAVAは完全な初心者です。ここ何日かＪＡＶＡの本を読み漁ったり、インターネット探したりしているのですが、どうにも難しくて実現できていません。何をやりたいのかと言いますと、ローカルから画像をサーバに格納したいのですが、その際にブラウザにローカルからドラッグ＆ドロップして画像をサーバに格納したいのです。こんなイメージです。 http://www.radinks.com/upload/ ただ、JAVAアプレットだとローカルからのファイル操作はできなさそうなので、ファイルパスだけ渡してサーバ側でPHPでファイルをアップロードしようと考えております。 HTMLの画面上のボタンを押すとダイアログが出て来て、画像ファイルを選択すると、ローカルのファイルをサーバに格納する所までは出来ました。 Javascript、PHP、HTMLで作ってます。どのようにして実現させているかと申しますと。 AAA.phtml(抜粋） (1)入力画像というボタンを押下します。 <input name="submit[imageinput]" type="submit" class="button120" onclick="inputImage()" id="submit[imageinput]" value="入力画像" /> (2)押下するとinputImage()が走って function inputImage() { 　document.frmContent.userfile.click(); 　if(document.frmContent.userfile.value != ''){ 　　return; 　}else { 　　document.frmContent.userfile.value = ''; 　　return false; 　} } (3)ダイアログボックスが開き、ファイルを選択します。 <input name="userfile" id="userfile" type="file" size="0" /> (4)選択後、submitされてPHP側で、貰ったクライアントのパスからサーバのあるパスにファイルをコピーしています。そこにドラッグ＆ドロップの機能も実装させたい考えなのです。 http://www2s.biglobe.ne.jp/~dat/java/strikes/java.awt.dnd.html ここを参考にさせて貰ったのですが、アプレットにすると動きません。構想的には、ローカルからドラックし、HTML画面のJAVAアプレットにドロップします。すると、ドロップされたファイルパスがファイル選択（userfile）に渡り、 submitされて、PHPでコピーという流れにしたいのです。何か良い方法は無いでしょうか、初心者なので、サンプルを交えてご教示願えると大変助かります。初心者なので言ってることが既に間違っているかもしれませんが、その際はご指摘下さい。宜しくお願い致します。
- 締切済み
- Java
ajaxが難しいです。
１ if (xhr.status === 200) { result.textContent = xhr.responseText; の部分がわからないのですが自分で作った変数resultの中に通信に両方成功した場合サーバ側のPHPが生成したDOM要素を代入するという事をやっているのでしょうか？その結果、処理結果を表記するhtml<div id="result"></div>の中に、代入された中身が表記されるという事ですか？２下記のloadstartとloadなどう違うのでしょうか？ xhr.addEventListener('loadstart', function() { // 画面に通信中と表記 result.textContent = '通信中...'; }, false); // 画面に通信中と表記 xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); 下記ソース・ <?php sleep(3); print('こんにちは、'.$_REQUEST['name'].'さん！'); print('こんにちは、'.$_REQUEST['name2'].'さん！'); ?> ・ <!DOCTYPE html> <html> <head> <meta name="robots" content="noindex,noimageindex,nofollow"> <meta charset="UTF-8" /> <title>JavaScript本格入門</title> </head> <body> <form> <label for="name">名前：</label> <input id="name" type="text" name="name" size="15" /> <input id="btn" type="button" name="submit" value="送信" /> <label for="name">名前2：</label> <input id="name2" type="text" name="name2" size="15" /> <input id="btn2" type="button" name="submit" value="送信" /> </form> <div id="result"></div> <div id="result2"></div> <script src="scripts/hello_ajax.js"></script> </body> </html> // 非同期通信を行うための準備 document.addEventListener('DOMContentLoaded', function() { document.getElementById('btn').addEventListener('click', function() { var result = document.getElementById('result'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = xhr.responseText; } else { result.textContent = 'サーバーエラーが発生しました。'; } } else { result.textContent = '通信中...'; } }; /* xhr.addEventListener('loadstart', function() { result.textContent = '通信中...'; }, false); xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); xhr.addEventListener('error', function() { result.textContent = 'サーバーエラーが発生しました。'; }, false); */ xhr.open('GET', 'hello_ajax.php?name=' + encodeURIComponent(document.getElementById('name').value), true); xhr.send(null); }, false); document.getElementById('btn2').addEventListener('click', function() { var result = document.getElementById('result2'); var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { result.textContent = xhr.responseText; } else { result.textContent = 'サーバーエラーが発生しました。'; } } else { result.textContent = '通信中...'; } }; /* xhr.addEventListener('loadstart', function() { result.textContent = '通信中...'; }, false); xhr.addEventListener('load', function() { result.textContent = xhr.responseText; }, false); xhr.addEventListener('error', function() { result.textContent = 'サーバーエラーが発生しました。'; }, false); */ xhr.open('GET', 'hello_ajax.php?name2=' + encodeURIComponent(document.getElementById('name2').value), true); xhr.send(null); }, false); }, false); 最後に、クリックした際にJSでDOM生成して、新たな要素を表記することとajaxは、閲覧者からすると同じように見えるのですが、違いは、ajaxはブラウザ上で生成したのではなく、サーバ側のPHPが生成したDOM要素をダウンロードして代入するという、違いでしょうか？つまりサーバ側でDOMを作ったらajax、ブラウザ上で作ったらただのDOM生成という事ですか？
- ベストアンサー
- JavaScript
IEでAjax
現在、以下のソースをもとにAjaxのテストをしているのですが FireFoxだと正常に動作されますが、IE8だと無反応です。もちろんJavaScriptは有効にしています。この原因はどこにあるのでしょうか？ ■test.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitiona..."> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> <script type="text/javascript"> <!-- var ajax = new XMLHttpRequest(); function makeTable(keyword) { 　ajax.onload = function() { 　　document.getElementById('layerTable').innerHTML = ajax.responseText; 　} 　ajax.open('GET', 'sample.php?keyword=' + keyword, true); 　ajax.send(null); } </script> </head> <body> <h1>Ajaxのテスト</h1> <form id="formMain" name="formMain" method="post" action=""> <p>キーワードを入力して、表示するボタンをクリックしてください。</p> <p> <input type="text" name="keyword" size="35"> <input name="buttonMake" type="button" id="buttonMake" value="表示する" onClick="makeTable(this.form.keyword.value)" /> </p> </form> <div id="layerTable">ここに応答が表示されます</div> </body> </html> ■sample.php <?php $keyword = $_GET['keyword']; $doc = "<b>Ajaxのテストです</b><br />"; $doc .= "キーワードは{$keyword}"; print($doc); ?>
- ベストアンサー
- 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
Ajaxのエンコードで
私はshift_JISで作成したCGIのページがあるのですが、 Ajaxを導入しようとしたときに、Ajaxというか Javascriptでは、utf-8しか認識しないととあるサイトに書いてあったのですが、そのCGIのページをphpに変更するにはものすごく多大な時間が必要になってしまうんですが、CGIをutf-8仕様にするのも大変です AjaxでShift_JISに変換するような事はできませんでしょうか？ http://javascriptist.net/ref_prototype/ajax.periodicalupdater.html のサイトに乗っている <script type="text/javascript" src="/js/prototype.js"></script> <script type="text/javascript"> var myajax; function execute() { myajax = new Ajax.PeriodicalUpdater( "container", "./member.cgi", { "method": "get", "parameters": "id=$id", frequency: 5, // 5秒ごとに実行 onSuccess: function(request) { // 成功時の処理を記述 // alert('成功しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); // ↓IEでもキャッシュを読み込まずに毎回リモート接続を実行するためのコード(パラメータの書き換え) var str = myajax.options.parameters; var hash = str.parseQuery(); hash["ajax_request_id"] = Math.random(); hash = $H(hash); myajax.options.parameters = hash.toQueryString(); }, onComplete: function(request) { // 完了時の処理を記述 // alert('読み込みが完了しました'); // jsonの値を処理する場合↓↓ // var json; // eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> を使用して自動更新をしようと思っているのですが
- ベストアンサー
- JavaScript
Ajaxで画像の削除
Ajaxで画像を削除しようといろいろ試行錯誤しているのですが、最終的なところで詰まっています。 $(function(){ $("input:button").click(function(){ //クリックされた画像のidを取得 var id = $(this).attr("id"); 　　alert(id); //削除ボタンの無効化 $(this).attr("disabled",true); //idをサーバに送信（PHP側で削除処理）して結果を受け取る $.ajax({ url : "/test/delete_image", dataType : "json", data : {id:id}, type : "post", success : function(data){ if(data.id){ alert(data.id); $("#tblh img#image"+data.id).attr("src","/images/noimage.gif"); } }, error : function(){ alert("通信に失敗しました。"); } }); }); }); codeigniterというフレームワークを利用しPHP側では画像をディレクトリから削除しています。(こちらの動作は問題なし) <?php class Delete_image extends CI_Controller { function __construct(){ // Model クラスのコンストラクタを呼び出す parent::__construct(); $this->load->model('array_constant'); $this->load->helper(array('form', 'url')); $this->load->library('form_validation'); $this->load->library('form_ex'); } function index(){ if(!$this->input->post("id")){ return false; }else{ 　　　　　　　　　　　//画像の削除とDBの画像名称を更新 $arr = array('id' => $this->input->post("id")); } echo json_encode($arr); } } としています。画像の削除とDBの画像名称は更新されてるのでPHP側は問題ないようです。 jsonの値を受け取って画像を置き換えようとしているのですが、エラー側のほうに判断されてしまいます。「alert("通信に失敗しました。");」となります。なぜか分からず困っています。教えてください。
- ベストアンサー
- AJAX
.netのAjaxでドラッグアンドドロップ
AtlasがAjaxControlToolkitに包含されるようになったときいておりますが、 AjaxControlToolkitを使って、web上でドラッグアンドドロップを実装しようとしています。間違えないようにコメントしておきますが、ここで申しております、ドラッグアンドドロップはコントロールをマウスで移動できるようにすることです。 iGoogleのようなコントロールの移動です。しかしながら、なかなか参考サイトなどがみつからず、実装できておりません。 asp.net2.0でドラッグアンドドロップの実装方法はどうしたらいいのでしょうか？
- ベストアンサー
- Microsoft ASP