How to bind click event of button into PartialView (MVC)?

Question

I make a page in asp.net MVC .In this page exist a View and a PartialView.I put button into partialview and write Countinue function into View.

button:

    <button type="button" class="btn btn-warning center-block btn-large" id="Continue" onclick="Continue(this);">Continue</button>

js:

 var Continue=function (e) {
            e.preventDefault();
            if ($('#FieldsetCharterFlightsReturn article').size() < 1) {
                if (validateDeparturef(e)) {
                    $("#CharterFlightsForm").submit();
                }

            }
                        if ($('#FieldsetCharterFlightsReturn article').size() > 0) {
                if (validateDeparturef(e) && validateArrivalf(e)) {
                    $("#CharterFlightsForm").submit();
                }
            }
        };

Now When i click on the button get this error:

TypeError: Continue is not a function

What is right way to bind event of elements into PartialView?

Have your properly included the Continue function definition in the page ? Also you are passing this which will be the button and it will not have a method called preventDefault() — Shyju
– Shyju, Commented Aug 25, 2016 at 12:36
Is it in the same view ? or an external js file ? can you put a console.log("This function exist"); just above your function definition, run your page and verify that message appear in the browser console. — Shyju
– Shyju, Commented Aug 25, 2016 at 12:39
Try one like function Continue() also you need to pass event like onclick="Continue(event);" — Satpal
– Satpal, Commented Aug 25, 2016 at 12:43

Satpal · Accepted Answer · 2016-08-25 12:48:27Z

3

Since you are using jquery bind event using it instead of ugly-inline click handler.

 $(function(){
    $('#Continue').on('click', Continue);
 })

OR, Using Event delegation

 $(document).on('click', '#Continue', Continue);

And remove inline onclick="Continue(event);" handler

answered Aug 25, 2016 at 12:48

Satpal

134k13 gold badges168 silver badges171 bronze badges

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

1 Comment

hmahdavi Over a year ago

OK.If i don't use ajax for get partialveiw This works currently. Hove ever I found a another way that replace button tag with a tag and delete preventDefault() function.In this way I can use inline code and this work always. Thanks a lot :)

Mohammad Akbari · Accepted Answer · 2016-08-25 13:00:49Z

2

Use following pattern:

<button type="button" class="btn btn-warning center-block btn-large" id="Continue" onclick="module.Continue(event);">Continue</button>

(function($, module) {

    module.Continue=function (e) {
        e.preventDefault();
        if ($('#FieldsetCharterFlightsReturn article').size() < 1) {
            if (validateDeparturef(e)) {
                $("#CharterFlightsForm").submit();
            }

        }
        if ($('#FieldsetCharterFlightsReturn article').size() > 0) {
            if (validateDeparturef(e) && validateArrivalf(e)) {
                $("#CharterFlightsForm").submit();
            }
        }
    };

}(jQuery, module= window.module|| {}));

answered Aug 25, 2016 at 13:00

Mohammad Akbari

4,8146 gold badges53 silver badges80 bronze badges

Collectives™ on Stack Overflow

How to bind click event of button into PartialView (MVC)?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related