Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Ajax form submission, not working in IE

    I have this web page where I have a menu bar at the top and underneath the menu bar I have a div element with id="MainContentInner" - When a menu item is clicked on I call Ajax script to replace the contents of MainContentInner by doing something like the following

    MainContentInner.innerHTML = response text

    Lot of times, the response text is an HTML form. The forms are displayed fine every time menu items are clicked on. But when the submit button is pressed, it works in Firefox, but not in IE. When the javascript is called, in IE the form.element.length returns 0 (it is fine in Firefox)

    If the form is part of the the page when the page was first displayed, it works fine in IE. What does not work is when a form is brought in to the page with an innerHTML assignment. This does not work with IE.

    I am not too familiar with Javascript or AJAX. I have used sample code that I found on the web. I have given the javascript code as well as a sample response text. I would appreciate your help.

    Code:
    function getMultipleSelection(mSelect){
        var delim = "";
        var selParams = "";
        for(j = 0; j < mSelect.options.length; j++) {
            if(mSelect.options[j].selected) {
                selParams += delim + mSelect.options[j].value;
                delim = ":";
            }
        }
        return selParams;
    }
    
    function create_request_string(theform) {
    
        var reqStr = "";
    
        for(i=0; i < theform.elements.length; i++) {
    
            isformObject = false;
    
            switch (theform.elements[i].tagName) {
    
                case "INPUT":
    
                switch (theform.elements[i].type) {
    
                    case "FILE":
                    case "text":
                    case "password":
                    case "hidden":
                        reqStr += theform.elements[i].name + "=" + encodeURIComponent(theform.elements[i].value);
                        isformObject = true;
                    break;
    
                    case "checkbox":
                        if (theform.elements[i].checked) {
                            reqStr += theform.elements[i].name + "=" + theform.elements[i].value;
                        }
                        else {
                            reqStr += theform.elements[i].name + "=";
                        }
                        isformObject = true;
                    break;
    
                    case "radio":
                        if (theform.elements[i].checked) {
                            reqStr += theform.elements[i].name + "=" + theform.elements[i].value;
                            isformObject = true;
                        }
                }
                break;
    
                case "TEXTAREA":
                    reqStr += theform.elements[i].name + "=" + encodeURIComponent(theform.elements[i].value);
                    isformObject = true;
                    break;
    
                case "SELECT":
                    var sel = theform.elements[i];
                    if (sel.multiple) {
                        var mSelOptions = getMultipleSelection (sel);
                        reqStr += sel.name + "=" + mSelOptions;
                    }
                    else {
                        reqStr += sel.name + "=" + sel.options[sel.selectedIndex].value;
                    }
                    isformObject = true;
                break;
            }
    
            if ((isformObject) && ((i+1)!= theform.elements.length)) {
                reqStr += "&";
            }
        }
        return reqStr;
    }
    
    
    //Browser Support Code
    function populateMainContent (method, form, url, params){
    
        var ajaxRequest;  // The variable that makes Ajax possible!
    
        try{
            // Opera 8.0+, Firefox, Safari
            ajaxRequest = new XMLHttpRequest();
        } catch (e){
            // Internet Explorer Browsers
            try{
                ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try{
                    ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e){
                    // Something went wrong
                    alert("Your browser broke!");
                    return false;
                }
            }
        }
    
        document.getElementById('MainContentInner').innerHTML  = "<div style=\"font-size: 14px;font-weight:bold;margin-top:80px;\"><img src=\"images/loading.gif\"></div>";
    
        ajaxRequest.open(method, url, true);
    
        if (method == 'POST') {
    
            var reqStr = create_request_string(form);
    
            ajaxRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    
            
            ajaxRequest.setRequestHeader("Content-length", reqStr.length);
            ajaxRequest.setRequestHeader("Connection", "close");
    
            ajaxRequest.onreadystatechange = function() {//Call a function when the state changes.
                if(ajaxRequest.readyState == 4 && ajaxRequest.status == 200) {
                    document.getElementById('MainContentInner').innerHTML  = ajaxRequest.responseText;
                }
            }
            ajaxRequest.send(reqStr);
        }
        else {
            // Create a function that will receive data sent from the server
            ajaxRequest.onreadystatechange = function(){
                if(ajaxRequest.readyState == 4){
                    document.getElementById('MainContentInner').innerHTML  = ajaxRequest.responseText;
                }
            }
            ajaxRequest.send(null);
        }
        return true;
    }
    
    Sample Response text
    
    <form  name="AlbumDelete" method="POST" onsubmit="populateMainContent('POST', this, 'http://www.xx.com/cgi-bin/deleteAlbum.pl', ''); return false;">                  
      <input type="hidden" name="AdID" value="1234">
      <div style="text-align:left;width:500px;font-weight: bold;margin-bottom: 10px;">Delete Photos from Album</b></div>
      <div style="text-align:left;width:500px;margin-bottom: 10px;">             
          Select the Photos you want to delete and press Submit
      </div>
      <div style="text-align:left;width:500px;margin-bottom: 15px;border-bottom: 1px dotted silver;padding-bottom: 5px;">
       <img src="http://www.xx.com/img.jpg">
       <input type=checkbox name=1>&nbsp;Delete This Photo?
      </div>
      <div style="text-align:left;width:500px;margin-bottom: 15px;border-bottom: 1px dotted silver;padding-bottom: 5px;">
       <img src="http://www.xx.com/img.jpg">
       <input type=checkbox name=2>&nbsp;Delete This Photo?
      </div>
      <div style="text-align:left;width:500px;margin-bottom: 15px;border-bottom: 1px dotted silver;padding-bottom: 5px;">
       <img src="http://www.xx.com/img.jpg">
       <input type=checkbox name=3>&nbsp;Delete This Photo?
      </div>
      <div style="text-align:left;width:500px;">
        <input type="submit" name="Submit" value="Submit">
      </div>
    </form>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Quote Originally Posted by rajivp View Post
    What does not work is when a form is brought in to the page with an innerHTML assignment. This does not work with IE.
    innerHTML is not a standard DOM method, it will not really insert all the elements nor their attributes into the DOM tree. I would say that you should use DOM methods to create and append the elements (createElement(), setAttribute() appendChild()...and so on). And take care about the differences between IE and other browsers.
    I am not too familiar with Javascript or AJAX
    Try to.
    Last edited by Kor; 11-27-2009 at 02:55 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the situation though. Everywhere I read (including the Javascript/AJAX books from O'Reilley), there is a debate on whether to use innerHTML or not. And then they go on to use innerHTML instead of the DOM methods everywhere. They do not recommend not using it. Granted, innerHTML is not standand, but it is used in far too many places.

    When you have a very large form, the DOM method would be very involved compared to the one liner with innerHTML. The irony is innerHTML is Microsoft proprietory and it does NOT work in IE.

    Unfortunately, right now, I do not have the time to tinker with DOM methods. I ended up removing ajax from the forms and I made the forms simple popups. For my purpose that works just as good.

    If you are a newbie like me, you will learn the hard way that ajax is not always an easy solution. If you have the time, read up and design carefully.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    As I said: innerHTML is not a standard DOM method, even if it is crossbrowser and really helpful. Even the Microsoft team recognize some of its limits:
    http://msdn.microsoft.com/en-us/libr...8VS.85%29.aspx

    By short: if you intend only to display some elements, innerHTML will do the job. But, if later you want to handle the new inserted elements on using DOM reference methods, some problems, sometimes but not always, might occur, depending on the browser. The only thing you may do is to test, as a first choice, the innerHTML, and check if what you need works. If not, it is time to use the more elaborate but more safer DOM methods. That means also to organize the server-side response data in a JSON manner (or XML).
    Last edited by Kor; 11-27-2009 at 08:11 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the insight.

    I am using ajax for display currently. I will go back and revisit the issues when I have some time.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •