CODEWITHSUNDEEP
jquery-mobilepopup
Ludus H
Ludus H

Reputation: 239

jQm popup won't close if button call a function

single tap produce popup appearing and beside "cancel" button I put also button for function call. I thought that's enough to put just one "close" to close popup but I needed twice in order to close it. Did I miss something or I must write it on this way in this case?

<div data-role="popup" id="popMe" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
<div data-role="header" data-theme="b">
   <h1 id='h1pop'>Tap PopUp</h1>
</div>
<div role="main" class="ui-content">
    <h3 class="ui-title">Single tap</h3>
<p>This is a popup...</p>
<a  class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="myfunction()">Call function</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
<a href="#pagetwo" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-transition="flow">To Page 2</a>
  </div>
</div>

function myfunction() {
$("#popMe").popup("close"); 
$("#popMe").popup("close");
alert('Here I'm, in the function');
// ... rest of code
}

Upvotes: 0

Views: 160

Answers (1)

deblocker
deblocker

Reputation: 7697

Here is a snippet which should work for you:

function myfunction() {
  $("#popMe").popup("close");
  console.log("Here I'm, in the function");
  // ... rest of code
}
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  </head>

  <body>
    <div data-role="page" id="page-one">
      <div data-role="content">
        <a href="#popMe" data-rel="popup" class="ui-btn ui-corner-all">PopMe</a>
      </div>
      <div data-role="popup" id="popMe" data-overlay-theme="b" data-theme="a" data-dismissible="false" style="max-width:400px;">
        <div data-role="header" data-theme="b">
          <h1 id='h1pop'>Tap PopUp</h1>
        </div>
        <div role="main" class="ui-content">
          <h3 class="ui-title">Single tap</h3>
          <p>This is a popup...</p>

          <button class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" onclick="myfunction()">myFunction</button>
          <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
          <a href="#pagetwo" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-transition="flow">To Page 2</a>
        </div>
      </div>
    </div>
  </body>

</html>

Please note: if you need a CDN, i would suggest you to use the jQuery Mobile libraries from code.jquery.com

Moreover:

IMHO Popups works well if you need to display small menus or text-only hints, but if you need also form elements or some complex user interaction, i believe a page widget with the dialog option it would be a better choice. Here is a reference: JQM Dialog Pages.

Just a little additional hint: to trace your function execution, try to use the console instead of window.alert, and pay attention how you are enclosing strings.

Upvotes: 2

Related Questions