Demo Callback Modals Materialize

by Adi Jaya

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- https://materializecss.com/modals.html -->


<button id="click" data-url="https://example.com/post.php?id=105">Edit</button>

<div id="modal1" class="modal">

  <div class="modal-content">
      <h4>Modal Header</h4>
      <p>A bunch of text</p>
      <textarea id="demo-input" type="text" class="materialize-textarea">hello</textarea>
       <p>
          <button class="btn waves-effect waves-light" id="submit">send</button>
      </p>      
  </div>
  
  <div class="modal-footer">
         <a href="#!" class="modal-close waves-effect waves-green btn-flat">Close</a>
  </div>
  
</div>

JavaScript

$('.modal').modal({
	ready: function() {
    	
    },
	onOpenStart: function() {
    	alert( "Start Modal Open" );
    },
    onOpenEnd: function() {
    	var test = $('#demo-input').val();
    	alert( test );
        //your code
    },
    onCloseStart: function() {
    	alert( "Star close" );
    },
    onCloseEnd: function() {
    	alert( "End close" );
    }
});

$( document ).on( "click", "#submit", function(){
	alert( "Send data" );
    //ajax send here...
});


$( document ).on( "click", "#click", function(){
	
    var $url = $( this ).attr( "data-url" );
    var inner = "";
    if( $url ){
    	$('.modal').modal( "open" );
        /*
			$.ajax({
				url: $url,
				async: true,
				cache: false,
				dataType: "json",
				beforeSend:function( xhr ){
					//$( "#loader" ).show();
                    //or
                    $('.modal').modal( "open" );
				},
			})
			.done(function( data, textStatus, jqXHR )
			{
            	console.log( data );
                console.log( textStatus );
                console.log( jqXHR );
                
				if( jqXHR.status == 200 )
				{
					var $responseText = jqXHR.responseText;				
					var respon = JSON.parse( $responseText );
                    
                    inner = "";// respon code
                    $( "#demo-input" ).val( inner )
                    // more code
                    
				}
			})
			.fail( function( jqXHR, exception )
			{
				console.log( jqXHR );
                console.log( exception );
                var msgError = '';
                if ( jqXHR.status === 0 )
                {
                	msgError = "Not connect. Verify Network.";
                }
               	else if (jqXHR.status == 404)
                {
                
                }
                else if (exception === 'timeout')
                {
                
                }
                //etc.. more code error
                alert( msgError );
			})
			.always(function( data, textStatus,...