- 締切済み
PHPからJavaScriptへのデータ渡しについて
はじめまして。CodeIgniter初心者です。 現在、PHP(CodeIgniter)のコントローラからビューを呼び出し、 PHPからJavaScriptへのデータ渡しの部分で困っております。 大変恐縮ですが、アドバイスいただければ幸いです。 何卒宜しくお願い申し上げます。 下記はコントローラから表示させようとしているビュー（GoogleAPI.php）です。 Google APIで用意されたJavaScript関数にPHPからデータ（<?=$name?>）を セットしてみましたが、本来のデータ（Root）を渡すことができません。 （現状、Google APIのグラフ表示はされておりますが、誤ったデータ（Array）が表示されてしまいます。） -------------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset="utf-8" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["orgchart"]}); // Set callback to run when API is loaded google.setOnLoadCallback(drawVisualization); // Called when the Visualization API is loaded. function drawVisualization() { // Create and populate a data table. var data = new google.visualization.DataTable(); data.addColumn('string', 'Name'); data.addColumn('string', 'Parent'); data.addRows(10); // Add more data rows and cells here var row = 0; addRow(data, row++, "Apples", "<?=$name?>"); addRow(data, row++, "Braeburn", "Apples"); addRow(data, row++, "Cox", "Apples"); addRow(data, row++, "Golden Delicious", "Apples"); addRow(data, row++, "English", "Golden Delicious"); addRow(data, row++, "French", "Golden Delicious"); addRow(data, row++, "Bananas", "<?=$name?>"); addRow(data, row++, "Caribbean", "Bananas"); addRow(data, row++, "Central American", "Bananas"); addRow(data, row++, "Clementines", "<?=$name?>"); var orgchart = new google.visualization.OrgChart( document.getElementById('orgchartdiv')); orgchart.draw(data, { selectionColor: 'yellow' }); } // Utility function to create new rows in the Datatable function addRow(data, rownum, name, parent) { data.setCell(rownum, 0, name); data.setCell(rownum, 1, parent); } </script> </head> <body> <div id="orgchartdiv" ></div> </body> </html> --------------------------------------------------------------------------
- yhina999
- お礼率83% (5/6)
- PHP
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- bis_love
- ベストアンサー率80% (4/5)
連投失礼します。 <? echo $name ?>ではなく、<?php echo $name ?>でした。
- bis_love
- ベストアンサー率80% (4/5)
もしかしたら見当違いかもしれませんが・・ <?=$name?>は短縮型のタグですが、もしかしたらphp.iniでoffに設定されてませんか？ 一度<? echo $name?>と書いてみて、動作確認してみてください。 もしそれで動くようなら、 php.iniのshort_open_tagというパラメータがoffになっていないか確認してみてください。
関連するQ&A
- ＰＨＰとＪａｖａｓｃｒｉｐｔの連携について
ＰＨＰ・Ｊａｖａｓｃｒｉｐｔの初心者です。 ＰＨＰで設定された、配列のデータをＪａｖａｓｃｒｉｐｔで作成した関数の渡したいのですが どうすればいいのでしょうか？ 以下にサンプルを作成したのですが ＰＨＰで設定した、配列 $name が Ｊａｖａｓｃｒｉｐｔに渡せません。 何が悪いのですか？ 教えてください。 よろしくお願いします。 -sample.php- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <!-- CSS: implied media="all" --> <link type="text/css" rel="stylesheet" href="css/websyslogin.css" /> <!-- JavaScript loading --> <script src="js/websysdebug.js"></script> <script type="text/javascript"> function sysdebug( ss ){ alert( "Login -> "+ss ); } </script> <!-- タイトル --> <title>Vware Web System(PHP) </title> </head> <body> <?php $name = array(); $name[0] = "ABC"; $name[1] = "BCA"; ?> <input type="button" value="TEST" name="debug" id="debug" onclick="sysdebug(' <?php print $name[0]; ?> ');" /> <script type="text/javascript"> for( i=0;i< 2;i++ ) { ss = ' <?php print $name['+i+']; ?> '; alert( ss ); } </script> </body> </html>
- ベストアンサー
- PHP
- php javascript
今、googlemapsに天気情報を読み込ませて天気によって場所を表示させたいと思っております。そこで天気情報をhttp://web1.aaacafe.ne.jp/~tenki/tenki.xml をMagpieRSSを用いて、 http://kenbo.net/tenki/tenki_rss.html を参考にし取得しました。 また↓のサイトを参考にし http://www.nob.gr.jp/tips/tips.html 天気の部分だけを抜き出すことが出来るようになりました。 tenki_rss.php↓ <?php … … $wether = split("<br />", $description); switch($wether[1]){ case "晴": ☆☆☆☆☆☆☆☆☆ break; case "雨": ☆☆☆☆☆☆☆☆☆ ・・・・・・ } … … ?> 上記の☆部分が実行されたらメインのgooglemapのhtml↓ test.html↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> … <script src="http://maps.google.com/maps?file=api&v=2&key=キー" type="text/javascript"></script> … … <script type="text/javascript"> //<![CDATA[ function test(){ … } … … //]]> </script> </body> </html> のfunction test()に飛ばせる？ような方法はありますでしょうか？ メインのhtmlはjavascriptで天気情報はPHPで作っています。 プログラム初心者なんであまり説明がうまくなくすみませんが分かる方がいらっしゃいましたらご教授の方よろしくお願いします。
- ベストアンサー
- PHP
- Javascriptの変数の中に変数を代入するには
Google chart というAPIがあります。これを利用して株価Chartを作ります。 https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart 末尾にGoogle Chartのソースを記載していますが このvar data内の ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] の部分を変更することによりローソクチャートが引けます。 一方、 <script type="text/javascript"> var chart; chart = "<div id='chart'></div>"; document.write("" + chart + ""); </script> と記載すると ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] のような株価変数が取得できるjavascriptを作成しました。 この2つを組み合わせると、株価チャートが引けることとなります。 ************************ 現在の苦境状況 ************************ Google chart APIに、下記のように「document.write("" + chart + ""); または "" + chart + "";または + chart + ;」を代入してみたのですが、チャートは表示されません。 変数の中に変数を入れたことが原因と思いますが、どのようにすればいいかアドバイス願います。 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> var chart; chart = "<div id='chart'></div>"; google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ document.write("" + chart + ""); ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> ************************ GoogleChart ************************ <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div>
- ベストアンサー
- JavaScript
- JavaScriptが実装できない
初めまして。 Google Maps APIを使ってwebページ上でgoogle mapsを表示させようと思い htmlファイルとjavascriptファイルを実装したのですがうまく動きません。 ソースコードは以下の通りです。 googlemaps.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> html, body { height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.5.0"); </script> <script type="text/javascript" src="googlemaps.js"></script> <title>指定した位置を中心とする地図</title> </head> <body> <p> 緯度<input id="lat" type="text" value="35.632997" /> 経度<input id="lng" type="text" value="139.648609" /> <button id="button">地図を作る</button> </p> <div id="map_canvas" style="width: 100%; height: 90%;"></div> </body> </html> googlemaps.js $(document).ready(function() { $("#button").click(function() { // input要素の値を取得し、マップの中心を決める var lat = $("#lat").val(); var lng = $("#lng").val(); var myCenter = new google.maps.LatLng(lat, lng); // 地図のオプション var myOptions = { zoom : 14, center : myCenter, mapTypeId : google.maps.MapTypeId.ROADMAP // 必須 }; // 地図の生成 var myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); // マーカーの生成 new google.maps.Marker( { position : myCenter, map : myMap, title : "Hello World!" }); }); }); firebugはgooglemaps.js 404 not foundといっているのでhtmlとjavascriptの連携が うまくいってないのだと思うのですが、どうすればいいのかわからず前にすすめません。 お詳しい方、ご教授ください。
- ベストアンサー
- JavaScript
- php -> javascript 変数渡し
tempフォルダにtest.txtファイルが存在すれば、 fileフォルダaaa.txtファイル名をbbb.txtファイルに変更という流れです。 変更ボタンをクリックすると、値を$testdataに渡し、ファイル有無をチェックし、ある場合は変数をjavascriptに渡すしますphpの所は問題ありませんが、 javascript処理の所がどうしてもうまくいきません。変数渡しができません。 ネット上でいろいろ調べてみましたがすべてダメでした。 ぜひ、よろしくお願いいたします。 下記はそのコードです。 ファイル名test.php <? $testdata = $_GET["testdata"]; $filename = "C:\\xampp\\htdocs\\test\\file\\temp\\".$testdata; if(file_exists($filename)){//ある場合、変数をjavascriptに渡す $testdata_script = $testdata; }//ここまでは問題ありません。 ?> <!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> --> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テスト</title> <script type="text/javascript"> <!-- function test(file) { obj = new ActiveXObject('Scripting.FileSystemObject'); var name = '<?php echo $testdata_script ;?>'; alert(name); strMoveFrom = 'C:\\xampp\\htdocs\\test\\file\\aaa.txt'; strMoveTo = 'C:\\xampp\\htdocs\\test\\file\\bbb.txt'; obj.MoveFile(strMoveFrom ,strMoveTo ); obj= null } //--> </script> ...省略 <form action=test.php method=get accept-charset=UTF-8> <input type=submit value=変更 onclick=test('file')> <input type=hidden name=testdata value="test.txt">
- ベストアンサー
- JavaScript
- firefox+xhtml+javascript
お世話になっております。 divをweb上でドラッグできるスクリプトを組みました。 Opera9.6,IE6では動いているのですが、Firefoxでは、ある条件下でしか動きません。 ある条件とは、DOCTYPEの宣言がされていないことで、XHTMLにしようとDOCTYPEを宣言すると、動作しなくなってしまいます。 <?xml version='1.0' encoding='UTF-8'?> <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='ja'> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8' /> <meta http-equiv='Content-Script-Type' content='text/javascript' /> <title>test</title> <script type='text/javascript' src='FILENAME.js'></script> -------- <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'> を消せば動きます。 仮に、DOCTYPEをHTML4.1などにしても動きません。 クオートをシングルからダブルにしても同じです。 動かない状態でも、JS自体は読んで、onload関数の中は見に行っているようです（alertを埋め込んだらでたので） 可能性として、 外部ファイルのJSの書き方に問題があるのでしょうか？ それとも、HTML側に問題があるのでしょうか？ ソースを見なくても何か考えられることがあれば、教えてください。 よろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScriptでの実装
はじめまして。 google maps apiのGeocoderを使って住所を入力するとwebページ上にその住所を中心とした 地図を表示させたいのですがいまいちうまくいきません。 ソースコードは以下の通りです。 html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> html, body { height: 100%; } </style> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.5.0"); </script> <script type="text/javascript" src="addressmaps.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#button").click(function() { var address = $("#address").val(); // input要素の値を取得 drawMap(address); // 地図を生成する }); }); </script> <title>指定した住所を中心とする地図</title> </head> <body> <p> <input id="address" type="text" value="東京都世田谷区新町3丁目" size="50" /> <button id="button">地図を作る</button> </p> <div id="map_canvas" style="width:100%; height:90%;"></div> </body> </html> javascript // geocodeのための、地図を生成するコールバック関数 function createMap(result, status) { if (status == google.maps.GeocoderStatus.OK) { //console.log(result); var myPosition = result[0].geometry.location; var myOptions = { zoom : 14, center : myPosition, mapTypeId : google.maps.MapTypeId.ROADMAP }; var myMap = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } } // 住所から位置を取得し、地図を生成する function drawMap(myAddress) { // 住所から位置を取得するためのオブジェクト var geocoder = new google.maps.Geocoder(); // 住所から位置を取得し、その結果を使って地図を生成する geocoder.geocode( { address : myAddress }, createMap); // コールバック関数createMap()は上で定義されている } 特にエラーはでないのですが地図が表示されません。 詳しい方、ご教授ください
- 締切済み
- JavaScript
- MySQL,PHP,javascript,mapへ
MySQLのデータベースレコードにある住所をGoogle Mapsに表示させたいです。 手順1) 住所を検索するphpを実行し，結果を JavaScript に渡す。 手順2) JavaScriptで Google Map API を呼び出す。 上記の方法を考えたのですが、 MySQLの接続や、データを検索するプログラムが分かりません。 以下のコードのどこにどのように入れれば宜しいでしょうか？ <?php $txt = $_POST['txt']; $txt = mb_xxx ( $txt ); ?> <script type="text/javascript"> <!-- function hoge () { var txt = "<?= $txt ?>"; } //--> </script> プログラム参考にしたサイト http://d.hatena.ne.jp/ese-se/20070823/1187870469 ご回答よろしくお願いします。
- ベストアンサー
- JavaScript
- javascriptでちゃんと表示されない。
javascriptの参考書通りに書いてるのになぜか出ません。 なぜか、新製品と価額だけしかでません。 リラックスチェアとか価額４０００とかが出ません。 何が原因かわかりません。 何が原因なんでしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>はじめてのHTML</title> <style> table{border:solid 1px orange; border-spacing:0pc;} th,td{border:solid 1px orange; padding:4px;} </style> <script type="text/javascript"> var prod_name={'リラックスチェア','リラックスデスク','ブックスタンド'}; var prod_price ={4000,12000,800}; </script> </head> <body> <h1>新商品価額表</h1> <table> <thead> <tr><th>製品名</th><th>価額</th></tr> </thead> <tbody> <script type="text/javascript"> document.write('<tr>'); document.write('<td>'+ prod_name[0]+'</td>'); document.write('<td>'+ prod_price[0]+'</td>'); document.write('</tr>'); </script> </tbody> </table> </body> </html>
- ベストアンサー
- JavaScript
- javascriptでphpに値渡し
javascriptとphpで値のやりとりをしたいのですが、やりかたがわかりません。 以下のプログラムはセレクトメニューで選択された文字によって'a','ka','sa'....と 自作関数のSelected()に値を渡しています。 "alert(value);"をSelected()関数内に書いて、引数が正しく渡され実行できることは確認しました。 そこで、今度はSelected()関数に渡された引数valueをphpファイルに送って、 php側で引数に応じた処理をさせたいのですが、 Selected()関数内にどのように書けば良いのかがわかりません。 ちなみに渡したいphpのファイル名は"connect_mysql.php"で、 以下のプログラムが書かれたファイルと同階層にあります。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/frameset.dtd"> <html lang="ja"> <meta http-equiv="content-type" content="text/html; charset=UTF-8" > <meta http-equiv="Content-Script-Type" content="text/javascript"> <head> <title>test page</title> </head> <script type="text/javascript"> function Selected(value){ //ここで引数valueをphp側に渡したい // "alert(value);"を書いてSelected()関数が正しく呼び出され実行されることを確認済み } </script> <body> <form> <div id="name_selectors" class="name_select flo_l"> <select id="aiueo" class="aiueo_list flo_l" size="5" onchange="Selected(this[this.selectedIndex].value)"> <!--↓五十音一覧--> <option id="a" value="a" class="category_aiueo" > あ行 </option> <option id="ka" value="ka" class="category_aiueo" > か行 </option> <option id="sa" value="sa" class="category_aiueo" > さ行 </option> ・ ・ ・ <option id="ra" value="ra" class="category_aiueo" > ら、わ行 </option> </select> <!--↑五十音 end--> </div> </form> </body> </html>
- ベストアンサー
- JavaScript
お礼
ご回答いただき、有難うございました。 本件はJavaScriptへデータを渡す前の コントローラでのデータ取得にミスがあり、発生しておりました。 その部分を修正し、解決いたしました。 大変お手数をおかけいたしました。