0

我有一个简单的页面，允许用户向项目添加语言 ID。该页面通过执行 ajax 调用来加载记录列表。所有记录都作为列表加载到 div 中。

每个列表项都是一个表单，因此当用户输入 lang id 时，他们按下 update 并且 ajax 调用关闭，更新数据库并使用记录重新加载列表，减去刚刚更新的记录。

jquery 调用适用于页面加载，但如果您提交表单项，它会转到 php 脚本，而不是在您提交的页面中重新加载。

任何想法为什么初始调用加载“页面内”但表单提交没有。使用每条记录的表单也是一个好主意，或者是否有更好的方法来使用 jquery。

执行 ajax 调用的原始 php 脚本 (sort_language.php)

   <script id="source" language="javascript" type="text/javascript">

   function run(){
// get form data
    var eng = $('#rec #eng').val();
    var cym = $('#rec #cym').val();

    // put form data in a JSON
    var data_json = {'eng':eng, 'cym':cym};

    //post to php script to update database and return html list
    $.ajax({
      type: 'post',
      url: 'ajax/lang_api.php',
      data: data_json,
      beforeSend: function() {
        // before send the request, display a "Loading..." message
        $('#records').html('Loading...');
      },
      timeout: 10000,        // sets timeout (10 seconds)
      error: function(xhr, status, error) { alert('Error: '+ xhr.status+ ' - '+ error); },
      success: function(response) { $('#records').html(response); }
    });

    return false; //this should stop page reload
}


$(document).ready(function()
{
    $("#rec").submit(function()
    {
        run()
    });
    run()
});



 </script>
</head>
<body>

<div id="record_wrapper">
<h1>Records by title</h1>
<div id="records">
    Waiting for records to load....
</div>

这是创建列表并更新数据库的 php 脚本。

//get lang post variables if they exist
$eng_id = $_POST['eng'];
$cym_id = $_POST['cym'];
//debug - check post values are correct visually
echo 'eng' . $eng_id . ' cym ' . $cym_id;

function create_list() {    
//generate html list
$html .='   <ul>';

    //grab records from DB which have not been updated with language value to display
    if (!$query = mysql_query("SELECT `id`, `title-245` FROM `records` WHERE `catalog_lang-040` = 'eng' ORDER BY `title-245`")) {
        echo mysql_error();
    }
    //generate each item in list as a form 
    //set form id to rec
    while($row = mysql_fetch_array($query))
    {
        $html .= '  <li><form action="ajax/lang_api.php" method="post" id="rec">' . $row['title-245'] . ' <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="' . $row['id'] . '" /> <input type="submit" value="submit" /></form></li>
        ';                                                                                      
    }

$html .= '  </ul>';
//return the html to be used
return $html;
}

//if eng and cym ids are submitted then update DB, otherwise just return the html required.
//check value is set using isset
if (isset($eng_id) && isset($cym_id)) {

if (!is_numeric($eng_id)) { $rehtml= 'Invalid English ID'; }
if (!is_numeric($cym_id)) { $rehtml= 'Invalid Welsh ID'; }

//sql to go here to update db ith language value

//and then get new list to output.
  echo create_list();
//post undefined so just return list (for first page load/refresh)  
}else{
// output the html
  echo create_list();
}

可能遗漏了一些明显的东西，但第一次玩 jquery/js。

这是由 lang_api.php 创建的 HTML 列表，它加载到记录 div 中，替换 sort_language.php 中的“等待记录加载”

eng417 cym 21   
<ul>    
 <li><form action="ajax/lang_api.php" method="post" id="rec">18th - 19th century ballads collection , 18th - 19th century,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="417" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">1st The Queen's Dragoon Guards Collections , 1685 -,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="1001" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Aberconway Library , 20th century -,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="101" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Aberfan Disaster Archive , Mainly 1966 -,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="303" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Abergavenny Local History Collection , Prehistory to the present day,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="1030" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Alister Hardy Religious Experience Archive , 1924 -,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="1042" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Almanacs Collection , 1700 - 1850,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="740" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Ammanford Local Studies Collection , 1880s -,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="939" /> <input type="submit" value="submit" /></form></li>
            <li><form action="ajax/lang_api.php" method="post" id="rec">Anderson Collection , 17th - 20th century,  <input type="text" name="cym" size="3" /><input type="hidden" name="eng" id="eng" value="407" /> <input type="submit" value="submit" /></form></li>
</ul>
4

2 回答 2

0

“任何想法为什么初始调用加载'in page'但表单提交没有。”

因为您的代码确切地告诉您这样做。在您的服务器端代码中，您生成了一堆常规 html 表单的表单元素，不以任何方式绑定到 jQuery 或 ajax。因此，当您按下任何提交按钮时，它将执行 html 表单所期望的操作：发布一个帖子，并将您当前的页面替换为服务器的响应。

“每条记录使用一个表单也是一个好主意，或者有没有更好的方法来使用 jquery。”

如果您将所有表单元素的提交绑定到 ajax 调用，它可能会起作用 - 但我不会称这是一个非常优雅的解决方案。我宁愿使用单个 jquery ajax 帖子绑定到具有特定类的所有按钮，例如

$("button.recordsubmit").live("click", function() { // ajax submit code });

并在服务器端而不是表单上生成这些按钮。此外，您应该考虑不要重新加载整个记录 div，而是针对单个记录 div，因此只会替换更改的内容。

于 2012-07-23T10:07:56.853 回答
0

你在这里有几个问题：

  1. 我不推荐您为每个<li>. 因为您可以锁定任何元素上的任何事件，您只需放置一个简单的按钮并将点击事件绑定到它。

  2. 您失败的原因是因为jquery.submit()它是一个辅助方法（以及单击、悬停等），并且这些方法仅绑定到页面加载时存在的元素。另一方面，您动态添加元素，因此您需要使用的是liveor on：

    $('button').on('click',function(){//do your stuff});

看看jquery.on()和jquery.live()

编辑：

第一次加载页面时，不需要ajax调用，只需在php.ini中创建即可。

当用户单击按钮时，您可以使用jquery.load()方法替换整个列表，为此您需要将列表包装在 div 中：

<div id="listWrapper">....</div>

然后使用jquery：

$('button').on('click',function()
    $('#listWrapper').load('ajax/lang_api.php',data_json);
});

这将自动调用 php 脚本并将 div 中的 lsit 替换为 php 脚本返回的列表。

于 2012-07-23T10:12:39.213 回答