如何使用AJAX创建/更新单选按钮?

时间:2015-02-19 20:55:15

标签: javascript php html ajax

我目前有一个设置,我使用PHP脚本通过从我的数据库加载所需信息来创建单选按钮列表。此脚本位于HTML结构中,而不是单独的文件,因此需要页面刷新才能更新列表。

我想知道如何在按下按钮时删除并重新加载列表,其ID是' btnDelete' (实际删除数据库中的项目是一个单独的点,我不会进入这里)。我当前的代码将删除单选按钮列表,但是当添加下一行时,没有任何反应(包括列表删除)。

PHP(delCom.php)

                <?php
                    include_once('includes/conn.inc.php');
                    $query = ("SELECT comicID, comicName  FROM comic WHERE username = '".$_SESSION['username']."'");
                    $result = mysqli_query($conn, $query);
                    while ($row = $result->fetch_assoc()) 
                    {
                        echo "<br><input name='comicList' id='".$row['comicID']."' type='radio' value='".$row['comicID']."'>".$row['comicName']."  </option>";
                    }
                ?>

的JavaScript

function delComic()
        {
            var ajaxRequest;  

            try
            {
                // Opera 8.0+, Firefox, Safari
                ajaxRequest = new XMLHttpRequest();
            } 
            catch (e)
            {
                // Internet Explorer Browsers
                try
                {
                    ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
                } 
                catch (e) 
                {
                    try
                    {
                        ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                    } 
                    catch (e)
                    {
                        // Something went wrong
                        alert("Your browser broke!");
                        return false;
                    }
                }
            }
            // Create a function that will receive data sent from the server
            ajaxRequest.onreadystatechange = function()
            {
                if(ajaxRequest.readyState == 4)
                {
                    $("#loadList").remove();
                    document.getElementById("divComics").innerHTML=xmlhttp.responseText;
                }
            }
            ajaxRequest.open("GET", "delCom.php?t=", true);
            ajaxRequest.send(null); 

        }

HTML

<div id="divComics">
            <p><u>Uploaded Comics</u></p>
            <!-- find comics in database -->
            <div id="loadList">
                <?php
                    include_once('includes/conn.inc.php');
                    $query = ("SELECT comicID, comicName  FROM comic WHERE username = '".$_SESSION['username']."' ORDER BY comicName ASC");
                    $result = mysqli_query($conn, $query);
                    while ($row = $result->fetch_assoc()) 
                    {
                        echo "<br><input name='comicList' id='".$row['comicID']."' type='radio' value='".$row['comicID']."'>".$row['comicName']."  </option>";
                    }
                ?>
            </div>
            <br>
            <br>
            <input  type="button" onclick="delComic()" value="Delete Comic" name="deleteButton" id="btnDelete"/>
        </div>

代码在HTML中运行时正确创建按钮,但在单独的php文件中则不行。

提前致谢。

编辑:更新以修复一些名不副实的内容并添加建议的新行。 loadList现在已清空,但不会删除它本身。目前的问题是PHP文件不会再次输出按钮。

2 个答案:

答案 0 :(得分:0)

没有id=comicList的元素,您无法在Javascript中将其删除$("#comicList").remove();,因为它不存在。 Javascript可能在此时停止执行,因此不会显示PHP的结果。

答案 1 :(得分:0)

<?php
       $username = $_GET['username'];
                    include_once('includes/conn.inc.php');
                    $query = ("SELECT comicID, comicName  FROM comic WHERE username = '$username'");
                    $result = mysqli_query($conn, $query);
                    while ($row = $result->fetch_assoc()) 
                    {
                        echo "<br><input name='comicList' id='".$row['comicID']."' type='radio' value='".$row['comicID']."'>".$row['comicName']."  </option>";
                    }
                ?>

ajaxRequest.onreadystatechange = function()
            {
                if(ajaxRequest.readyState == 4)
                {
                    document.getElementById('loadList').innerHTML="";
                    document.getElementById("divComics").innerHTML=xmlhttp.responseText;
                }
            }
            ajaxRequest.open("GET", "delCom.php?username=MY_EXACT_NAME_I_KNOW_WORKS_HERE", true);
            ajaxRequest.send(null);