1

I'm trying to load database info but it doesn't seem to be working in 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>

Ajax:

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);

?>

It's working on my localhost, but I can't seem to get it working on a Fiddle. I can even see the JSON data here http://www.mochamedia.co.za/clients/testing/js/journal-populate.php

I don't know if it's possible?

Heres the FIDDLE.

Any help or suggestions will be appreciated!

4

2 回答 2

0

因为您的 jsfiddle 无法找到您的php 文件以及包含您从window.onload调用的函数populate()的ajax 文件。

因此，您必须包含该文件并提供适当的路径。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 回答