JSFiddle - React, Tailwind, and code Playground

by ds345

HTML

<P>Select Delete from the Actions menu to test.</P>
		<span data-role="field-contain" class="ui-btn-right">
			<select id="message-commands" name="message-commands" data-mini="true" data-native-menu=false>
				<option data-placeholder="true">Actions</option>
				<option value="delete" id="delete">Delete Using popupafterclose</option>
				<option value="deletechange" id="deletechange">Delete Using function bound to change event</option>
			</select>
		</span>

		<div data-role="popup" id="popupDelete" style="max-width:300px;" class="ui-corner-all ui-popup ui-body-c ui-overlay-shadow" aria-disabled="false" data-disabled="false" data-shadow="true" data-corners="true" data-transition="none" data-position-to="origin">
			<div data-role="header" class="ui-corner-top ui-header ui-bar-a" role="banner">
				<h1 class="ui-title" role="heading" aria-level="1">Delete?</h1>
			</div>
			<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content ui-body-d" role="main">
				<h3 class="ui-title">Are you sure you want to delete this message?</h3>
				<p>This action cannot be undone.</p>
				<a href="#" data-role="button" data-inline="true" data-rel="back" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-btn-up-c"><span class="ui-btn-inner ui-btn-corner-all" onclick="$('#deleteConfirm').popup('close');"><span class="ui-btn-text">Cancel</span></span></a>    
				<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-inline ui-btn-up-b" onclick="deleteConfirmed();"><span class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Delete</span></span></a>  
			</div>
		</div>

JavaScript

function popDeleteConfirmation()
    {
      //console.log('In popDeleteConfirmation function bound to change event');
      $('#popupDelete').popup('open');
    }
    
    $("#message-commands").on("change",function(event,ui) {
      //do the thing
      var value = event.target.value;
       
      switch(value)
      {
        case "delete":
          //nothing to do, should be handled by popupafterclose
          break;
        case "deletechange":
          //explicit call to popup
          popDeleteConfirmation();
          break;
      }
      $("#message-commands").val('Actions'); // reset menu
      
      //$("select#message-commands").selectmenu("refresh");
    });
    
    $( document ).on( "pageinit", function() {
      $( '.ui-selectmenu' ).on({
        popupafterclose: function() {
          //console.log('In popupafterclose event function');
          setTimeout( function(){ $( '#popupDelete' ).popup( 'open' ); }, 100 );
        }
      });
    });