Cascading select native AJAX implementation

2008-10-08  来源:本站原创  分类:Web  人气:238 

Because it is the client's frame to do the development, because it is older frame, ajax framework was not only their own handwriting. Now to write up a little bit problem.
Mainly packaging for XMLHttpRequest object, when applied directly to call on it.

// AJAX
var http_request = false;
function send_request(url,poststr,processRequest) {// Initialization  . The specified handler function  . To send the requested function
          http_request = false;
          // Begins the initialization XMLHttpRequest object
          if(window.XMLHttpRequest) { //Mozilla  Browser
           http_request = new XMLHttpRequest();
           if (http_request.overrideMimeType) {// Set the MIME type
            http_request.overrideMimeType('text/xml');
           }
          }
          else if (window.ActiveXObject) { // IE Browser
           try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
           } catch (e) {
            try {
             http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
           }
          }
          if (!http_request) { //  Exception  , Failed to create the object instance
           window.alert(" You cannot create a XMLHttpRequest object instance  .");
           return false;
          }
          http_request.onreadystatechange = processRequest;
          //  Sending requests and URLs and are synchronized with the next section of code
          http_request.open("POST", url, false);
          http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          http_request.send(poststr);
}

The following are the parent and child select the code select

<select name="channelId" onchange="getSections(this,'sectionId');">
        <option value="" > No  </option>
        <c:if test="${channels!=null}" >
        <c:forEach items='${channels}' var='cc'>
        <option value="<bean:write name="cc" property="channelId" />" ><c:out value='${cc.channelName}' escapeXml="false"/>
</option>
        </c:forEach>
        </c:if>
</select>
<select name="sectionId">
     <option value="" > No  </option>
</select>

When you select to change the implementation of the parent JS:

// Gets the channel section under
function getSections(o,s){
        var sectionId=document.getElementById(s);
         if(o.value!=''){
                send_request('<%=request.getContextPath()%>/itv/voteAction.do?act=getSectionsBychannelId','channelId='+o.value,setSections);
         }else{
                sectionId.options.length = 0;
                var varItem = new Option(' No  ', '');
                sectionId.options.add(varItem);
         }
 }

Background Code:

public ActionForward getSectionsBychannelId(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) throws IOException {
                log.debug("channelId Gets a sections  ");
                VoteForm voteForm = (VoteForm) form;
                response.setContentType("text/html;charset=UTF-8");
        String channelId = request.getParameter("channelId"); // Gets the value of the parameter
        sectionManager = (SectionManagerImpl) SpringWebUtils.getApplicationContext(request).getBean("sectionManager");
        List sections=sectionManager.getSectionsBychannelId(Long.valueOf(channelId));
        // Assembly programs options
        StringBuffer results = new StringBuffer("<sections>");
        for (int i = 0; i < sections.size(); i++) {
                        Section s=(Section)sections.get(i);
                        results.append("<section");
                        results.append("\""+s.getSectionId()+"\"");
                        results.append(" sectionName=\""+s.getSectionName()+"\"");
                        results.append(" />");
                }
        results.append("</sections>");
        response.setContentType("text/xml;");
        PrintWriter pw = response.getWriter();
        pw.print(results.toString());
        pw.flush();
        pw.close();
                return null;
        }

The columns list to the sub-select to prevent the inside:

