How do i open a dialog on click using jquery

Question

I am trying to open a dialog on click on a item which is dragged and dropped. Each item which is been dropped has its own class and based on the class it should open a different dialog.

I have created the dialogs only for Audi and BMW only. So if one pulls Audi or BMW from the left to the right and click Audi or BMW it should open up a dialog. Any help is appreciated.

Here is the jsfiddle https://jsfiddle.net/prady/grjfo8n3/1/

https://jsfiddle.net/prady/grjfo8n3/1/#&togetherjs=jb0G1yTjd4

    <div class="demo">
 <div class="sideBySide">
  <div class="left">
    <ul class="source">
      <li>Alfa Romeo</li>
      <li>Audi</li>
      <li>BMW</li>
      <li>Ford</li>
      <li>Jaguar</li>
      <li>Mercedes</li>
      <li>Porsche</li>
      <li>Tesla</li>
      <li>Volkswagen</li>
      <li>Volvo</li>
    </ul>
  </div>
  <div class="right">
    <ol class="target">
      <li class="placeholder">Drop your favourites here</li>
    </ol>
  </div>
</div>
</div>
<div class="Audi" title="Dialog Title" style="display:none"> Some text</div>  
 <script>
 $(".source li").draggable({
  addClasses: false,
  appendTo: "body",
  helper: "clone"
});

$(".target").droppable({
  addClasses: false,
  activeClass: "listActive",
  accept: ":not(.ui-sortable-helper)",
  drop: function(event, ui) {
    $(this).find(".placeholder").remove();
    var link = $("<a href='#' class='dismiss'>x</a>");
    var list = $("<li class='" + ui.draggable.text() + "'></li>").text(ui.draggable.text());

    $(list).append(link);
    $(list).appendTo(this);
    //updateValues();
  }
}).sortable({
  items: "li:not(.placeholder)",
  sort: function() {
    $(this).removeClass("listActive");

  },
  update: function() {
   // updateValues();
  }
}).on("click", ".dismiss", function(event) {
  event.preventDefault();
  $(this).parent().remove();
 // updateValues();
});

  $(function () {
    $(".source, .target").sortable({
      connectWith: ".connected"
    });

  });
   $(".Alfa Romeo").click(function () {
       alert('hi');
        $(".Alfa Romeo").dialog('open');
        return false;
    });
    $(".Audi").click(function () {
        alert('hi');
        $('#dialog').dialog('open');
        return false;
    });

  function updateValues() {
    var items = [];
    $("ul.target").children().each(function() {
      var item = {manufacturer: $(this).text()};
      items.push(item);
    });
    var jsonData = JSON.stringify(items);                       
    $.ajax ({
      url: "dnd.xsp/setfavourites",
      type: "PUT",
      data: jsonData,
      dataType: "json",
      contentType: "application/json; charset=utf-8",
      success: function(){},
      error: function(){}
    });
  };

 </script>

Devendra Soni · Accepted Answer · 2016-08-11 06:43:28Z

1

I have updated the jsfiddle provided by you. there was an issue you were trying to bind the events on dynamic doms ( the classed are being generated on drop) so i updated the same and if you need can modify accordingly as of now it is working fine and showing alert if you are droping AUDI or BMW. i changed the below code:-

 $(document).on("click", ".BMW", function() {
      alert('hi');
      $(".Alfa Romeo").dialog('open');
      return false;
  });
  $(document).on("click", ".Audi", function() {
      alert('hi');
      $('#dialog').dialog('open');
      return false;
  });

jsfiddle :-https://jsfiddle.net/grjfo8n3/6/

answered Aug 11, 2016 at 6:43

Devendra Soni

1,93412 silver badges16 bronze badges

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

2 Comments

Prady Over a year ago

Thanks.. Can you help to understand why the dialogs are not opening up. i updated the code to point to correct divs to open as dialogs

Prady Over a year ago

i wanted to open up divs with class of Audi to open as dialogs when we click Audi

Collectives™ on Stack Overflow

How do i open a dialog on click using jquery

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