Fórum Visualizar dados com janela modal e bootstrap #591667

<script type="text/javascript">
$( document ).ready(function() {
	var grid = $("#employee_grid").bootgrid({
		ajax: true,
		rowSelect: true,
		post: function ()
		{
			/* To accumulate custom parameter with the request object */
			return {
				id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
			};
		},
		
		url: "response.php",
		formatters: {
		        "commands": function(column, row)
		        {
		            return "<button type=\\\\"button\\\\" class=\\\\"btn btn-xs btn-default command-edit\\\\" data-row-id=\\\\"" + row.id + "\\\\"><span class=\\\\"glyphicon glyphicon-edit\\\\"></span></button> " + 
		                "<button type=\\\\"button\\\\" class=\\\\"btn btn-xs btn-default command-delete\\\\" data-row-id=\\\\"" + row.id + "\\\\"><span class=\\\\"glyphicon glyphicon-trash\\\\"></span></button>" +
						"<button type=\\\\"button\\\\" class=\\\\"btn btn-xs btn-default command-view\\\\" data-row-id=\\\\"" + row.id + "\\\\"><span class=\\\\"glyphicon glyphicon-eye-open\\\\"></span></button>";
		        }
		    }
   }).on("loaded.rs.jquery.bootgrid", function()
{
    /* Executes after data is loaded and rendered */
    grid.find(".command-edit").on("click", function(e)
    {
        //alert("You pressed edit on row: " + $(this).data("row-id"));
			var ele =$(this).parent();
			var g_id = $(this).parent().siblings('':first'').html();
            var g_name = $(this).parent().siblings('':nth-of-type(2)'').html();
console.log(g_id);
                    console.log(g_name);

		//console.log(grid.data());//
		$(''#edit_model'').modal(''show'');
					if($(this).data("row-id") >0) {
							
                                // collect the data
                                $(''#edit_id'').val(ele.siblings('':first'').html()); // in case we''re changing the key
                                $(''#edit_name'').val(ele.siblings('':nth-of-type(2)'').html());
                                $(''#edit_salary'').val(ele.siblings('':nth-of-type(3)'').html());
                                $(''#edit_age'').val(ele.siblings('':nth-of-type(4)'').html());
					} else {
					 alert(''Now row selected! First select row, then click edit button'');
					}
    }).end().find(".command-delete").on("click", function(e)
    {
	
		var conf = confirm(''Delete '' + $(this).data("row-id") + '' items?'');
					alert(conf);
                    if(conf){
                                $.post(''response.php'', { id: $(this).data("row-id"), action:''delete''}
                                    , function(){
                                        // when ajax returns (callback), 
										$("#employee_grid").bootgrid(''reload'');
                                }); 
								//$(this).parent(''tr'').remove();
								//$("#employee_grid").bootgrid(''remove'', $(this).data("row-id"))
                    }
    }).end().find(".command-view").on("click", function(e)
    {
        //alert("You pressed edit on row: " + $(this).data("row-id"));
			var ele =$(this).parent();
			var g_id = $(this).parent().siblings('':first'').html();
            var g_name = $(this).parent().siblings('':nth-of-type(2)'').html();
console.log(g_id);
                    console.log(g_name);

		//console.log(grid.data());//
		$(''#view_model'').modal(''show'');
					if($(this).data("row-id") >0) {
							
                                // collect the data
                                $(''#view_id'').val(ele.siblings('':first'').html()); // in case we''re changing the key
                                $(''#view_name'').val(ele.siblings('':nth-of-type(2)'').html());
                                $(''#view_salary'').val(ele.siblings('':nth-of-type(3)'').html());
                                $(''#view_age'').val(ele.siblings('':nth-of-type(4)'').html());
					} else {
					 alert(''Now row selected! First select row, then click edit button'');
					}
    });
});
$(document).on(''click'', ''#getUser'', function(e){
		
		e.preventDefault();
		
		var uid = $(this).data(''id'');   // it will get id of clicked row
		
		$(''#dynamic-content'').html(''''); // leave it blank before ajax call
		$(''#modal-loader'').show();      // load ajax loader
		
		$.ajax({
			url: ''getuser.php'',
			type: ''POST'',
			data: ''id=''+uid,
			dataType: ''html''
		})
		.done(function(data){
			console.log(data);	
			$(''#dynamic-content'').html('''');    
			$(''#dynamic-content'').html(data); // load response 
			$(''#modal-loader'').hide();		  // hide ajax loader	
		})
		.fail(function(){
			$(''#dynamic-content'').html(''<i class="glyphicon glyphicon-info-sign"></i> Something went wrong, Please try again...'');
			$(''#modal-loader'').hide();
		});
		
	});

function ajaxAction(action) {
				data = $("#frm_"+action).serializeArray();
				$.ajax({
				  type: "POST",  
				  url: "response.php",  
				  data: data,
				  dataType: "json",       
				  success: function(response)  
				  {
					$(''#''+action+''_model'').modal(''hide'');
					$("#employee_grid").bootgrid(''reload'');
				  }   
				});
			}
			
			$( "#command-add" ).click(function() {
			  $(''#add_model'').modal(''show'');
			});
			$( "#btn_add" ).click(function() {
			  ajaxAction(''add'');
			});
			$( "#btn_view" ).click(function() {
			  ajaxAction(''view'');
			});
			$( "#btn_edit" ).click(function() {
			  ajaxAction(''edit'');
			});
});
</script>

<div id="view_model" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" style="display: none;">
             <div class="modal-dialog modal-lg"> 
                  <div class="modal-content"> 
                  
                       <div class="modal-header"> 
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
                            <h4 class="modal-title">
                            	<i class="glyphicon glyphicon-user"></i> Música Litúrgica
                            </h4> 
                       </div> 
                       <div class="modal-body"> 
                       
                       	   <div id="modal-loader" style="display: none; text-align: center;">
						 
                       	   	<img src="ajax-loader.gif">
                       	   </div>
						  <input type="hidden" value="edit" name="action" id="action">
				<input type="hidden" value="0" name="view_id" id="view_id">
                  <div class="form-group">
                    <label for="name" class="control-label" >Name:</label>
                    <input type="text" class="form-control" id="view_name" name="view_name"/>
					<div class="form-group">
                    <label for="salary" class="control-label">Salary:</label>
                    <input type="text" class="form-control" id="view_salary" name="view_salary"/>
                  </div>
				  <div class="form-group">
                    <label for="salary" class="control-label">Age:</label>
					<input type="text" class="form-control" id="view_age" name="view_age"/>
					 </div>
                           <!-- content will be load here -->                          
                           <div id="dynamic-content"></div>