JavaScript/Jquery - scripts dont work after calling html()

Question

I am using ASP.NET MVC ( Razor ) and Jquery my page looks like below ( simplyfied ). When i first load my page everything works fine every script is working i can open datepicker etc. But after i choose from dropdown my scripts stop working. Returned result is ok( there is no problems on server side ), what it is going here is basically i send whole form to server side fills some data from database and send back content for div. Can i somehow reinitialize scripts or something, cause for me it looks like js/jquery "didnt notice" new content?

<div id="commissionContent">    
 <table>            
        <tr>
            @Html.DropDownListFor(m => m.OfferId, new SelectList(Model.Offers, "Id", "DocumentNo"),
                        "-- Wybierz --", new { id = "selectedOffer" })
        </tr>          
        <tr>
            <td colspan="5">
                @Html.LabelFor(m => m.RealizationDate)<br />
                @Html.TextBoxFor(m => m.RealizationDate, new { id = "CommissionRealizationDate" })
            </td>
            <td></td>
            <td></td>
        </tr>
</div>

@section JavaScript
{
<script type="text/javascript">
    $(function () {
        $('#CommissionRealizationDate').datepicker({
            format: "dd/MM/yyyy",
            autoclose: true
        });

        offerType.init();            
    });

    var offerType = {
        init: function () {
            //this.selectedKind();
            this.selectedOffer();
        },
        selectedOffer: function () {
            $('form').on('change', '#selectedOffer', function () {
                **$.post("ChoosenCommission", $('form').serialize(), function (data) {
                    $("#commissionContent").html(data);**

                    });
        }
    };
  }

I just noticed the same thing ed-X said, it didnt work before. Propably the problem was that i was returning from server whole page ( not just div content ) and it maybe screwd something ( anyone knows? ).

P.S. U guys are fast i just went to make a tea and was going to answer myself :P

any console errors???

Kartikeya Khosla
– Kartikeya Khosla

2014-08-13 07:52:26 +00:00
Commented Aug 13, 2014 at 7:52 — Kartikeya Khosla
– Kartikeya Khosla, Commented Aug 13, 2014 at 7:52
Put inside document.ready?

Joakim M
– Joakim M

2014-08-13 07:54:13 +00:00
Commented Aug 13, 2014 at 7:54 — Joakim M
– Joakim M, Commented Aug 13, 2014 at 7:54

red-X · Accepted Answer · 2014-08-13 07:56:41Z

1

You have to reinitialize the datepicker and possible other events in the replaced piece of html.

var init = function () {
    $('#CommissionRealizationDate').datepicker({
        format: "dd/MM/yyyy",
        autoclose: true
    });

    offerType.init();            
}

$(init);

var offerType = {
    init: function () {
        //this.selectedKind();
        this.selectedOffer();
    },
    selectedOffer: function () {
        $('form').on('change', '#selectedOffer', function () {
            $.post("ChoosenCommission", $('form').serialize(), function (data) {
                $("#commissionContent").html(data);
                init()
                });
    }
};

}

answered Aug 13, 2014 at 7:56

red-X

5,1281 gold badge28 silver badges40 bronze badges

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

Collectives™ on Stack Overflow

JavaScript/Jquery - scripts dont work after calling html()

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related