1

朝の仲間、jqueryを学ぼうとしている私、そしてjsから知っている帽子から、これは機能するはずですが、そうではありません...基本的に送信ボタンをクリックすると、内部のhtmlが変更されます。もっと経験のある人は何かアイデアがありますか？

jquery：

$(function() {
    $("#submitButton").click(function(){
        reply();
    })
});

function reply(){
 document.getElementById("#progressBar").innerHTML = "worksbro";
}

html：

<button type="button" id="submitButton">Submit</button>

私が間違っていなければ、これはうまくいくはずです。変更する必要がありますprogressBarが、onclickは何もしません

混乱を取り除くには：

<div id = "progressBar"></div>

すべてのコード：

<!DOCTYPE html>
<html>
<head>
<script src="theJS.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(function() {
    $("#submitButton").click(function(){
        reply();
    })
});

function reply(){
 $("progressBar").html("worksbro");
}

</script>


<title>
One neat van page
</title>
</head>
<body>
<div id="tableone">
<?php
//connect to db
include 'connect.php';

//start the table float left
cho '<table>';
echo '<tr><td style="background-color:#03899C; color:white; text-align:center;">Driver</td>
<td style="background-color:#03899C; color:white; text-align:center;">Van</td></tr>';

//lets get dem drivers and vans
//actually just the vans, realistically. 
$sql= 'SELECT *
FROM Vans';

//make a table float let with driver name and an info(keep it simple)
foreach($conn->query($sql) as $row) {
  echo '<tr id="'.$row['Owner'].'" style="cursor:pointer;" onClick="more(this.id)">';
    echo "<td style=\"background-color:#FFFC00;\"><a href=#>".$row['Owner']."</a></td>";
    echo "<td style=\"background-color:#FFFC00;\">".$row['Year']." ".$row['Make']." ".$row['Model']."</td>";
  echo '<tr>';      
}

echo '</table>';
?>
</div>

<div id="more">
<div id="edit"></div>
<h1 id="van"><u>More Info</u></h1>
<div id="vanList">
</div><!--end vanList-->
</div>

<div id = "progressBar">
<progress value="0" max="100"></progress>
</div>

<div id="innactive">
<h3>Innactive Vans</h3>
<table>
<?php
//connect to the database
include 'connect.php';
//get inactive vans
//my brain is mush right now, so bear with me...
$sql = "SELECT *
FROM Vans
";



foreach($conn->query($sql) as $row) {
if (!empty($row['Innactive'])){

echo '<tr><td style="background-color:#03899C; color:white; text-align:center;">Driver</td>
<td style="background-color:#03899C; color:white; text-align:center;">Van</td></tr>';

  echo '<tr id="'.$row['Owner'].'" style="cursor:pointer;" onClick="more(this.id)">';
    echo "<td style=\"background-color:#FFFC00;\"><a href=#>".$row['Owner']."</a></td>";
    echo "<td style=\"background-color:#FFFC00;\">".$row['Year']." ".$row['Make']." ".$row['Model']."                    </td>";
  echo '</tr>';
}
}



?>




</div>
</body>
</html>
4

5 に答える 5

3

あなたはこれを行うことができます

 $("#submitButton").click(function() {
         $("#progressBar").html("worksbro");
    });
于 2013-02-06T15:16:14.583 に答える
3

これでコード全体の問題は明らかです...HTMLに#submitButtonはありません–

「申し訳ありませんが、ボタンはそこにあります。ajaxリクエストに応じてphp経由で作成されます」

解決策、将来のイベントが必要

$(function() {
    $(document).on('click', '#submitButton', function(e){
        e.preventDefault();
        $('#progressBar').html("worksbro");
    })
});
于 2013-02-06T15:24:23.747 に答える
1

あなたがこのprogressBarようなものを持っているなら、例えば：

<div id="progressBar"></div>

<button type="button" id="submitButton">Submit</button>

次に、代わりにこれを行います。

$(function()
{
    $("#submitButton").click(function()
    {
        reply();
    })
});

function reply()
{
     $("#progressBar").html("worksbro");
}
于 2013-02-06T15:16:37.417 に答える
0

私の推測では、をクリックしたときにフォームを送信していると思います#submitButton。

フォームのデフォルトのアクションはページ自体にポストバックし、#progressBarその結果、元の値になります。

要素を追加して、<input type="button"/>上記のようにonclickイベントを処理してみてください。

$(function() {
    $("#submitButton").click(reply);
});

function reply(){
    document.getElementById("progressBar").innerHTML = "worksbro";
    //the jQuery way:
    //$('#progressBar').html('worksbro');
}
于 2013-02-06T15:22:17.037 に答える
0

多くのことがあります。おそらく、同じID（progressBar）を持つ他の要素がDOMにあり、期待しているものの代わりに更新されます。何が間違っているかを正確に確認するには、コード全体を確認する必要があります。

于 2013-02-06T15:28:16.597 に答える