Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
148 views
in Technique[技术] by (71.8m points)

php - How do I fix an Ajax conflict with jQuery Drag n Drop ranking?

I have two sets of code Loadmore Button And Jqueury Drag N Drop but they do not work as one.

How can I merge them together to function as one code?

Here is the Problem:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
type="text/javascript">

This Line is needed by the Loadmore Button and kills the UI function of the Drag and Drop elements.

Drag N Drop:

<title>jQuery Dynamic Drag'n Drop</title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.7.1.custom.min.js">

</script><script type="text/javascript">
  $(document).ready(function(){ 

$(function() {
    $("#contentLeft ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
        var order = $(this).sortable("serialize") + '&action=updateRecordsListings'; 
        $.post("updateDB.php", order, function(theResponse){
            $("#contentRight").html(theResponse);
        });                                                              
    }                                 
    });
});

}); 
</script>

DND updateDB.php

<?php 
require("db.php");

    $action                 = mysql_real_escape_string($_POST['action']); 
    $updateRecordsArray     = $_POST['recordsArray'];

if ($action == "updateRecordsListings"){

$listingCounter = 1;
foreach ($updateRecordsArray as $recordIDValue) {

    $query = "UPDATE records SET recordListingID = " . $listingCounter . " WHERE recordID = " . $recordIDValue;
    mysql_query($query) or die('Error, insert query failed');
    $listingCounter = $listingCounter + 1;  
}

echo '<pre>';
print_r($updateRecordsArray);
echo '</pre>';
echo 'If you refresh the page, you will see that records will stay just as you modified.';
}?>

DND main PHP:

    <ul>
    <?php
            $query  = "SELECT * FROM records ORDER BY recordListingID ASC";
            $result = mysql_query($query);

            while($row = mysql_fetch_array($result, MYSQL_ASSOC))
            {
            ?>
                <li id="recordsArray_<?php echo $row['recordID']; ?>"><?php echo $row['recordID'] . ". " . $row['recordText']; ?></li>
            <?php } ?>
        </ul>

Loadmore:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
type="text/javascript"></script>

<script>
$(function() {
var page = 1;
$("#LoadMore").click(function(){
    $.ajax({
        type:"GET",
        url:"page4.php",
        data:{page:page},
        success: function(response) {
            $("#data_grid").append(response); 
            page++;
        }
    });
}); 
});</script>

Loadmore page4.php

<?php
//set argument as your mysql server
$connect = mysql_connect("mysql_server","mysql_user","mysql_password");
mysql_select_db("database_name",$connect);

$page = isset($_GET["page"]) ? $_GET["page"] : 1;
$limit = 25;
$offset = ($page - 1) * $limit;

$sql = "SELECT * FROM table2 limit $offset, $limit";
$result = mysql_query($sql);
$numRows = mysql_num_rows($result);
if($numRows>0) {
    while($row = mysql_fetch_array($result)) {
        //get field data and set to the following row
        echo "<tr><td>field 1</td><td>field 2</td><td>field 3</td></tr>";
                //edit row as you table data

    }
} else {
    echo "<tr><td colspan='3'> No more data </td></tr>";
}
exit;
?>

What am I missing? Can I fix this? Am I going to have to scrap the Jquery Drag N Drop? Is there an alternative that I should be using?

Background: A user will rate listed items in the order they deem fit. The total possible Items exceed 300,000 but the user will probably only utilize the first few hundred and the rest is used as a searchable database to add an odd item into the list. I can get the 2 codes in question to work separately but when I attempt the combination they create conflict.

Thank you for your time in assisting this project.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Look here

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
    type="text/javascript">

and

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

are same (jQuery file)

So use only one

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"
    type="text/javascript">

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...