0

i want to be to display child records when i click a button . The data is displayed as a table.

I have created a partial view that will display the records.

I have created a controller action method to return the partial view.

I have also added javascript code on the main page/view to call and load the dialog .

Here is the code for the main page/view

@model IEnumerable<LearningApp.ViewModel.Requistion>
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    @{
        ViewBag.Title = "Index";
    }
</head>
<body>
    <h4>Requistion List</h4>
    <hr />
    <table  class ="table table-bordered"cellpadding="0" cellspacing="0" id="RequestGrid">
        <tr>
            <th>Request #</th>
            <th>Date Made</th>
            <th>Employee Name</th>
            <th>Purpose</th>        
            <th>Directorate</th>
            <th>Station</th>

            <th></th>
        </tr>
        @foreach (var r in Model)
        {
            <tr>
                <td>@r.RequestID</td>
                <td>@r.RequestDate</td>
                <td>@r.EmployeeName</td>
                <td>@r.Purpose</td>
                <td>@r.Directorate</td>
                <td>@r.Station</td>
                <td> <button  type="button"class="ids"  value="View Details" data-id="@r.RequestID"> View Details</button></td>
            </tr>
        }
    </table>    

    <div id="dialog" title="View Requistion Details" style="overflow: hidden;">
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">

        </script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
        <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css"
              rel="stylesheet" type="text/css" />

        <script type="text/javascript">

            $(document).ready(function () {

                $("#dialog").dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true                   
                });

                $('.ids').click(function () {

                    var requestid = $(this).data('id');
                    //alert("You clicked me...again" + requestid)
                    //var productId = $(this).data('id');
                    //alert(requestid)
                    $.ajax({
                        type: "POST",
                        url: "/tblRequistions/GetRequistionDetail",
                        data: '{RequestID: "' + requestid + '" }',
                        contentType: "application/json; charset=utf-8",
                        dataType: "html",
                        success: function (response) {
                            $('#dialog').html(response);
                            $('#dialog').dialog('open');
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        },
                        error: function (response) {
                            alert(response.responseText);
                        }
                    });
                });

            });
        </script>


</body>

</html>

Here is the controller method to return partial view.

[HttpPost]
        public ActionResult GetRequistionDetail(int RequestID)

        {
            List<RequistionDetails> listofdetails = new List<RequistionDetails>();
            listofdetails = r.getAllRequistionsDetails(RequestID);
            return PartialView("_details",listofdetails);

        }

If remove the portion of code below from the main view, and i run the page and i click on the button (view details) the ajax call to the controller is made and the correct parameter is passed.

 $("#dialog").dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true                   
                });

If i leave it, nothing happens(ajax call not made).

I have tried to change autoOpen: True to see whether the dialog can open when the view loads, it does not load.

So i suspect the problem to be with the dialog.

Any reason why the dialog code is not working.?

Ronald

Improve this question
3
  • May not be the only issues, but try changing the ajax data portion to: data: { RequestID: requestid },, and the dialog does not have an open method defined to use dialog('open').
    – Paul T.
    Commented Dec 15, 2019 at 23:57
  • I have made the change as suggested. There is also the open method defined in the code. success: function (response) { $('#dialog').html(response); Still no luck yet... $('#dialog').dialog('open');
    – user3079559
    Commented Dec 16, 2019 at 7:38
  • Never mind my last part about the open method, I was thinking of something else. can you add console.log(response) in the success function to see what the response data contains, if anything? Also see if removing the contentType parameter changes anything.
    – Paul T.
    Commented Dec 17, 2019 at 1:21

1 Answer 1

Reset to default
0

Take a look at this code:

$(function() {
  function getDataById(u, n, tObj) {
    if (n == undefined || isNaN(n)) {
      return false;
    }
    var results = false;
    console.log("AJAX, making request:", u, "ID:", n);
    $.ajax({
      type: "POST",
      url: u,
      data: {
        RequestID: n
      },
      contentType: "application/json; charset=utf-8",
      dataType: "html",
      success: function(r) {
        results = r;
      },
      error: function(x, s, e) {
        console.log("AJAX", s, e, x);
      }
    });
    if (tObj != undefined) {
      tObj.html(results);
    }
    return results;
  }

  $("#dialog").dialog({
    autoOpen: false,
    width: 400,
    modal: true
  });

  $('.ids').click(function() {
    var rHtml = getDataById("/tblRequistions/GetRequistionDetail", $(this).data('id'));
    if (rHtml) {
      $("#dialog").html(rHtml).dialog("open");
    } else {
      // Proof of Concept / Example Data
      $("#dialog").html("**SAMPLE**<br />ID: 1, Date: 12/12/12, Name: Homer Simpson, Request: Donut, Director: Mr. Burns, Location:	Plant").dialog("open");
    }
  });
});
<h4>Requistion List</h4>
<hr />
<table class="table table-bordered" cellpadding="0" cellspacing="0" id="RequestGrid">
  <tr>
    <th>Request #</th>
    <th>Date Made</th>
    <th>Employee Name</th>
    <th>Purpose</th>
    <th>Directorate</th>
    <th>Station</th>
    <th></th>
  </tr>
  <tr>
    <td>1</td>
    <td>12/12/12</td>
    <td>Homer Simpson</td>
    <td>Donut</td>
    <td>Mr. Burns</td>
    <td>Plant</td>
    <td> <button type="button" class="ids" value="View Details" data-id="1"> View Details</button></td>
  </tr>
</table>

<div id="dialog" title="View Requistion Details" style="overflow: hidden;">
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/themes/blitzer/jquery-ui.css" rel="stylesheet" type="text/css" />

I cannot test with AJAX. So I included Sample Data for the dialog as a proof of concept, yet the script does try to connect to AJAX and shows the error to console.

It's written to be used in a few ways. You can also do this:

getDataById("/tblRequistions/GetRequistionDetail", $(this).data('id'), $("#dialog"));
$("#dialog").dialog("open");

I don't advise this method. If the AJAX call is slow or details don't return, the dialog could open with no data.

Improve this answer
2
  • Hello Twisty, i have tried the code and i get an error message displayed in the console : TypeError $("#dialog").dialog is not a function.
    – user3079559
    Commented Dec 17, 2019 at 7:43
  • The problem was due to conflicting JQuery libs in the shared. _Layout file. I have removed it and it is now working. Thanks so much.
    – user3079559
    Commented Dec 17, 2019 at 8:29

Not the answer you're looking for? Browse other questions tagged or ask your own question.