Click here to Skip to main content
15,886,026 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Quote:

Hi, Everybody

I need to call a jquery popupform function inside the onclick event tag a using ASP.NET MVC, Every thing is looking fine but when I click on the btn add new the jquery popupform function dose not open and also the return json data dose not execute
Please have a look to my code and reply the missing error
Thanks


What I have tried:

@{
    ViewBag.Title = "Employee List";
}
<h2 class="mt-3">Employee List</h2>

<a id="btnclick" class="btn btn-primary mb-2 ml-2" style="color:white" onclick="Popupform('@Url.Action("AddOrEdit","Employee")')"> class="fa fa-plus"> Add New</a>
<table id="TableEmployee" class="table table-striped table-bordered w-100" > 
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>


</table>


<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />



@section scripts{
    
   
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        
          var popup, datatable;
          datatable = $("#TableEmployee").DataTable({

                  "ajax": {
                      "url": "/Employee/GetData",
                      "type": "GET",
                      "datatype": "Json"
                  },
                  "columns": [
                      { "data": "Name" },
                      { "data": "Position" },
                      { "data": "Office" },
                      { "data": "Age" },
                      { "data": "Salary" }
                  ],

                  "Language": {
                      "TableEmployee": "No data found, Please click on Add New Button"
                  }
              });
    



          $(".btn.btn-primary").click(function () {
              alert('Hello this is jquery btn');
        function Popupform(url) {
            var formDiv = $('div/');
            $.get(url)
            .done(function (response) {
                formDiv.html(response);

                popup = formDiv.dialog({
                    autoOpen: true,
                    resizable: false,
                    title: 'Fill Employee Details',
                    height: 500,
                    width: 700,
                    close: function () {
                        popup.dialog('destroy').remove();
                    }
                });

            });
        }

    });

    });

</script>


 }



[HttpGet]
  public  ActionResult AddOrEdit(int id=0)
  {
      return View(new Employee_tb());
  }
Posted
Updated 5-Mar-18 6:27am
v5
Comments
Kornfeld Eliyahu Peter 5-Mar-18 13:32pm    
You are mixing the JQuery approach with the classic JavaScript approach...
Choose one...
It is either onclick in the markup or $(...).clikc()
Member 11851484 5-Mar-18 23:43pm    
can you give an example please
Olympas Mkhabela 5-Mar-18 16:53pm    
May I ask, you want to open a modal popup not a view right?
Olympas Mkhabela 5-Mar-18 16:55pm    
May I ask, do you want to open a modal popup or something if that nature? because what im seeing on your code is you trying to open call a view instead.
Member 11851484 5-Mar-18 23:45pm    
yes I want to open a popup form which is get data from controller, then I will use this form as edit employee form


this function dose not work


$(".btn.btn-primary").click(function () {
alert('Hello this is jquery btn');
function Popupform(url) {
var formDiv = $('div/');
$.get(url)
.done(function (response) {
formDiv.html(response);

popup = formDiv.dialog({
autoOpen: true,
resizable: false,
title: 'Fill Employee Details',
height: 500,
width: 700,
close: function () {
popup.dialog('destroy').remove();
}
});

});
}

});

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900