Ajax Talk - Asynchronous javascript and xml discussion board
 FAQ   Search    Usergroups      Register   Profile   Check your messages   Log in 
Signup now to enjoy a range of free membership advantages !!
Ajax Talk - Moderators Wanted
Same Ajax codes function differently on IE 7.0 and Firefox 2

 
Post new topic   Reply to topic    Ajaxtalk.com Forum Index -> AJAX general discussion
View previous topic :: View next topic  
Author Message
northcloud
New one
New one


Joined: 06 Feb 2008
Posts: 1

PostPosted: Wed Feb 06, 2008 1:35 pm    Post subject: Same Ajax codes function differently on IE 7.0 and Firefox 2 Reply with quote

In one jsp page, there are 2 dropdown lists. When first list is changed, the content in second list will be updated based on the criteria selected in first list using Ajax. The default value in new second list is the first item. Users may selected another value in second list. After two values are selected, users click submit button, it triggers a Struts (1.2) action on server. In IE 7.0, every thing works well. Two values from dropdown lists are passed to server. But in Firefox 2.0, the value in first list is passed to the server correctly, the value in second list is always 'null' to pass to server (there is a default value). Does anyone know what cause it? Following are code I used. Thanks in advance. northcloud

Main JSP page:
Code:

<html:form action="/userSelectSubmit">
      <table border="0">
      <tr>
         <td class="cssRoomHeader" align="right">League</td>
         <td><img src="<%=request.getContextPath()%>/images/spacer.gif" border="0" height="2" width="20"></td>
         <td class="cssRoomHeader" align="left">Category</td>
      </tr>
      <tr >
         <td align="right">

         <span id="fieldLeague">
         <html:select property="msgLeagueId"  onchange="retrieveURLLeague();">
            <option value="0" selected>ALL</option>
         <c:forEach items="${msgLeagueList}" var="curLeague" varStatus="status" >
            <option value="${curLeague.leagueNameAbbr}">${curLeague.leagueNameAbbr}</option>
         </c:forEach>
          </html:select>
            </span>
         </td>
      
      <td><img src="<%=request.getContextPath()%>/images/spacer.gif" border="0" height="2" width="20"></td>
      
         <td align="left">

         <span id="fieldCategory">
         <html:select property="msgCategoryId" onchange="retrieveURLCategory();">
         <option value="0" selected>ALL</option>
         <c:forEach items="${msgCategoryList}" var="curCat" varStatus="status" >
            <option value="${curCat.categoryAbbr}">${curCat.categoryAbbr}</option>
         </c:forEach>
          </html:select>
         </span>
         </td>
 </tr>
   <tr align="center" >
      <td ><html:submit styleClass="cssButton" value="Select(HTML)" property="Select"/>&nbsp;&nbsp;
</tr>
 </table>
    </html:form>


--------------------
Javascript:
Code:

var receiveReq = getXmlHttpRequestObject();

function getXmlHttpRequestObject() {
   if (window.XMLHttpRequest) {
      return new XMLHttpRequest(); //Not IE
   } else if(window.ActiveXObject) {
      return new ActiveXObject("Microsoft.XMLHTTP"); //IE
   } else {
      //Display your error message here.
      //and inform the user they might want to upgrade
      //their browser.
      alert("Your browser doesn't support the XmlHttpRequest object.  Better upgrade.");
   }
}         

function retrieveURLLeague()
{
   var selectedObj = document.getElementsByName("msgLeagueId")[0];
   var url = "dropdownListOnChange.do?selectType=1&msgLeagueId=" + selectedObj.value;   
   if (receiveReq.readyState == 4 || receiveReq.readyState == 0)
   {
      //Setup the connection as a GET call to .
      //True explicity sets the request to asyncronous (default).
      receiveReq.open("GET", url, true);
      //Set the function that will be called when the XmlHttpRequest objects state changes.
      receiveReq.onreadystatechange = processLeagueChange;
      //Make the actual request.
      receiveReq.send(null);
   }         
}

