0

Google Visualizator Geomap を使用してマッシュアップを作成しています。SQL クエリから取得した情報を「送信」ボタンなしで毎回変更するフィルターを動的に選択したいと考えています。

これが私のメインページのソースです：

<?php 
require 'protoext.php'
?>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
  <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>

 google.load('visualization', '1', {'packages': ['geomap']});
   google.setOnLoadCallback(drawMap);

   function drawMap() {
      var data = new google.visualization.DataTable();
    data.addColumn('string', 'Code');
    data.addColumn('number', 'Value');
    data.addRows([
        <?php while($r = mysql_fetch_assoc($res)) {
                echo "['$r[COD]', $r[Value]],";
        } ?>
    ]);
      var options = {};
      options['dataMode'] = 'regions';
      options['region'] = 'IT';

      var container = document.getElementById('map_canvas');
      var geomap = new google.visualization.GeoMap(container);
      geomap.draw(data, options);
   };
</script>

「protoext.php」のソースは問題なく動作しているようです (firebug と map 出力にエラーは表示されません)。

主な問題は、「性別」値を POST メソッドで「protoext.php」に送信するフォームにあります。

<form method="post">
    <select name="gender" onchange="this.form.submit();">
        <option selected>Choose</option>
        <option value="total">total</option>
        <option value="male">male</option>
        <option value="female">female</option>      
    </select>
</form>

<div id='map_canvas'></div>
</div>

私が言ったように、それは機能しますが、新しい値を選択するたびにページを更新し続けるため、フォームに新しい選択を追加してジオマップのフィルタリングを改善することができません。更新を防ぐにはAJAXを使用する必要があることを知っています。いくつかの方法を試しましたが、protoext.phpに何も送信されていないようでした。

誰かアイデアはありますか？返信ありがとうございます。

編集

私が作成した AJAX 呼び出しが適切に解決されないため、他の php ファイル (protoext.php) を投稿します。関数間の競合または非互換性の問題がある可能性があります。

<?php
$selection=$_POST["gender"];
$dbhost="localhost";
$dbuser="root";
$dbpass="";

$conn = mysql_connect($dbhost, $dbuser, $dbpass);
if(!$conn) die ("Error Mysql: ".mysql_error());

$sql= "USE csv_db";
$ok = mysql_query ($sql, $conn);

if(!$ok)
    die("imposs. select DB: ".mysql_error()); 

    $sql="SELECT COD, Value
FROM view_codes  //that is the view obtained from my database
WHERE  `Age` LIKE  '15+ years '
AND  `Qualification` LIKE  'totale'
AND `Home_Town` LIKE  'totale'
AND `Gender` LIKE  '$selection'
AND  `Period` LIKE  'T2-2012'";

echo "querySQL: $sql<br>"; 

$res=mysql_query($sql,$conn);
if (!$res)
    die ("Error query" .mysql_error());
?>

EDIT-更新

私もこの方法を試しましたが、まだうまくいきません。

<form method="post">
        <select name="gender" onchange="this.form.submit(
       function (){
        $.ajax({
        type: "POST",
        url: "protoext.php",            //www.gautam.com?id=..&value1=..
        success:function(data){                                        
               alert("successfully submitted");
            }
          }); 
        }
    );">

私は何を間違っていますか？

4

3 に答える 3

1

あなたはajaxを使うことができます

$.ajax({
            type: "POST",
            url: "Your url here",            //www.gautam.com?id=..&value1=..
            success:function(data){                                        
                alert("successfully submitted");
            }
          });
于 2012-09-08T11:34:08.567 に答える
0 
$('form').on('submit', function() {
    $.post('http://example.com', $(this).serialize(), function() {
       // Done
    });
});
于 2012-09-08T11:39:01.817 に答える
0

ビューファイルで

<script>
    $('document').ready(function(){
          $.ajax({
        type: "POST",
        url: "Your url here",            //www.gautam.com?id=..&value1=..
        success:function(data){                                        
            alert("successfully submitted");
        }
      });

  })
</script>
于 2012-09-08T11:40:52.337 に答える