AJAX callback not refreshing page

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.

score 0 · Answer 1 · answered Dec 19 '12 at 09:54

0

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


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

answered Dec 19 '12 at 09:54

Tim Croydon

1,866
1
19
30

getting does not contain unobtrusive property or method error. – johnnie Dec 19 '12 at 10:35
OK - You must be using a different mechanism for wiring up your validation, similar to what FAngel suggested. – Tim Croydon Dec 19 '12 at 11:04

score 0 · Answer 2 · answered Dec 19 '12 at 09:55

0

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.

answered Dec 19 '12 at 09:55

Viktor S.

12,736
1
27
52

the htmlToInject variable had the $("#form1").validate({...}) part of the set of controls to validate, I checked the source of the page using developer tools and it does not appear there. – johnnie Dec 19 '12 at 10:34
It is removed by jQuery. Try to move it into complete function and see if it will work. Possibly `$("#form1").html(htmlToInject)` will work, but not sure. – Viktor S. Dec 19 '12 at 10:44
i am doing it in the complete function and its not there at all, and not working. – johnnie Dec 19 '12 at 10:48
What are you doing? As I understand `htmlToInject` contains a piece `` and you expect that `.append(htmlToInject)` will execute that script, right? – Viktor S. Dec 19 '12 at 10:51
1

I don't think you can include javascript in the returned HTML as you are trying (i.e. with type 'html'. This might give you some clues: http://stackoverflow.com/questions/235967/calling-a-jquery-function-inside-html-return-from-an-ajax-call – Tim Croydon Dec 19 '12 at 11:06
Plus few more similar issues: http://stackoverflow.com/questions/12359763/ajax-loaded-content-script-is-not-executing/12360084#12360084 and http://stackoverflow.com/questions/12692619/jquery-load-function-not-executing-javascript-which-is-in-loading-page – Viktor S. Dec 19 '12 at 11:14
@FAngel, yes thats correct. htmlToInject contains the for the jQuery validation for the new set of generated controls. – johnnie Dec 19 '12 at 11:16
Than, see links provided by me and Tim Croydon. jQuery strips out script tags in some cases. Suppose that is what happens in your case. So, you may take a look at those links - possibly something from there will work for you or move validation initialization code into your complete function. – Viktor S. Dec 19 '12 at 11:23

AJAX callback not refreshing page

2 Answers2