function processLeagueChange()
{
   if (receiveReq.readyState == 4) // Complete
   {
      if (receiveReq.status == 200) // OK response
      {
         document.getElementById("fieldCategory").innerHTML = receiveReq.responseText;
      }
      else
      {
         alert("Problem: " + receiveReq.statusText);
      }
   }
}
      
function retrieveURLCategory()
{
   var selectedObj = document.getElementsByName("msgCategoryId")[0];
   var url = "dropdownListOnChange.do?selectType=2&msgCategoryId=" + selectedObj.value;
   if (receiveReq.readyState == 4 || receiveReq.readyState == 0)
   {
      //Setup the connection as a GET call to .
      //True explicity sets the request to asyncronous (default).
      receiveReq.open("GET", url, true);
      //Set the function that will be called when the XmlHttpRequest objects state changes.
      receiveReq.onreadystatechange = processCategoryChange;
      //Make the actual request.
      receiveReq.send(null);
   }         

}

function processCategoryChange()
{
   if (receiveReq.readyState == 4)  // Complete
   {
      if (receiveReq.status == 200)  // OK response
      {
         document.getElementById("fieldLeague").innerHTML = receiveReq.responseText;
      }
      else
      {
      alert("Problem: " + receiveReq.statusText);
      }
   }
}


---------------------------------
Server-side Struts (1.2):

Code:

   public ActionForward execute(ActionMapping mapping, ActionForm inForm, HttpServletRequest request, HttpServletResponse response)
   throws Exception
   {
        String selectedLeague = request.getParameter("msgLeagueId");
        String selectedCategory = request.getParameter("msgCategoryId");
        String selectType = request.getParameter("selectType");
        FirstPageBo fpbo = FirstPageBo.getInstance();
        Collection msgLeageList = null;
        Collection msgCatList = null;
                 
        if (selectType.equalsIgnoreCase("1"))      // change on League list to get Category list
        {
           msgCatList = fpbo.getMsgCategoryListByLeagueUser(selectedLeague, curUser);
           request.getSession().setAttribute("msgCategoryList", msgCatList);
        }
        else            // change on Category List to get league list
        {
           msgLeageList = fpbo.getMsgLeagueListByName(selectedCategory, curUser);
           request.getSession().setAttribute("msgLeagueList", msgLeageList);
        }
        request.getSession().setAttribute("selectType", selectType);
        response.setContentType("text/html");
        response.setHeader("Cache-Control", "no-cache");
        return mapping.findForward("success");
   }


--------------------
struts-config.xml (a part of)
Code:

   <action
      path="/dropdownListOnChange"
      type="com.pasports.action.DropdownListOnChangeAction"
      validate="false">
      <forward
        name="success"
        path="/newDropdownList.jsp"/>     
    </action>

-----------------------------------
newDropdownList.jsp
Code:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://jakarta.apache.org/struts/tags-html" prefix="html" %>

<c:if test = "${selectType == '1'}">
<select name="msgCategoryId" onchange="retrieveURLCategory('');">
   <c:forEach items="${msgCategoryList}" var="curCat" varStatus="status">
      <c:if test="${status.count == 1}">
         <option value="${curCat.categoryAbbr}" selected>${curCat.categoryAbbr}</option>
      </c:if>
      <c:if test="${status.count != 1}">
         <option value="${curCat.categoryAbbr}">${curCat.categoryAbbr}</option>
      </c:if>
   </c:forEach>
</select>
</c:if>

Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic    Ajaxtalk.com Forum Index -> AJAX general discussion All times are GMT
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
 Advertisements
 XML & Copyright Notice 
    


Powered by phpBB © 2001, 2005 phpBB Group

What is according to Wikipedia: Ajax Web2.0 XML E4X


Link to our site:

  


del.icio.us digg spurl wists simpy newsvine blinklist furl blogmarks yahoo! myweb smarking ma.gnolia segnalo reddit fark technorati cosmos


Normal Bookmark


Partner Button Links:
Codecrunch.com: Webmaster Tutorials    One Ajax


Partner Text Links:
quomon | web20log | ajaxmatters | tableless | 456bereastreet | music charts | gift ideas | competitions | free xbox 360 | link trade ?


Credits:
it consultancy & project management lead generation zoekmachine optimalisatie steal these buttons seo expert