Question

我以为自己在教自己JQuery方面做得非常好，但后来遇到了一个我需要JSON的问题，现在我觉得自己回到了尼安德特人的身边，盯着那个难以理解的形状。屏幕...

基本上，我正在创建一个表单如下：

<h2>Heroes and Heroines Site Management System - Edit a Site</h2>
<p><label for="eventLocation">Event Location:</label><select name="eventLocation" id="eventLocation">
<option value="5">Buckstone</option>
<option value="18">Sandiways: Begg</option>
<option value="16">Wing Drumble Wood</option>
<option value="17" selected></option>
<option value="19" selected></option>
<option value="20">Pwll Du</option>
<option value="21" selected></option>
<option value="22">Kinver Edge</option>
<option value="23">Sandiways: Lakeview</option>
<option value="24">Gladstone</option>
<option value="25">Cannock Chase</option>
<option value="26" selected></option>
<option value="27">Consall Scout camp</option>
<option value="28">Broadwater</option>
<option value="29">Horley</option>
<option value="30">Blackwell Court</option>
<option value="31">Roddlesworth, Lancs</option>
<option value="32">Root 'n' Branch </option>
</select></p>
<form method="post" action="/heroes-and-heroines-larp-and-lrp-events.php?task=commitLocationEdit">
<p><label for="name">Location Name:</label><input type="text" name="name" id="name" class="wideText"></p>
<p><label for="address">Location Address:</label><textarea name="address" id="address" rows="6" cols="50"></textarea></p>
<p><label for="postcode">Location postcode:</label><input type="text" name="postcode"></p>
<p><label for="directions">Directions to Location:</label><textarea name="directions" rows="10" cols="50"></textarea></p>
<p><label for="locationType">Location Type:</label><select name="locationType"><option value="YHA">YHA</option>
<option value="Hostel">Hostel</option><option value="Campsite">Campsite</option>
<option value="Scout Camp (Building)">Scout Camp (Building)</option><option value="Scout Camp (Camping)">Scout Camp (Camping)</option>
<option value="8 Hour">8 Hour</option><option value="Other">Other</option>
</select></p>
<p><label for="googleMapLink">Google Map Link:</label><textarea name="googleMapLink" rows="6" cols="50" title="To get a Google Maps Link, go to www.maps.google.co.uk, find the location, and then click on the tiny gear icon in the bottom right of the screen. Click 'Share and Embed Map', choose the 'Embed Map' tab, select 'Small Map' and then copy and paste the code into this box"></textarea></p>
<p><label for="notes">Notes:</label><textarea name="notes" rows="10" cols="50"></textarea></p>
<button type="submit" class="eventBookButton">Edit Location</button>
<a href="/heroes-and-heroines-larp-and-lrp-events.php"><input type="button" class="eventBookButton" value="Cancel" /></a>
</form>

这将允许网站版主编辑我们用于在俱乐部中运行活动的位置。我希望他们能够从第一个选择字段中选择一个站点，然后让JQuery使用我们的SQL数据库中的数据填充所有后续字段。我一直在使用以下JQuery脚本，我从上一个问题中提取了这个脚本：Dynamically fill in form values with jQuery

    <script>
    $("#eventLocation").bind("change", function(e){
        $.getJSON("/common/ajaxCalls.php?task=locationEdit&&eventLocation" + $("#eventLocation").val(),
        function(data){
            $.each(data, function(i,item){
                if (item.field == "name") {
                   $("#name").val(item.value);
                } else if (item.field == "address") {
                   $("#address").val(item.value);
                }
            });

        });
    });
</script>

JQuery脚本应该在做出选择时将位置发送到以下PHP脚本，然后使用信息填充表单（此时只是虚拟数据......）

$json = array(array('field' => 'name', 
   'value' => "test Name"), 
   array('field' => 'address', 
   'value' => "Test Address"));
echo json_encode($json);

我整个下午一直在捣乱我的脑袋，并且没有设法到达任何地方......我已经通过Firefox开发人员查看了这些查询，而且脚本不是把任何调用都放到PHP脚本或任何东西。

有什么建议吗？

谢谢！

的Seb

Answer 1

您目前有一堆<script></script>块。你应该尽可能多地组合它们。或者，更好的是，将它们提取到外部js文件。

这里的具体问题是您在change代码之外绑定了$(function(){ ... });处理程序，这意味着它很可能在DOM完全加载之前尝试运行。

以下是两个应该解决此问题的脚本块的组合（以及我修复了您的ULR问题）。

<script>
$(function(){
    $( document ).tooltip();

    $("#eventLocation").bind("change", function(e){
        $.getJSON("/common/ajaxCalls.php?task=locationEdit&eventLocation=" + $("#eventLocation").val(),
        function(data){
            $.each(data, function(i,item){
                if (item.field == "name") {
                    $("#name").val(item.value);
                } else if (item.field == "address") {
                    $("#address").val(item.value);
                }
            });

        });
    });
});
</script>

使用jquery json从SELECT填充表单

1 个答案: