Question

The problem I am having is that my jquery script is not returning the success to the div and instead simply reloading the page (which should not be possible with the prevent). My code is below. Any help would be awesome as I’ve spent quite a bit of time trying to get this to work.

$(document).ready(function() {
var loader = "<img src='images/ajax-loader.gif' alt='loading...' />";
    $('#paging_container').pajinate({
    show_first_last: false,
    nav_label_next : '>',
    nav_label_prev : '<'    
    });

var loadUrl2 = "productadminprocess.php";
$(".action_buttons").click(function() {
    $("#rightcolumn").html(loader).load(loadUrl2, {productid: $(this).attr("id")});
  });


$("#thesubbie").submit(function(event) {

        /* stop form from submitting normally */
        event.preventDefault(); 

       /* get some values from elements on the page: */
        var loadUrl3 = "sortitems.php";
        var $form = $( this ),
            input = $form.find( 'input[name="sort_item"]' ).val();
        var myRadio = $('input[name=sorters]');
        var checkedValue =  myRadio.filter(':checked').val();

    $.post(loadUrl3, {radio: checkedValue, sort_item: input},
        function(data){
            var content = $(data);
            $('#thebox').html(content);

    });
  });

});

Here is the PHP Script that is returning data (a sort essentially)

function secure($x) { 


  $x = mysql_real_escape_string($x);
   $x = stripslashes($x);
   return $x; 

} 

$sorters = secure($_GET['sorters']);
$sort_item = secure($_GET['sort_item']);

//Start main query
$products = "SELECT * FROM product_list WHERE name_family = '$sort_item'";
//echo $products;
$list = mysql_query($products);
//echo $list;

while($row = mysql_fetch_array($list))  {
    $id = $row['id'];
    $name = $row['product_name'];
?>

    <div class="products"><img src="images/Product_thumbail.png" width="200" height="220" title="<?php echo $name; ?>" alt="<?php echo $name; ?>"><div class="action_buttons" id="<?php echo $id;  ?>">Update</div></div>
<?php       
    } // end while

?>

Answer 1

Try this in the $.post block:

$.post(
    loadUrl3,
    { radio: checkedValue, sort_item: input },
    function(data) {
        $('#thebox').html(data);
    }
);

Also, check your JS Error Log for any errors.

EDIT: Try adding return false; at the end of the $(“#thesubbie”).submit() block.