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

Ohgodwhy · Accepted Answer · 2013-04-16 00:38:34Z

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;

answered Apr 16, 2013 at 0:38

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Trey Over a year ago

I still can't get it to work, for some reason the url wont work. It works when I use a non smarty template. In my smarty template I need to write something like {php} include $home_dir.'\includes\side_includes\quality_sm.htm'; {/php} to get it to reference a file....but thats php, Im once again confused =/

Ohgodwhy Over a year ago

@Trey is this element dynamically added to the page? if so, just change it to $(document).on('click', '.ajax-open', function(e){ e.preventDefault(); // rest of code });

Collectives™ on Stack Overflow

JQuery Ajax with UI Dialog

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related