JQuery Ajax with UI Dialog

Question

I basically have a main smarty template, an order smarty include, a js and a php file. Basically Im trying to create an ajax pop up when someone clicks on a button in the order include. Im having difficulty, the page only reloads, and I have no idea what I'm doing wrong. So the main page has jquery, jquery ui, and the included js pop up file script included. The code in the js file is

$(document).ready(function() {
$('.ajax-open').click(function(){
    $.ajax({
            type: "POST",
            url: "/scripts/pop-order.php",
            data: string,
            success: function(data) {
                 $( "#dialog" ).dialog({    
                    width:400,
                    resizable: false,
                    autoOpen: true 
                    });     
                 }
         });
});
});

My order template has this in it <button class="ajax-open" >open this shizznizzle</button>

My php has a Div id="dialog" in it, and then a bunch of php code inside. I also tried to take out all the php code and just put simple text in put all the page does is reload. Im not really sure what to do here, can someone help? Thanks

Answer 1

$('.ajax-open').click(function(e){

    //note the e in the function(e)

    e.preventDefault(); //don't go to default URL

Alternatively, you can return false at the end

$('.ajax-open').click(function(e){

    return false;