CODEWITHSUNDEEP
jqueryasp.net-mvcpartial-views
hmahdavi
hmahdavi

Reputation: 2354

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

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?

Upvotes: 2

Views: 3579

Answers (2)

Mohammad Akbari
Mohammad Akbari

Reputation: 4766

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|| {}));

Upvotes: 2

Satpal
Satpal

Reputation: 133403

Since you are using 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

Upvotes: 3

Related Questions