AJAX回调不刷新页面

Question

Hi guys I have a problem where by I am doing an AJAX callback:

var htmlToInject;
        function Next(step) {
            var options = {
                cache: false,
                type: "POST",
                url: "Page.aspx?Page=" + step,
                data: "{}",
                contentType: "application/json; charset=utf-8",
                dataType: "html",
                success: function (result) {                   
                    htmlToInject = result;                  
                },
                error: function (jqXHR, textStatus, errorThrown) {                   
                },
                complete: function (jqXHR, textStatus) {                  
                    $("#form1").empty();
                    $("#form1").append(htmlToInject);                  
                }
            };
            $.ajax(options);
        }

But the problem lies in where I am using jQuery validation methods and I am creating controls dynamically. So the callback does not cause a post back so controls would not be generated, which I solved by doing this:

                        $("#form1").empty();
                        $("#form1").append(htmlToInject);      

Which then displayed the newly generated controls.

But validation on the fields is giving me errors: 'settings' is null.

I took a look at the page source and the source was there for the previously generated controls. I do not want to post back as I do not want the "loading" effect, hence why I am using ajax.

How can I over come this issue guys?

Many thanks in advance.

Answer 1

If you're using unobtrusive ajax you can do this in the success/complete function as appropriate:

$('#form1').html(htmlToInject);
$.validator.unobtrusive.parse('#form1');

Answer 2

I took a look at the page source and the source was there for the previously generated controls.

If you are talking about Right Click->View Source, than it will show HTML you originaly get from server when page is loaded with regular POST/GET (some browsers may even repeat request to server to get it). If you want to see changes done by JS/AJAX - you need to use developer tools. All modern browsers have that. FireFox may need Firebug to be installed. Just press F12 to see those tools.

But validation on the fields is giving me errors: 'settings' is null.

I do not see any validation initialization code after you change form content:

complete: function (jqXHR, textStatus) {                  
                    $("#form1").empty();
                    $("#form1").append(htmlToInject);                  
                }

You should add $("#form1").validate({...}) (or how your validation plugin is initialized) again after you have placed new form elements.