1

データベース情報をロードしようとしていますが、JSFiddle で機能していないようです。

HTML:

<table class="table" border="1" cellpadding="0" cellspacing="0">
    <thead>
        <tr>
        <th>Dropdown</th><th>Description From Account</th><th>Other</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td width="20%" id="accountNumber" contenteditable="true"><select data-placeholder="Choose Account . . ." class="chosen-select-newRow" style="width:350px;" tabindex="4"><option value=""></option></select></td><td id="accountDesc" contenteditable="true"></td><td id="branch" contenteditable></td>
        </tr>
        <tr>
            <td width="20%" id="accountNumber" contenteditable="true"><select data-placeholder="Choose Account . . ." class="chosen-select-newRow" style="width:350px;" tabindex="4"><option value=""></option></select></td><td id="accountDesc" contenteditable="true"></td><td id="branch" contenteditable></td>
        </tr>
    </tbody>
</table>

アヤックス:

function populate(){
$(function () 
  {
    //-----------------------------------------------------------------------
    // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
    //-----------------------------------------------------------------------
    $.ajax({                                      
      url: 'journal-populate.php',                  //the script to call to get data          
      data: '',                        //you can insert url argumnets here to pass to api.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format      
      success: function(rows){          
                    for (var i in rows)
                        {
                            var row = rows[i]; 

                            //var account = row[1];         //get id
                            //var description = row[2];     //get account description

                            $('.chosen-select-newRow').append($('<option></option>').val('?acc=' + row[1] + '&desc=' + row[2]).html(row[1] + ' - ' + row[2]));

                            //alert(id + ' ' + account + ' ' + description + ' ' + level1 + ' ' + level2 + ' ' + level3 + ' ' + level4 ); /*'<span onclick="return false;" href="?account='+ row[1] +'&desc='+ row[2] +'">'+*/ /*+'</span>'*/

                        } 
                }
        });
  });

}

PHP:

<?php 
  include('dbconn.php');
  //--------------------------------------------------------------------------
  // Example php script for fetching data from mysql database
  //--------------------------------------------------------------------------
  $databaseName = "mochamhy_test";
  $tableName = "accountMaster";

  //--------------------------------------------------------------------------
  // 1) Connect to mysql database
  //--------------------------------------------------------------------------

  $con = mysql_connect($gaSql['server'],$gaSql['user'],$gaSql['password']);
  $dbs = mysql_select_db($databaseName, $con);
  //--------------------------------------------------------------------------
  // 2) Query database for data
  //--------------------------------------------------------------------------

  $result = mysql_query("SELECT * FROM $tableName ORDER BY `accountNumber` ASC");          //query
  //$array = mysql_fetch_array($result);                          //fetch result 
  $data = array();
    while ( $row = mysql_fetch_row($result) )
        {
             $data[] = $row;
        }
  //--------------------------------------------------------------------------
  // 3) echo result as json 
  //--------------------------------------------------------------------------
  echo json_encode($data);

?>

私のローカルホストでは動作していますが、Fiddle では動作していないようです。ここでJSONデータを見ることさえできますhttp://www.mochamedia.co.za/clients/testing/js/journal-populate.php

それが可能かどうかわかりませんか？

こちらがフィドルです。

ヘルプや提案をいただければ幸いです。

4

2 に答える 2

0

jsfiddle は、 window.onloadから呼び出す関数populate()を含むajax ファイルだけでなく、 php ファイルも見つけることができないためです。

そのため、そのファイルを含めて適切なパスを指定する必要があります。jsfiddle は、外部リソースの先頭に外部ファイルを含めるオプションを提供するため、フィドルが完全に機能するために必要なすべての php ファイルを含めるようにしてください。

于 2013-08-15T09:36:02.037 に答える
0

json データをエコーする前に、以下を追加する必要があります。ブラウザでjsonファイルとしてレンダリングしてから、外部リクエストを許可します。

header('Content-Type: application/json');
header("Access-Control-Allow-Origin: *");

その後、使用

<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
    $(document).ready(function(e) {
        $.getJSON('http://www.mochamedia.co.za/clients/testing/js/journal-populate.php',function(data){
            var items = [];
            $.each(JSON.parse(data), function(key, val) {
                items.push('<option id="' + key + '" value="'+val+'">' + val + '</option>');
            }); 
            $('#accountNumber').append(items.join("\n"));
        });
    });
</script>
于 2013-08-15T09:38:12.927 に答える