javascriptasp.net-mvc-4jqueryform

jQuery Form library not work in partial view


The following code work fine in regular View but not in partial view

<script>
$.noConflict();
var uniqueId = '@Guid.NewGuid().ToString()';
jQuery(document).ready(function ($) {


    console.log(uniqueId);
    $("#Myform input[name='clientId']").val(uniqueId);
    console.log($("#Myform input[name='clientId']").val());

    var bar = $('.progress-bar');
    var percent = $('.percent');
    var status = $('#status');

    $('#Myform').ajaxForm({
        beforeSend: function () {
            status.empty();
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
            $("#pleaseWaitDialog").modal({ backdrop: 'static', keyboard: false });
            $('#statusBorder').show();

            //$("#pleaseWaitDialog").modal({ backdrop: 'static', keyboard: false });
        },
        uploadProgress: function (event, position, total, percentComplete) {

            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        complete: function (xhr) {
            getStatus();
            status.html(xhr.responseText);
            //$("#pleaseWaitDialog").modal('hide');
        }
    });
});
</script>

I've got a error "$(...).ajaxform is not a function"

Here what i already tried:

  1. manipulating with position of javascript libraries calls
  2. double check that there is no conflicts of javascript/jquery library calls

Solution

  • Partial view isn't loaded when the page loads.

    You must force that the function called after the partial view loaded.

    You are doing it:

    1. by event trigger (that happens by user in the partial view)
    2. by event trigger of the page.
    3. jast in tag

    the most elegant ways is the first two option.