Link to home
Start Free TrialLog in
Avatar of ibsw
ibsw

asked on

Dynamically loaded form. ajax form submit

I am loading a form into a div on the click of of a button using the following code by calling  loadMainPage('myPage.asp', 'myDiv')

function aspLoad(url, target) {
  document.getElementById(target).innerHTML = 'Please wait ...';

  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) 
  {

    try {
        if (oXmlHttp == null) {
            oXmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        }
        else {
            oXmlHttp.abort();
        }

    }
    catch (e) {
        try {
            oXmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (oc) {
            oXmlHttp = null;
        }
    }
}

  if (req != undefined) {
    req.onreadystatechange = function() {aspLoadDone(url, target);};
    req.open("GET", url, true);
    req.send("");
  }
}  

function aspLoadDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
      document.getElementById(target).innerHTML = req.responseText;
    } else {
      document.getElementById(target).innerHTML="Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

function loadMainPage(name, div) { 
    aspLoad(name, div); 
	return false;
}

Open in new window


I have multiple submit buttons in the .myPage.asp so I understand I have to use .ajaxForm  to know which submit button is clicked.

   $(document).on('submit', '#mainBody form[name=formNav]', function(event) {
        alert("Hel");
        var Options = {
            beforeSubmit: showRequest,
            success: showResponse
        };

        function showRequest(formData, jqForm, options) {
            var formID = $(this).attr("id");
            alert(formID);
        }

        function showResponse(responseText, statusText, xhr, form) { 
            alert(responseText);
        }

        $('#formNav').ajaxForm({
            options: Options,
            type: 'post',
            url: 'ShowNT_Code.asp',
            clearForm: false,
            
            success: function() { alert("Helo"); }
            //loadMainPage("ShowPage.asp", "#mainBody")
        });


    });

Open in new window

I have using the following code to intercept the submit from the form. For some reason, the beforeSubmit and afterSubmit do not get fired when a function is used . When I have  simple alert statements, they seems to work.

What am I missing ?

I have to use $(document).on because this is form is loaded dynamically. Just using $(document).ready will not work.
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Move the two functions outside of the document.on

You may also need to change submit to click since you cannot submit a document

        function showRequest(formData, jqForm, options) {
            var formID = $(this).attr("id");
            alert(formID);
        }

        function showResponse(responseText, statusText, xhr, form) { 
            alert(responseText);
        }


   $(document).on('submit', '#mainBody form[name=formNav]', function(event) {
        alert("Hel");
        var Options = {
            beforeSubmit: showRequest,
            success: showResponse
        };


        $('#formNav').ajaxForm({
            options: Options,
            type: 'post',
            url: 'ShowNT_Code.asp',
            clearForm: false,
            
            success: function() { alert("Helo"); }
            //loadMainPage("ShowPage.asp", "#mainBody")
        });


    });

Open in new window

Avatar of ibsw
ibsw

ASKER

Thank you for the reply. I was looking around found another solution for the problem. You can see the code below. But now, the issue is that I have to click submit button twice for it to work. When I click the first time, I see the message  'First Click' in the alert box but the form submit will not take place. When I click the next time, the form is getting submitted.

Any idea ?

    $(document).on('submit', '#mainBody form[name=myForm]', function(event) {
        //$("#formNav").live("submit", function(e) {
        alert('First Click');
 
        $(this).ajaxForm();
        function showResponse(responseText, statusText, xhr, $form) { 
            loadMainPage(responseText , "mainBody");
        };

        var options = {
            url: 'ShowNT_Code.asp',
            type: 'post',
            success: showResponse
        };
        //   you dont need to say form#form although i would suggest changing ID name
        // if you're using newer jquery, .live is deprecated to .on and .off
        $("#myForm").on("submit", function(e) {
            alert("on Submit: " + e.target.name);
            $(this).ajaxSubmit(options);
            return false;
        });
        return false;
    });

Open in new window

Try binding the event handler in the success handler of the code that LOADs the form
Avatar of ibsw

ASKER

Thank you for the reply.

Am I doing this right for binding the event handler when the form loaded ? I still have the same issue.

function aspLoadDone(url, target) {
  if (req.readyState == 4) { // only if req is "loaded"
    if (req.status == 200) { // only if "OK"
        document.getElementById(target).innerHTML = req.responseText;
        
        $("#myForm").on('submit', function(event) {
            alert('First Click');

            $(this).ajaxForm();
            function showResponse(responseText, statusText, xhr, $form) {
                loadMainPage(responseText, "mainBody");
            };

            var options = {
                url: 'MyPage_Code.asp',
                type: 'post',
                success: showResponse
            };

            $("#formNav").on("submit", function(e) {
                alert("on Submit: " + e.target.name);
                $(this).ajaxSubmit(options);
                return false;
            });
            return false;
        });
    } else {
      document.getElementById(target).innerHTML="Error:\n"+ req.status + "\n" +req.statusText;
    }
  }
}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Also you need to understand what you are doing. Here is an approximation of what I THINK you want to do

  function showResponse(responseText, statusText, xhr, $form) {
    loadMainPage(responseText, "mainBody");
  };
  function aspLoadDone(url, target) {
    if (req.readyState == 4) { // only if req is "loaded"
      if (req.status == 200) { // only if "OK"
        $("#"+target).html("#"+target).html(req.responseText);
        var options = {
          url: 'MyPage_Code.asp',
          type: 'post',
          success: showResponse
        };
        $("#myForm").ajaxForm(options);

      } else {
        $("#"+target).html("Error:<br/>"+ req.status + "<br/>" +req.statusText);
      }
    }
  }

Open in new window

Avatar of ibsw

ASKER

I have changed everything to use jQuery. It is all working flawlessly now.  Thanks.

Here is the code I am using.

To load form dynamically:
$("#mainBody").load(lPage);

Open in new window


To handle dynamically loaded form events:
<script  type="text/javascript">
$(document).ready(function() {
    function showResponse(responseText, statusText, xhr, $form) {
           loadMainPage(responseText, "mainBody");
       };

    var options = {
       url: 'myPage_Code.asp',
       type: 'post',
       success: showResponse,
       delegation: true
    };

    $('#myForm').ajaxForm(options); 
    
    
});
</script>

Open in new window