on Ajax link click javascript error?

Question

In my partial view I have this ajax actionlink

@foreach (var times in Model.ProvidedDateTimes)
{
    <tr>
        <td>
            @times.StartDateTime &nbsp; to &nbsp; @times.EndDateTime
        </td>
        <td> @Ajax.ActionLink("Delete", "DeleteResponse", new { responseid = @times.ResponseId }, new AjaxOptions { UpdateTargetId="dummy",OnBegin = "begin",OnComplete="complete",OnFailure="fail",OnSuccess = "success"})</td>
    </tr>
}

These are the functions

$(function begin() {
    alert("begin");
});
$(function complete() {
    alert("complete");
});
$(function fail() {
    alert("fail");
});

function deleteResponse(id){
        var url = $("#providedTimes").data('url');
        url = url + "&t=" + new Date().getTime();

        $.get(url, function (data) {

            $('#providedTimes').html(data);
        });
    };

When I run the application I get javascript alert begin complete then fail, all twice.

When i try to click the delete i get error on console that says enter image description here The bundles I render are

   bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-2.1.0.min.js",
                 "~/Scripts/jquery.unobtrusive-ajax.min.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/Scripts/jquery.validate.min.js",
                "~/Scripts/jquery.validate.unobtrusive.min.js"));

and in _layout view

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")


@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/Scripts/jquery-ui-1.10.4.js")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/Kendo")
@Scripts.Render("~/bundles/toastr")

Any idea why I'm getting error in console?

Why have you encapsulated your functions within $()? Perhaps if your page just said function begin() instead of $(function begin(){}) — Joel Etherton
– Joel Etherton, Commented Mar 13, 2014 at 14:52
You are creating your functions in your document.ready event. they are not available outside of it. Create a <script> tag before your form (or foreach...) and define the functions there. — Andrei V
– Andrei V, Commented Mar 13, 2014 at 14:53

David · Accepted Answer · 2014-03-13 14:56:39Z

1

When you define a function like this:

$(function begin() {
    alert("begin");
});

You're not really "defining" the function in the way that you think. $() expects a function as a parameter, and you're giving it one. All it does is execute that function. Once it's done, that definition isn't retained. So immediately following this statement, begin is no longer in scope anywhere else.

Just define your functions directly:

function begin() {
    alert("begin");
};

If you want to execute that function when the document is ready, you can still pass it to the jQuery object:

$(begin);

answered Mar 13, 2014 at 14:56

David

221k42 gold badges245 silver badges337 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

A. Wolff · Accepted Answer · 2014-03-13 14:56:14Z

1

You want that instead:

function begin() {
    alert("begin");
};

$(begin);

And the same for all other methods. Even not sure you want to call Fail/Complete on ready handler.

answered Mar 13, 2014 at 14:56

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Collectives™ on Stack Overflow

on Ajax link click javascript error?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related