4
Answers

using jquery Model pop data not show on textbox

zeeshan akram

zeeshan akram
4y
620
1
How to show data in model pop , i also put the break point and check data , data is show and pass but not show on the text box . any expert can you tell me where i am wrong .
  1. <div class="modal-body">    
  2.                     <div class="row">    
  3.                         <div class="col-md-12">    
  4.                             <div class="panel widget">    
  5.                                     
  6.                                 <div class="panel-body">    
  7.                                     <form class="form-horizontal" action="#" role="form">    
  8.                                         <div class="panel-heading vd_bg-grey">    
  9.                                             <h3 class="panel-title"> <span class="menu-icon"> <i class="fa fa-bar-chart-o"></i> </span> Products Info</h3>    
  10.                                         </div>    
  11.                                         <br />    
  12.                                         <div class="row">    
  13.                                             <div class="col-md-4">    
  14.                                                 <label class="col-xs-3 control-label">Name</label>    
  15.                                                 <div class="controls col-xs-9">    
  16.                                                     <input type="text" placeholder="Product Name" name="" class="input-border-btm" id="PName" >    
  17.                                                 </div>    
  18.                                             </div>    
  19.                                             <div class="col-md-4">    
  20.                                                 <label class="col-xs-3 control-label">Model</label>    
  21.                                                 <div class="controls col-xs-9">    
  22.                                                     <input type="text" placeholder="Model" name="Model" id="Model" class="input-border-btm" >    
  23.                                                 </div>    
  24.                                             </div>         
  25.                                                     </div>    
  26.                                                 </div>    
  27.                                                 <!-- Panel Widget -->    
  28.                                             </div>    
  29.                                             <!-- col-md-12 -->    
  30.                                         </div>    
  31.                                         <div class="modal-footer">    
  32.                                             <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>    
  33.                                             <button type="button" class="btn btn-primary" id="btnUpdate" style="display:none;">Update</button>    
  34.                                             <button type="button" class="btn btn-primary" id="btnSave">Save changes</button>    
  35.                                         </div>    
  36.                                     </form>    
  37.                                 </div>    
  38.                             </div>    
  39.                             <!-- Panel Widget -->    
  40.                               
  41.                         </div>    
  42.                         <!-- col-md-12 -->    
  43.                             
  44.                     </div>    
  45.                 </div>    
  46. </div> 
Function in Jquery 
  1. function GetProductByID(ID)  
  2.    {  
  3.        $('#PName').css('border-color', 'lightgrey');  
  4.        $('#Model').css('border-color', 'lightgrey');  
  5.        $('#Condition').css('border-color', 'lightgrey');  
  6.   
  7.        $.ajax({  
  8.            url: "/Items/GetProd/" + ID,  
  9.            typr: "GET",  
  10.            contentType: "application/json;charset=UTF-8",  
  11.            dataType: "json",  
  12.            success: function (result) {  
  13.                $('#PName').val(result.PName);  
  14.                $('#Model').val(result.Model);  
  15.                  
  16.   
  17.                $('#mproduct').modal('show');  
  18.                $('#btnUpdate').show();  
  19.                $('#btnSave').hide();  
  20.            },  
  21.            error: function (errormessage) {  
  22.                alert(errormessage.responseText);  
  23.            }  
  24.        });  
  25.        return false;  
  26.    }  
Jquery Datatable 
  1. <script type="text/javascript">    
  2.     $(document).ready(function () {      
  3.         mProductList();    
  4.     });    
  5.     
  6.     //Load Data function    
  7.     function mProductList() {    
  8.         $("#productlist").DataTable({    
  9.             "processing": true,    
  10.             "serverSide": true,    
  11.             "filter": true,    
  12.             "orderMulti": false,    
  13.             "stripeClasses": ['odd-row', 'even-row'],    
  14.             "ajax": {    
  15.                 "url": "/Items/Product_List",    
  16.                 "type": "POST",    
  17.                 "datatype": "json"    
  18.             },    
  19.             "columnDefs":    
  20.             [{    
  21.                 "targets": [0],    
  22.                 "visible": false,    
  23.                 "searchable": false    
  24.             }],    
  25.             "columns": [    
  26.                 { "data": "ProductID", "name": "ProductID", "autoWidth": true },    
  27.                 { "data": "PName", "name": "PName", "autoWidth": true },    
  28.               
  29.                 { "data": "Model", "name": "Model", "autoWidth": true },    
  30.                 { "data": "Condition", "name": "Condition", "autoWidth": true },    
  31.                 { "data": "UnitPrice", "name": "UnitPrice", "autoWidth": true },    
  32.                 { "data": "Discount", "name": "Discount", "autoWidth": true },    
  33.                 { "data": "ProductSize", "name": "ProductSize", "autoWidth": true },    
  34.                 { "data": "ProductColor", "name": "ProductColor", "autoWidth": true },    
  35.                 { "data": "ProductType", "name": "ProductType", "autoWidth": true },    
  36.                 { "data": "UnitInStock", "name": "UnitInStock", "autoWidth": true },    
  37.                 {    
  38.                     data: null, render: function (data, type, row) {    
  39.                         return "<a href='#' class='btn btn-sm btn-info' onclick=GetProductByID('" + row.ProductID + "'); ><i class='fa fa-eye'></i></a>";    
  40.                     }    
  41.                 },     
  42.                    
  43.             ]    
  44.         });    
  45.     } 
 function 
  1. public JsonResult GetProd(int id)  
  2.        {  
  3.            ECommercedbEntities db = new ECommercedbEntities();  
  4.            var productl = (from p in db.Products  
  5.                            where p.ProductID == id  
  6.                            select new  
  7.                            {  
  8.                                PName = p.PName,  
  9.                                PDescription = p.PDescription,  
  10.                                Model = p.Model,  
  11.                               
  12.                            }).FirstOrDefault();  
  13.   
  14.            var productD = (from pd in db.ProductDetails  
  15.                            join p in db.Products on pd.ProductID equals p.ProductID   
  16.                            where pd.ProductID == id  
  17.                            select new  
  18.                            {  
  19.                                ProductID = pd.ProductID,  
  20.                                OS = pd.OS,  
  21.                                ProcessorType = pd.ProcessorType,  
  22.                                RAM = pd.RAM,  
  23.                                ScreenSize = pd.ScreenSize,  
  24.                                TouchScreen = pd.TouchScreen,  
  25.                                BatteryLife = pd.BatteryLife,  
  26.                                Camera = pd.Camera  
  27.                            }).ToList();  
  28.   
  29.            return Json(new { productl, productD }, JsonRequestBehavior.AllowGet);  
  30.   
  31.            //var plist= _IProducts.GetProductByID(id);   
  32.        } 
Answers (4)
Next Recommended Forum