function setSections(data){
        var sectionId=document.getElementById('sectionId');
        sectionId.options.length = 0;
         if (http_request.readyState == 4) { //  To determine the State of an object
            if (http_request.status == 200) { //  Information has been successfully returns  , Start processing information
               var sections=http_request.responseXML.getElementsByTagName('section');
               if(sections.length!=0){
                       for(var j=0;j<sections.length;j++){
                          var option=new Option(sections[j].getAttribute('sectionName'),sections[j].getAttribute('id'));
                          sectionId.options.add(option);
                        }
                }
                else{
                        var varItem = new Option(' No  ', '');
                                sectionId.options.add(varItem);
                }
            } else { // The page is not working properly
               alert(" The page you requested has exception  .");
            }
         }
}
相关文章
  • Cascading select native AJAX implementation 2008-10-08

    Because it is the client's frame to do the development, because it is older frame, ajax framework was not only their own handwriting. Now to write up a little bit problem. Mainly packaging for XMLHttpRequest object, when applied directly to call on i

  • AJAX implementation of a simple cascading drop-down box 2 2010-05-28

    Simple AJAX implementation results without refreshing the page there are two drop-down box, when the first drop-down box is changed, submit a request to the back, find the corresponding data, added to the second drop-down box list. Code: <html> <

  • Ext.TreeNodeCascade trees support all cascading select Ext 2010-04-05

    The use of a single case of mode, using the words directly to the page file can be referenced. The program is not directly related to any tree any event, you can use the tree checkchange event of tree node on the nuclear Xuan Jin Xing further Caozuo,

  • Ajax implementation of the process 2010-10-03

    Ajax implementation process: 1. Send a Http request: XMLHttpRequest object to send through the XMLHttpRequest object is generated, we should pay attention to distinguish between the type of browser (IE and non IE) 2. Declare the callback function: th

  • Flv to try: demonstration ajax implementation puff at RJS in effect 2009-05-05

    Troublesome really ah, finally get Some RJS message Introduction What are RJS? What are RJS? Ajax allows users with the interaction between the browser experience is more like desktop programs. Since Ajax allows the browser to initiate a remote call

  • Flv to try: demonstration ajax implementation of puff at the effect of RJS 2009-05-13

    It's really annoying, ah, finally get Some message RJS Introduction What is RJS? What is RJS? Ajax allows the user and the interaction between the browser experience is more like desktop programs. Since Ajax allows the browser to launch long-distance

  • Ajax implementation linked the drop-down box 2 (b) 2009-06-20

    This a classic example of ajax, ajax is the key lies. Nothing to add to that, look at the code below. index.jsp: <%@ page language="java" contentType="text/html; charset=utf-8"%> <html> <head> <title>My JSP 'ind

  • Ajax implementation in order to submit form after form 2009-07-14

    Form validation using ajax form is filled out the serial number already exists, enter the serial number, and then to click the "submit" button, verify that the induction has not yet submitted a completed form on here can not verify the ajax on t

  • Two linkage with AJAX implementation 2010-11-16

    <html> <head> <script type="text/javascript"> / / Ajax cascaded to achieve the secondary drop-down box, according to the value of the first drop-down box to change the second drop-down list box / / According to the type of brow

  • [Transferred] from the "Asynchronous messaging - the callback mechanism" to understand the AJAX implementation ICallbackEventHandler 2011-03-02

    http://mochou123456.blog.163.com/blog/static/46057646200941423625216/ On this realization, there are a lot of relevant information online, seems to speak very well-organized, clearly. I also own that data through the system to achieve a map of the AJ

  • Rails's Ajax implementation using the user name registration, testing 2010-05-26

    Say should be stringent Rails's Ajax, Rails built a prototype for the JavaScript library, which closed a deal with Ajax functions. Say should be stringent Rails's Ajax, Rails built a prototype for the JavaScript library, which closed a deal with Ajax

  • Browser compatible AJAX Implementation 2010-06-13

    / / This function is used to create AJAX function createAjax () ( var _xmlhttp; try ( _xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP"); ) catch (e) ( try ( _xmlhttp = new XMLHttpRequest (); ) catch (e) ( _xmlhttp = false; ) ) return _xmlhttp;

  • Javascript, ajax implementation md5 method 2010-11-07

    JavaScript method in the string is not md5, PHP in there this method, it is very comfortable, and where you want to use the javascript md5, md5 algorithm that really do not want to see, if they can use PHP's md5 Application to JavaScript, to be great

  • rails plugin pagination will_paginate ajax implementation 2010-12-09

    class AjaxLinkRenderer < WillPaginate::LinkRenderer def page_link_or_span(page, span_class = 'current', text = nil) text ||= page.to_s classnames = Array[*span_class] if page and page != current_page if @options[:update] @template.link_to_remote text

  • AJAX implementation with a simple google analog input automatically 2010-12-30

    Relatively simple simulation, the text box to enter the CompanyName, and then search SqlServer2000 Suppliers table in the NorthWind database CompanyName field And then automatically complete the Four documents <!DOCTYPE html PUBLIC "-//W3C//DTD XH

  • ajax implementation struts2.1 communication 2009-03-17

    First of all go download http://code.google.com/p/jsonplugin/downloads/list first Also rememberPlus buried strtus lib inside the official jar on the json packet Then add the test action package com.json; import java.util.HashMap; import java.util.Map

  • Structs2 Json Ajax Implementation 2010-03-29

    1. Establish my.struts2.web.JSONResult (custom result classes, as long as the realization of com.opensymphony.xwork2.Result interface) package my.struts2.web; import java.io.PrintWriter; import org.apache.struts2.ServletActionContext; import com.open

  • Ajax implementation steps 2010-09-11

    var http_request = false; function send_request(url) {// Initializes the specified handler function. . Send the requested function url=url+"?a="+document.myform.a.value; http_request = false; // Initialize XMLHttpRequest object begins if(window.

  • Select sort java implementation 2010-09-18

    package MySort; public class SelectSort { public static void main(String[] args){ SelectSort ss=new SelectSort(); int[] R={1,2,3,4,5}; ss.selectSort(R); for(int i=0;i<R.length;i++){ System.out.println(R[i]); } } public void selectSort(int[] R){ for(i

  • display tag, struts cascading select, and struts about the list 2010-12-27

    Such as the title. . . .