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

Question

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.

Answer 1

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">