EVOLUTION-NINJA

Edit File: admin_home_images.php

<?php $this->load->view('includes/admin_dashboard_header');?>

<?php $this->load->view('includes/admin_menu');?>

<div id="page-wrapper">
        <div class="container-fluid">
	       	<div class="middle_work_table">
				<div class="container">		
					<h3 class="page-title">Add Images</h3>	
					<div class="file-uploader">
						<form class="upload_img" enctype="multipart/form-data">
						
							<div class="file-uploader__message-area">
								<p>Please upload only Image(s).</p>
							</div>
							<ul class="file-list"></ul>
							<div class="hidden-inputs hidden"></div>
							<div class="file-chooser">
								<input id="file" class="file" name="file" type="file">
							</div>
							<button class="form-control btn btn-default mybt profilebt" name="fileSubmit" type="submit">Submit</button>
						</form>
					</div>

<div id = "jaytab" class="jaytab">
						<table id="list2"></table>
						<div id="pager2"></div>
						<div id="dialogSelectRow" title="Warning" style="display:none">
							<p>Please select row</p>
						</div>									
					</div>
					
				</div> 	
			</div> 
        </div>
            
    </div>

<?php $this->load->view('includes/admin_dashboard_footer');?>

<style>

@media only screen and (min-width:320px) and (max-width:641px){
.ui-jqgrid {
margin-left: 1px !important;
}

#sData span, #cData span {
	margin-left: 0 !important;
	}
}
@media only screen and (min-width:641px) and (max-width:991px){

.ui-jqgrid {
margin-left: 1px !important;
}
#jaytab{
	margin-top: 0 !important;
	margin-left: 0 !important;
	overflow-x: scroll;
	width: 100% !important;
	padding-left:0 !important;
	padding-right:9px !important;
}

}

#sData span, #cData span 
{
    margin-left: 3px;
}
#sData {
    height: 29px;
}
#cData {
    height: 29px;
}

.jqgfirstrow
	{
		    height: 0px !important;
	}
	
	.text_color a{
	
	color:white !important;

</style>  
<script type="text/ecmascript" src="<?php echo base_url('jqgrid/js/jquery.jqGrid.js'); ?>"></script>
                      
     <script type="text/ecmascript" src="<?php echo base_url('jqgrid/js/i18n/grid.locale-en.js'); ?>"></script>
                    <script type="text/ecmascript" src="<?php echo base_url('jqgrid/js/jquery.jqGrid.min.js'); ?>"></script>
<script type="text/javascript">

$('.upload_img').submit(function(e)
	{

e.preventDefault();

formdata = new FormData($(this)[0]);
		$.ajax({
			type:'post',
			url:'<?php echo base_url("controller/insert_home_images"); ?>',
			data:formdata,
			contentType: false,
            processData: false,
			success:function(response){
                  response=jQuery.parseJSON(response);
                  console.log(response);

if(response.result==1)
                    {    
                        alert(response.message);
                        $("#list2").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');    
                        location.reload();
                    }
                    else 
                    {
                         alert(response.message);         
                    }
                }
			 
		});
		
	});

$(document).ready(function (){

jQuery("#list2").jqGrid({
			url:"<?php echo base_url('controller/get_added_home_images')?>",	 
			datatype: "json", 
		   colNames:['Id','Image','Approve','DELETE'],
				
			colModel:[
					  {name:'id',index:'id',hidden:true, width:50,editable:true,width:100},
					  
					  {name:'image',index:'image',editable:false,editrules:{}, width:100,search:false,
		                formatter: function (cellvalue, options, rowObject) {
		                	if(rowObject.image)
		                	{
 								
 									var retVal = '';
 								 	retVal +='<img width="150px" height="150px" src="<?php echo base_url('home_page_images');?>/'+rowObject.image+'" class="profile-pic"/>';
 								 	return retVal;
 									                   	
		                	}
		                	else
		                	{

return 'No files to display';
		                	}

}},
		               
					  //{name:'approve_status',index:'approve_status', width:50,editable:true,width:100},
					  {name:'approve_status',index:'approve_status',align: "center",editable:false,search:false,editrules:{required: true}, width:120,cellattr: function (rowId, tv, rawObject, cm, rdata) 
				      {
				                      return ' ';
				                  },formatter:function (cellvalue, options, rowObject) {  
				                   if(rowObject.approve_status != "APPROVED")  
								      return "<input type='button'  value='APPROVE' onclick='approve_status($(this));'  \>";
								      else
				      					return "<b>APPROVED</b>";
				     }},
					  {name:'',index:'',align: "center",editable:false,editrules:{required: true}, width:75,cellattr: function (rowId, tv, rawObject, cm, rdata) 
							{
                  	     return ' onclick="fun_delete($(this))" ';
                  		},formatter:function (cellvalue, options, rowObject) {    
							return "<input type='button' class='fa fa-eye' value='DELETE'  \>";
				 		}},
					],
						height: 'auto',
		      	rowNum:20,
		      	rowTotal: 2000,
		      	rowList : [20,30],
		      	rownumbers: true,
		      	rownumWidth: 40,
		      	pager:"#pager2", 
		      	sortname:'id', 
		      	viewrecords: true,
		      	gridview: true,
		      	autowidth: true,
		      	sortorder:"asc",
		       	loadonce:true,
				caption:"Home page Images",
			
  });

$("#list2").jqGrid('filterToolbar',{searchOperators : false}); //for multisearch code,remove if not required
	
	 		$("#list2").jqGrid('navGrid','#pager2',
				{edit:false,add:false,del:false,search:false,refreshstate:"current"},
				{ },
		        { },
		        { }, 
				{
			    	sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
			        closeOnEscape: true, 
			        	multipleSearch: true, 
			         	closeAfterSearch: true }
			);

});

function fun_delete(rowId)
	{
	  var id = rowId.closest('tr').attr('id'); 
	  var ids=id;
	
		
		$.ajax({
			type:'post',
			url:'<?php echo base_url("controller/delete_home_page_images"); ?>',
			data:{'id':ids},
			async:false,
			success:function(response)
			{
                  response=jQuery.parseJSON(response);
                  console.log(response);

if(response.result == 1)
				{
					alert(response.message);
					$("#list2").jqGrid('setGridParam',{datatype:'json'}).trigger('reloadGrid');
				}
				else
				{
					alert(response.message);
				}
				
			}
			 
		});
		
 
	}

function approve_status(rowId)
	{
		var id = rowId.closest('tr').attr('id'); 
	  	var ids=id;

$.ajax({
			type:'post',
			url:'<?php echo base_url("controller/approve_home_page_images"); ?>',
			data:{'id':ids},
			async:false,
			success:function(response)
			{
                  response=jQuery.parseJSON(response);
                  console.log(response);

</script>
 	<style>
			.file-uploader {
    max-width: 400px;
    height: auto;
    //margin: 2em auto;
    margin-left:25%;
}
.file-uploader {
    //background-color: #dbefe9;
    background-color: #c7e7ff;
    border-radius: 3px;
    color: #242424;
}
file-uploader * {
    display: block;
}
.file-uploader__message-area {
    font-size: 18px;
    padding: 1em;
    text-align: center;
    //color: #377a65;
    color: #0065b3;
}
.file-chooser {
    width: 90%;
    margin: .5em auto;
}
.file-chooser {
    padding: 1em;
    transition: background-color 1s, height 1s;
}
.mybt {
    background: #0261b7 !important;
    color: white !important;
   //width: 100%;
}
		</style>