Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to try close popup on click button after executing some code?

I am trying to make button which are gonna do something and close popup ( button is on popup, I am using jquery mobile)

<div class="ui-block-b">
      <a href="#popupDialog" data-rel="popup" data-position-to="window" data-role="button" data-inline="true" data-transition="pop">Feedback</a>
</div>
<div data-role="popup" id="popupDialog"  data-theme="c">
      <div data-role="header" data-theme="a" class="ui-corner-top">
           <h1>Feedback</h1>
      </div>
      <div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
       <h3 class="ui-title">Thank you for your participation!</h3>
       <p>Some content</p>
       <a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">Cancel</a>
       <input type="button" id="feedback_send" value="Send"  data-inline="true" data-theme="b">
     </div>
</div>

When I click button I would like to send data to server and close popup ( I connect send with function which sends data to server but I don't know how to close popup after), I tried to emulate cancel click but it doesn't close.

like image 273
PaolaJ. Avatar asked Mar 24 '23 15:03

PaolaJ.


1 Answers

Popup can be closed like this:

$( ".selector" ).popup( "close" );

But in your case you should use it like this:

setTimeout(function(){
    $( ".selector" ).popup( "close" );
},1);

setTimeout is needed because web-kit browser cant close popup without a slight delay.

Working example: http://jsfiddle.net/Gajotres/B6TgZ/

$(document).on('pagebeforeshow', '#index', function(){ 
    $(document).on('click', '#feedback_send', function(){ 
        setTimeout(function(){
            $( "#popupDialog" ).popup( "close" );
        },1);
    });    
});

Before you close popup do everything that needs to be done. There also another approach, you can always close your popup and trigger popupafterclose to do what ever needs to be done.

$( "#popupDialog" ).on( "popupafterclose", function( event, ui ) {
    // Do something here, it requires SOlution 1 to trigger popup close
    alert('Popup closed');
});

Of course this solution still requires button to trigger popup close function. But unlike solution 1 this will not cause slight delay (delay = action you will do before popup is closed) before popup is closed.

like image 179
Gajotres Avatar answered Apr 08 '23 18:04

Gajotres