0

I have a form with a single text box and a button, once the button is pressed the value entered in the textbox is then passed to my index method that runs a linq query. the results are then to be displayed on a modal.

I'm new to ajax but after looking at several other posts Ive come up with the below, my problem is that the ajax runs and the modal opens but the data has not been populated. Can anyone see where I'm going wrong?

Here is my code:

Form:

<form id="getDataForm" action="/Home/Index" method="get" role="form">
        <label for="platform" class="control-label">Enter Code, IMEI or Phone Number:</label><br />
        <div class="inner-addon left-addon">
            <i class="glyphicon glyphicon-qrcode"></i>
            <input id="filtername" name="filtername" type="text" class="form-control" value="" placeholder="Please Enter Code" data-toggle="popover" data-original-title="Larger Tool tip."/>
        </div> 
        <input id="btnGetData" class="btn btn-success" value="GO" />                     
    </form>

Home/Index method:

[HttpGet]
    public ActionResult Index(string filtername)
    {
        var filterresults = from m in db.UserInfoes select m;
        filterresults = filterresults.Where(x => x.UserCode.ToString().Contains(filtername)).OrderBy(x => x.UserCode);

        MasterModel model = new MasterModel();
        model.UserInfo = filterresults;

        return CheckUserLogged(model);
    }

JQuery: 

$("#btnGetData").click(function () {
    $.ajax({
        type: "GET",
        url: "/Home/Index",
        data: $('#getDataForm').serialize(),
        datatype: "html",
        success: function (data) {
            $('#basicModal2').modal('show');
            console.log("yaya");
        }
    });        
});

Edit Added Modal:

@* Existing Request - Date Selection Modal *@
<div class="modal fade" id="basicModal2" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&amp;times;</button>
            <h4 class="modal-title" id="myModalLabel">Summary</h4>
        </div>
        <div class="modal-body">
            <h2>Results</h2>
            <span id="printCode"></span><br />

            <div class="pull-right"><button type="submit" class="btn btn-success" id="toggle">Toggle</button> </div>
            <script>
                $(document).ready(function () {
                    $(".checks").hide()
                });
            </script>
            <table class="table">
                <thead>
                    <tr>
                        <th></th>
                        <th>Date</th>
                        <th>Diagnostic Mode</th>
                    </tr>
                </thead>
                <tbody>
                    @if (Model != null)
                    {
                        foreach (var item in Model.UserInfo)
                        {
                            <tr>
                                <td>
                                    <input type="checkbox" class="checks">
                                </td>
                                <td class="modal2row" data-toggle="modal" data-id="1" data-target="#basicModal3">
                                    @Html.DisplayFor(modelItem => item.CreationDateTime)
                                </td>
                                <td class="modal2row" data-toggle="modal" data-id="1" data-target="#basicModal3">
                                    @Html.DisplayFor(modelItem => item.AppModeId)
                                </td>
                            </tr>
                        }
                    }
                </tbody>
            </table>

Usefull info:

I followed this which allowed me to see the value being called as it should: 

Go to the web page which makes the AJAX call
In Chrome press F12
Go to the Network tab
Activate the AJAX call by submitting the form #reservSearch
In the Network tab look for a call to /Home/GetRates
Click it
Check the Preview and Response tabs to see the output from your server
Is it displaying the expected HTML data which your AJAX call is listening for?
http://stackoverflow.com/questions/21533285/why-the-ajax-script-is-not-running-on-iis-7-5-win-2008-r2-server/21617685#21617685

The output in my case:

Request:    GET /Home/Index?filtername=3it60nhrha HTTP/1.1 (filtername=3it60nhrha is expected)
Response    HTTP/1.1 200 OK
Baggerz
  • 387
  • 6
  • 11
  • 24
  • You have to do something with the data you get in the success method in order to display it. – antlersoft Sep 23 '14 at 16:37
  • 1
    In your ajax, you are calling Index method with filtername as a parameter but the value of the filtername is not passed from ajax. Also, you cannot bind model data from an actionResult through an ajax, you would need to do a fullpostback for that.Also, I did not see any code in your markup with binds model.UserInfo data. In reality, you dont need actionResult return type if you are not going to bind the data, just use JSonResult as return type. – DinoMyte Sep 23 '14 at 17:25
  • Thanks for your response's. I missed the modal itself by accident here you can see where I bind model.UserInfo data. Ive added the missing code above. – Baggerz Sep 24 '14 at 08:22
  • The biggest problem with this code is with the Index method, you do a query statement against your context I believe `db`, you should really handle the disposed of the context in that method: `using(db){ var userInfos = db.UserInfoes.Where(x => x.UserCode.ToString().Contains(filtername)).OrderBy(x => x.UserCode); }`. Secondly, I noticed that you used a query statement to perform a select, then a linq statement to perform a where. I would use one or the other but not both, it will get confusing. – Callum Linington Sep 24 '14 at 08:49
  • Hi No1_Melman could you explain what you mean by "disposed of the context" and how this effects the jquery? – Baggerz Sep 24 '14 at 09:39

0 Answers0