2013-08-27 31 views
0

這裏我使用的是jQuery中的拖放操作。刷新時值不應該爲空,它應該將值存儲在數據庫中

我從數據庫中獲得一組問題和答案(文章 - >問題,文章 - >答案),其中答案在問題文本框中拖放。在刷新頁面時,拖動的值會出現在原來不在該特定文本框中的位置。

這是我的編碼。

<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>jQuery UI Draggable - Default functionality</title> 
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <!--<link rel="stylesheet" href="/resources/demos/style.css" /> --> 
<style> 
/*#draggable { width: 50px; height: 20px; padding: 0.5em; } */ 
.drag_ans { 
background: none repeat scroll 0 0 transparent; 
border: 0 none; 
width: 100px; 
} 
#draggable { 
width: 50px; 
height: 20px; 
background: white; 
} 
#droppable { 
float: left; 
margin: 50px; 
width: 500px; 
height: 300px; 
border: green; 
} 

    #ques { 
background: none repeat scroll 0 0 #FFFFFF; 
padding: 10px; 
width: 100px; 

    } 
</style> 

    <script> 
    $(document).ready(function(){ 
    $("#answer").click(function(){ 
// alert('find a score'); 
    }); 
     }); 
    </script> 
</head> 

<body> 
<div class="container_inner"> 

<?php 

foreach($data as $article) 
    { 
    echo "<p>"; 
    echo "<b>";echo $article->article_name; 
echo"</b>"; 
echo "</p>"; 
echo "<p>"; 
    echo $article->description; 
    echo "</p>"; 
echo $article->video; echo "<br>"; 
    } 
    ?> 
    <?php 
    $add=1; 
foreach($question as $article) 
    { 
?> 
    <!-- <div id="drop"> --> 

    <p> 
<?php echo $article->question; ?> 
<input type ="text" id="ques_<?php echo $add; ?>" name="" class="ui-widget-content" /> 
    </p> 
    <!--</div> --> 
<?php 
$add++; 
    } 
    ?> 



    <?php 
     $counter=1; 
    foreach($question as $article) 
     { 
?> 
<script> 
     $(function() { 

     $("#draggable_<?php echo $counter; ?>").draggable({ revert: 'invalid' }); 

    $("#ques_<?php echo $counter; ?>").droppable({ 

    drop: function(event, ui) { 

     $(this).addClass("ui-state-highlight").find("p").html("Dropped!"); 
     } 
     }); 
     }); 
     </script> 
    <div id="draggable_<?php echo $counter; ?>" class="ui-widget-content drag_ans"> 
    <p> 
    <?php echo $article->answer; ?> 
    </div> 
    </p> 
<?php 
$counter++; 
    } 
?> 

    <p> <input class="green_but" type="submit" name="NEW_SUBMIT" value="Submit" id="answer"/> </p> 
    </div> 
</body> 
    </html> 

拖放工作正常,刷新頁面值在問題文本框中全部爲空。 如何驗證jQuery中的問題和答案,因爲這個答案應該在刪除問題文本框後存儲在數據庫中。當點擊提交按鈕時,如果回答錯誤,分數應該降低。 EX:如果用戶答案設置正確答案4滿分10分,那麼得分應該是4分。

+0

顯示接收提交表單的代碼,而不是在您的for循環中創建多個腳本,您可以使用像'$(「div [id^='draggable _']」),'draggable'和' $(「div [id^='ques _']」)。droppable',並不是說這樣可以解決你的問題,但是更容易調試一個腳本而不是很多腳本。 –

回答

0

我不確定我們應該做什麼......你在你的帖子中說出答案....需要保存設置。顯然,他們沒有得到保存,所以你有兩種方法可以做到這一點...

1)提交表單和保存價值有

2)通過連接到事件處理程序的一個AJAX保存值(可能是下降的一個:​​)

我的建議是,當你還在學習web開發的基礎知識時,不要去做整個拖放功能。

相關問題