0

I am running into a problem with a webgrid I am creating in MVC. The grid is generated in a partial view that is updated via ajax form in order to not have to reload the entire page. The partial view itself is returned by a controller method. I have also used a simple jquery script in order to highlight selected rows and copy their related values to a form. The script works fine except for when I go to another page or sort the grid. After selecting that action, the jquery seems to be ignored as the .click function fails to activate.

Should I search for new values, the grid is generated again and works without trouble until, again, I try to travel to another page or order the grid. I'll include the ajax form:

@using (Ajax.BeginForm("webby", "Home", new AjaxOptions {HttpMethod = "Get", InsertionMode = InsertionMode.Replace, UpdateTargetId = "target" }))
{
<div>
    House Number
    <input type="text" id="houseno" name="houseno" />
</div>
<div>
    Location
    <input type="text" id="location" name="location" />
</div>
<p>
    <input type="submit" value="Search" />
</p>
} 


<div class="target" id="target">

</div>

I also have the webgrid (in the partial view):

@{
WebGrid grid = new WebGrid(Model, rowsPerPage: 10, ajaxUpdateContainerId: "grid");
}

<div id="grid">
    @grid.GetHtml(
columns: grid.Columns(
            grid.Column("FarmName", header: "Grower Name"),
            grid.Column("HouseNo", header: "House Number"),
            grid.Column("Flock_Age", header: "Flock Age"),
            grid.Column("KillDate", header: "Sample Date"),
            grid.Column("breedcode", header: "Breed Code"),
            grid.Column("PlantNo", header: "Location")
)
)
</div>

And here is the script meant to select the row (obviously the script is in the partial view):

    <script type="text/javascript">
        $(document).ready(function () {

        $("tr").click(function () {
            if (this.cells[2] != null) 
<!--This if statement prevents the bottom row from throwing an error when clicked--> 
            {


                $(this).css('background', 'yellow');

                $('#FLOCK_AGE').val(this.cells[2].innerHTML);
                $('#SMPL_DATE').val(this.cells[3].innerHTML);
                $('#GROWER_NAME').val(this.cells[0].innerHTML);
                $('#HOUSE_NUMBER').val(this.cells[1].innerHTML);
                $('#BREEDCROSS').val(this.cells[4].innerHTML);
                $('#LOCATION').val(this.cells[5].innerHTML);
            }

        });
    });


</script>

Is there an issue with the partial view not being called when the new page is selected or the grid is sorted? Why would this drop the jquery script already in the partial view? I am still very green to web dev, so please excuse any naivety.

Thank you for your time.

user3820816
  • 11
  • 1
  • I actually determined the problem. I added ajaxupdatecallback to my grid and pointed it at a jquery function that, after (document).ready, set up the .click funtion again. Perhaps a little ham-handed, but affective. Please let me know if there is a more elegant option. Thanks! – user3820816 Jul 09 '14 at 17:59
  • One more detail, for some reason, the script must be in the view where the ajax form is, not the partial view. Maybe obvious to some, but I felt it should be noted. – user3820816 Jul 10 '14 at 18:16

0 Answers0