JQuery dialog not working after first show

99
November 23, 2016, at 9:26 PM

I used JQuery dialog in my project for showing menu of restaurant to user. also when user sets count of foods its displays the price of order. all of this happening into dialog. so user takes its orders and submit it.order form is in another php file that renders as json and passed to div that contains dialog. everything is good for first time. but if user want to submit another order the nothing works. not ajax not submit form or anything else and user have to reload page to dialog works fine again. this is my dialog code:

$('#dialog-modal').dialog({
      autoOpen: false,
      resizable: false,
      width:900,
      height:500,
      hide: function () {
        $(this).fadeOut();
      },
      show:  function () {
        $(this).fadeIn();
      },
      open: function() {
        $('#dialog-modal').empty();
        $.ajax('<?php echo url()?>/admin/preload',{
          dataType:'json',
          cache: false,
          success:function(data){
            $('#dialog-modal').html(data.content);
          }
        });
      }
    });

the ajax in the open function is loading the menu of restaurant. this is my submit buttons. there is two submit button.one for submit and close dialog and another for submit and open another dialog for submit.

 $('#submit').on('click',function(){
  var data = $('#form').serialize();
  $.post('<?php echo url()?>/admin/add-food',data);
  $('#dialog-modal').dialog('close');
});
$('#newSubmit').on('click',function(){
  var data = $('#form').serialize();
  $.post('<?php echo url()?>/admin/add-food',data);
  $('#dialog-modal').dialog('close');
  $('#dialog-modal').dialog('open');
});

EDIT: if i destroy the dialog in the close function its works fine in all circumstances but in the submit and new button its close the dialog and don't open a new dialog box

Answer 1

i think, may be your button rendering dynamically.so we need to add event listener to that button.try the below code.

$(document).on('click','#submit',function(){
  var data = $('#form').serialize();
  $.post('<?php echo url()?>/admin/add-food',data);
  $('#dialog-modal').dialog('close');
});
$(document).on('click','#newSubmit',function(){
  var data = $('#form').serialize();
  $.post('<?php echo url()?>/admin/add-food',data);
  $('#dialog-modal').dialog('close');
  $('#dialog-modal').dialog('open');
});
READ ALSO
.is(&ldquo;visible&rdquo;) &amp; .is(&ldquo;:visible&rdquo;) working differently

.is(“visible”) & .is(“:visible”) working differently

I am using jquery visible selector to check if a child element is visible or not. But surprisingly.

133
How to selectively pass mouse events to underlying svg elements

How to selectively pass mouse events to underlying svg elements

I have a scatterplot with a brush layer for zooming in the data and voronois for mouse hover snapping but the problem is that the voronoi paths don't let the click event fall through to brush layer or if keeping brush on top it doesn't allow hover event to fall through...

173
Temporarily creating and associating models before save [Rails, Ajax, Google Maps]

Temporarily creating and associating models before save [Rails, Ajax, Google Maps]

I'm creating a trip planner application using rails 4, coffeescript, the Google Maps API, and jquery. On our trip planner page, we let users link multiple destinations together on a Google map, and save the trip to their account if they want.

165