$.submit form and replace div using ajax has strange jquery behaviour on the new partialview

Question

I think the problem is with jQuery, i don't know for sure.

Let me explain the situation.

Screenshot 1

I fill in the partialView and click on submit.

The submit is a jQuery event handler with the following code:

_CreateOrEdit.cshtml

<script type="text/javascript">
$(document).ready(function () {

    $('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
    $("input:checkbox,input:radio,select,input:file").uniform();
    $("input[type=date]").dateinput();


});
$(window).bind('drilldown', function () {
    $(".tabs > ul").tabs("section > section");
});
$("#CreateOrEditSubmit").submit(function () {
    //get the form
    var f = $("#CreateOrEditSubmit");
    //get the action
    var action = f.attr("action");
    //get the serialized data
    var serializedForm = f.serialize();
                $.post(action, serializedForm, function (data) {
                    $("#main-content").html(data);
                });
    return false;

});
</script>

This all works fine on the first-run.

Then when i submit the form when it is invalid (Screenshot 1),

        [HttpPost]
    public ActionResult Create(Client client)
    {

        if (ModelState.IsValid)
        {
            context.Clients.Add(client);
            context.SaveChanges();
            return RedirectToAction("Index");  
        }

        return PartialView(client);
    }

Then it tries to redisplay the same form again (Controller Client, Action Create), but something isn't triggered right (Screenshot 2). The layout is wrong (buttons still hidden), the tabs aren't working (javascript), ...

Worst of all, i don't get any error in Firebug, Chrome Console, ...

Does anyone have an idea what could be the problem, because i really haven't got a clue what's happening. It seems to me that nothing has changed, but it did :s

Fyi, an equivalant for the post function is :

 var request = $.ajax({
        type: 'POST',
        url: action,
        data: serializedForm,
        success: function (data) {
            $("#main-content").html(data);
        },
        dataType: 'HTML'
    });

    request.done(function (msg) {
        $("#log").html(msg);
    });

    request.fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });

Before submit, everything loads fine

After submit, same form is called. jQuery isn't working anymore and form is getting bricked (i think this is "side" behaviour from the jQuery breaking)

Edit: (on request) Here is the partialView in full

_CreateOrEdit.cshtml doesn't contain any javascript for now, the result is the same, so i only posted Create.cshtml.

Create.shtml

@model BillingSoftwareOnline.Domain.Entities.Client

<div class="container_12 clearfix leading">
<div class="grid_12">
    @using (Html.BeginForm("Create", "Client", FormMethod.Post, new { @class="form has-validation", id="CreateOrEditSubmit"}))
    {

        @Html.Partial("_CreateOrEdit", Model)

        <div class="form-action clearfix">
            <button class="button" type="submit">
                OK</button>
            <button class="button" type="reset">
                Reset</button>
        </div>
    }
</div>
</div>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.itextclear.js")">    </script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.uniform.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.tools.min.js")">    </script>



<script type="text/javascript">
$(document).ready(function () {

    $('input[type=text], input[type=password], input[type=url], input[type=email],     input[type=number], textarea', '.form').iTextClear();
    $("input:checkbox,input:radio,select,input:file").uniform();
    $("input[type=date]").dateinput();


});
$(window).bind('drilldown', function () {
    $(".tabs > ul").tabs("section > section");
});
$("#CreateOrEditSubmit").submit(function () {
    //get the form
    var f = $("#CreateOrEditSubmit");
    //get the action
    var action = f.attr("action");
    //get the serialized data
    var serializedForm = f.serialize();
    //                $.post(action, serializedForm, function (data) {
    //                    $("#main-content").html(data);
    //                });
    var request = $.ajax({
        type: 'POST',
        url: action,
        data: serializedForm,
        success: function (data) {
            $("#main-content").html(data);
        },
        dataType: 'HTML'
    });
    return false;

    request.done(function (msg) {
        alert(msg);
    });

    request.fail(function (jqXHR, textStatus) {
        alert("Request failed: " + textStatus);
    });



});

</script>

Answer 1

Add the following instructions to the end of your ajax callback, so that the styling is applied after the form has been injected to the DOM:

$('input[type=text], input[type=password], input[type=url], input[type=email],     input[type=number], textarea', '.form').iTextClear();
$("input:checkbox,input:radio,select,input:file").uniform();
$("input[type=date]").dateinput();
$(".tabs > ul").tabs("section > section");

Answer 2

Since this markup is returned as a partial, you need to reinitialize your javascript.

This is hacky, but try putting your script in the partial view, instead of _CreateOrEdit.cshtml, and see if that works.

Update

After seeing the cshtml, it looks like it is not working because $(document).ready() has already executed, before the ajax load. Try this instead:

$(function () {
    $('input[type=text], input[type=password], input[type=url], input[type=email], input[type=number], textarea', '.form').iTextClear();
    $("input:checkbox,input:radio,select,input:file").uniform();
    $("input[type=date]").dateinput();

    $(window).bind('drilldown', function () {
        $(".tabs > ul").tabs("section > section");
    });
   $("#CreateOrEditSubmit").submit(function () {
        //get the form
        var f = $("#CreateOrEditSubmit");
        //get the action
        var action = f.attr("action");
        //get the serialized data
        var serializedForm = f.serialize();
        //                $.post(action, serializedForm, function (data) {
        //                    $("#main-content").html(data);
        //                });
        var request = $.ajax({
            type: 'POST',
            url: action,
            data: serializedForm,
            success: function (data) {
                $("#main-content").html(data);
            },
            dataType: 'HTML'
        });
        return false;

        request.done(function (msg) {
            alert(msg);
        });

        request.fail(function (jqXHR, textStatus) {
            alert("Request failed: " + textStatus);
        });
    });
});