CODEWITHSUNDEEP
jqueryajaxasp.net-mvcasp.net-mvc-4
user3163213
user3163213

Reputation: 701

ajax success function not fired MVC

I am trying to get my success result in a div through ajax query.

Ajax query is taking model value as parameter and filtering result according to that.

Here is my ajax query and view page-

@model IEnumerable<FunRanger.Models.TagModel>
@foreach (var item in Model) {
    <script type="text/javascript">
        $(function () {
            $('#' + '@item.tagId').click(function () {
                $.ajax({
                    url: '/Tag/TagFilter/?tagName=' + '@item.tagName',
                    type: 'post',
                    success: function (data) {
                        $('#funhome-partial').html(data);
                    }
                });
            });

        });
    </script>
    <div class="tags">
        <a href="#" id="@item.tagId">#@item.tagName</a>
    </div>

}

I am trying to filter this result in another div whose id is 'funhome-partial`. This div is in Another project file of my project.

Action-

[HttpPost]
public ActionResult TagFilter(TagModel tag) {
    var cardlist = (from u in db.CardTables
                    where u.CardHashCode.Contains(tag.tagName)
                    select new CardModel {
                        cardHashCode = tag.tagName,
                        cardDate = u.CardDate,
                        cardFileName = u.CardFileName,
                        cardFilePath = u.CardFilePath,
                        cardID = u.CardID,
                        cardTitle = u.CardTitle
                    }).ToList();
    return View("FunHome", cardlist);

}

Everything works fine. I get filtered records according to that parameter that i can check by putting breakpoint there.

But This query doesn't call success function of ajax and shows me this error-

In case of a parameter named RipEnglish.

Failed to load resource: the server responded with a status of 500 (Internal Server Error) http://localhost:61203/Tag/TagFilter/?tagName=RipEnglish

How do I get ajax success result called, also is this a fine way of doing it?

Upvotes: 2

Views: 8843

Answers (3)

user3163213
user3163213

Reputation: 701

I managed this issue working.

It was so simple to track after @gooberverse's answer.

I checked in developer tools>network>response and it said me no view engine supports the searched locations or not found in searched locations error.

Though I had to create a shared view--> shared>_SharedView and had to render it with the same method.

And it worked like charm.

Upvotes: 0

ramiramilu
ramiramilu

Reputation: 17182

I reconstructed your scenario and then solution goes this way, you need to check out your jquery click function.

Sample model which I used - 

public class Tag
{
    public string TagName { get; set; }
}

Controller Actions - 

    public ActionResult Index()
    {
        return View();
    }

    public ActionResult SubmitTag(Tag t)
    {
        return new ContentResult() { Content = t.TagName + "1" };
    }

Index View with JQuery - 

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>
    $(function () {
        $("#ClickMe").click(function () {

            var tag = {
                "TagName": "SampleTag"
            };

            $.ajax({
                url: "@Url.Action("SubmitTag")",
                type: "POST",
                data: JSON.stringify(tag),
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    $('#funhome').html(data);
                },
                error: function (response) {
                    alert(response.responseText + "e");
                }
            });
        });
    });
</script>

<input type="button" id="ClickMe" value="ClickMe" />
<div id="funhome"></div>

And finally the output -

enter image description here

At debugging -

enter image description here

Upvotes: 0

gooberverse
gooberverse

Reputation: 265

AJAX can be difficult to troubleshoot if you don't have a lot of experience with it. The Developer Tools (or FireBug) available for all modern browsers are your friend. They make it much easier to see/understand what the server is returning as a response.

Since the request is using Ajax, the browser won't render any error pages that are returned.

Using Chrome (the other tools are similar and usually opened with CTRL + SHIFT + I or F12):

  1. Open the Developer Tools pane with (CTRL + SHIFT + I).
  2. Click the Network tab.
  3. Click your page element to fire the click handler and send the Ajax request.
  4. Find and click the network request in the Network tab (bottom-left).
  5. The pane next to the network request has Tabs for 'Headers', 'Preview' and 'Response'.

Headers will show you the contents of the request (what got sent to the server).

Response will show you the content of the servers response. This might be JSON for a successful request or it might be HTML source for an error page if an error occured.

The Preview tab will render the servers Response (if possible). This is especially helpful if you receive an error response/page from the server since you won't have to wade through the raw HTML to find the error details.

If your AJAX call is failing, and your server returns a 500 error, you can always check your server logs or look at the Network > Preview tab to see the error detail that is returned. You can troubleshoot the error just as you would any traditional server response.

Upvotes: 3

Related Questions