JQuery ui.dialog + ajax

Question

The code, loads some 'divs' and pops them all in a single dialog object (Sec1).

Each alert has a "dismiss" link(Sec2), with a JQuery event-listener that sends an ajax request, and shows a new dialog, created from the result (Sec3).

Seems like it's all working, but, with one problem: after clicking the 'dissmis', the result dialog is loaded in many (10, currently, in a previous version of the code, only 5..)

 //Sec1
 $("#alerts_list").dialog({
    title : "Alerts",
    resizable : false,
    dialogClass : "alerts",
    modal : true,
    maxHeight: $(window).height()- 20,
    buttons : [{
       text : "Done",
       click : function() {
          $(this).dialog("close");
       }
    }]
 });

The alerts code is:

HTML

//Sec2
<div class="alert<?php echo " " .$alert_class?>">
   <h3>Title</h3>
   <p class="alert-message">some text</p>
   <div class="toolbar">
      <a class="dismiss" href="/alerts/dismiss/1">dismiss</a>
      <a href="/alerts/">settings</a>
   </div>
</div>

//Sec3
$(".alert .toolbar a.dismiss").on('click',function(eve) {
   eve.preventDefault();
   $url = $(this).attr("href");
   $.get($url, null, function(data) {
      $("p").html(data).appendTo('body').dialog();
   });
});

How many  elements do you have in your page? $("p") selects all of them. — Barmar
– Barmar, Commented Jan 15, 2014 at 8:08

LeGEC · Accepted Answer · 2014-01-15 08:20:28Z

1

You probably want to replace $("p") with $("") or $("").

answered Jan 15, 2014 at 8:20

LeGEC

53.4k5 gold badges69 silver badges127 bronze badges

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

1 Comment

yossi Over a year ago

You are absolutely correct! i used $("P") instead of $(""). thanks!

Irvin Dominin · Accepted Answer · 2014-01-15 08:22:42Z

1

This selector:

$("p").html(data).appendTo('body').dialog();

is affecting all your  elements.

Try to use a more specific selector.

Code:

//Sec3
$(".alert .toolbar a.dismiss").on('click',function(eve) {
   eve.preventDefault();
   $url = $(this).attr("href");
   $.get($url, null, function(data) {
      $(this).parent().siblings("p").html(data).appendTo('body').dialog();
   });
});

answered Jan 15, 2014 at 8:22

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

Collectives™ on Stack Overflow

JQuery ui.dialog + ajax

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related