JSFiddle - React, Tailwind, and code Playground

by Kleber Mota

HTML

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li> <c:url value="/Usuario/listagem" var="usuario"/> <a href="#" class="popup" data-action="${usuario}/1/10/1" data-target="popup-usuario">Usu&aacute;rios</a></li>
            <li> <c:url value="/Permissao/listagem" var="permissao"/> <a href="#" class="popup" data-action="${permissao}/1/10/1" data-target="popup-permissao">Permiss&otilde;es</a></li>
            <li> <c:url value="/Grupo/listagem" var="grupo"/> <a href="#" class="popup" data-action="${grupo}/1/10/1" data-target="popup-grupo">Grupos</a></li>
            <li> <c:url value="/logout" var="logoutUrl"/> <a href="${logoutUrl}">Logout</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div id="container"></div>

JavaScript

$( '.dialog' ).dialog({
      autoOpen: false,
      closeOnEscape: true,
      closeText: "fechar",
      height: 680,
      width: 1046,
      show: {
        effect: "fadeIn",
        duration: 1000
      },
      hide: {
        effect: "fadeOut",
        duration: 1000
      },
      close: function(){
          console.log('remove dialog_div');
          $(this).remove();
      }
});

function add_dialog(dialog_name) {
    console.log('=== add_dialog ===');
    console.log('dialog_name = '+dialog_name);
    $('#container').append('<div class="dialog" id="'+dialog_name+'"> <div class="text"> </div> </div>');
    var div = $('#'+dialog_name);
    return div;
}

function open_dialog(url, dialog_box) {
    console.log('=== open_dialog ===');
    
        var $temp  = $('<div/>', {html:'Ajax data'});
        $(dialog_box).find('.text').empty();
        var content = $temp.find('head').html();
        console.log('content_head_section = '+content);
        $(dialog_box).find('.text').html( $temp.remove('head').html() );
        console.log('dialog_title = '+$temp.find('title').text());
        $(dialog_box).dialog().dialog('option', 'title', $temp.find('title').text());
        $(dialog_box).dialog( "open" );
    console.log('..................................');
    
}

$(document).on('click', '.popup', function (event) {
    console.log('=== click_event_popup ===');
    event.preventDefault();
    event.stopPropagation();
    var action = $(this).data('action');
    var target = $(this).data('target');
    var div = add_dialog(target);
    open_dialog(action, div);
});