Ajax interactive forms generation2

Interactive form formation 2

This time, it continues to the last time, interactive tries making the sample of form formation.

This time, reading the data from the CSV file, it makes the selection (option) tag and the button.

Longitude of metropolis and districts name and the prefectural seat, latitude, is written on CSV, with the format of the below-mentioned source. Reading this, with Ajax, HTML fairing and processing to the form element it is the procedure that it outputs.

First, after trying the sample which makes the option tag, next, changing the form of 2 types from the same CSV data, you try the sample which it forms.

As the last time seen, because as for the necessary data, from after, there is no page transition with it is possible, to read, it corresponded to the input of the user in addition to this, it is possible to keep assembling the form of various combinations to interactive.

* V036 of the library for provisional Ajax is utilized.

1: The SELECT element is formed just one
2: It changes the SELECT element and the element of the button and forms
3: The library v036 for provisional Ajax

The SELECT element is formed just one

-> Sample
(* As for this sample the above-mentioned link reference)

this sample also last time as well, the firstHTMLthere is no element to form, CSVreads the data, SELECTwill produce an element.

browser behavior

this sample is, when you load a page, firstAjaxfunctions in the library sendRequest(on_loaded1,”,’POST’,’./ken.csv’,true,true)run theCSVload the data.

CSVat the end of the reading of data, the callback functionon_loaded1(oj)launch is, is a mechanism that generates the select tag. detailed explanation is, please refer to the comments in the source.

this time staticCSVbecause it uses the file, SafariandKonquerorcountermeasures, last time as well as, we are prepared in advance by the branch encoded files.

was usedJavaScript/HTMLside andCSVsource of the side, are as follows:.

(JavaScriptside) <!– Ajaxsimple library jslb_ajax.js http://jsgt.org/mt/archives/01/ n/a html–> <script languege = “JavaScript” src = “http://jsgt.org/ajax/ref/lib/jslb_ajax036.js” charset = “utf-8″></script> <!– for select tag –> <div id=”sel”></div> <!– for data output –> <div id=”msg”></div> <script type=”text/javascript”> <!– /KHTMLbrowser-based branch Mac SafariandLinux Konquerorfor ua = navigator.userAgent is_KHTML = ( ua.indexOf(‘Safari’) != -1 || ua.indexOf(‘Konqueror’) != -1 ) var csv = (is_KHTML)?’./ken2.csv’:’./ken.csv’; /processing for generating a select tag / coordinate data prefecturalAjaxrequest from the library / sendRequest(on_loaded1,”,’POST’,csv,true,true) /the callback function ( will be executed when the receiving ) function on_loaded1(oj) { /decoded to obtain the response var text = decodeURIComponent(oj.responseText) /creates an array of rows separated by newlines var kens = text.split(‘?r’).join(”).split(‘?n’) /create a select tag htm = ‘<select name=”id” onChange=”handleSelected(this)”>?n’; htm += ‘<option value=”0″selected>please select the state or province’; htm += ‘–displays the prefectural</option> ?n’; /1line by line in order to handle for (var i = 0; i < kens.length; i++) { /comma(,)creates an array, separated by / (CSVis, province name,longitude,are contained in the order of latitude) rows = kens[i].split(‘,’) /OPTIONwrites data to the attribute of htm += ‘ <option value=”‘+rows[1]+’,'+rows[2]+’”>’+rows[0]+’</option>?n’ ; } htm += ‘</select> ‘; /select the output tag document.getElementById(‘sel’).innerHTML=htm } /treatment of choice when function handleSelected(oj) { if (oj.selectedIndex != 0) { ken = oj.options[oj.selectedIndex].text point = oj.options[oj.selectedIndex].value point = point.split(‘,’) var msg = ken+”agency<br>longitude, “+point[0]+”<br>latitude, ” + point[1]+”<br>is near” document.getElementById(‘msg’).innerHTML=msg; } } /–> </script>

(csvside)
(ken.csv) hokkaido, n/a , n/a aomori prefecture, n/a , n/a akita prefecture, n/a , n/a iwate prefecture, n/a , n/a yamagata prefecture, n/a , n/a miyagi prefecture, n/a , n/a fukushima prefecture, n/a , n/a niigata prefecture, n/a , n/a tokyo, n/a , n/a (ken2.csv) ) the abovetest1.txttheencodeURIComponent()wasSafariandKHTMLfor
this encoding here but you can. %E5%8C%97%E6%B5%B7%E9%81%93, n/a , n/a %0D%0A%E9%9D%92%E6%A3%AE%E7%9C%8C, n/a , n/a %0D%0A%E7%A7%8B%E7%94%B0%E7%9C%8C, n/a , n/a %0D%0A %E5%B2%A9%E6%89%8B%E7%9C%8C, n/a , n/a %0D%0A%E5%B1%B1%E5%BD%A2%E7%9C%8C, n/a , n/a %0D%0A%E5%AE%AE%E5%9F%8E%E7%9C%8C, n/a , n/a %0D%0A snip
interactive form generation2

1: SELECTthe elements1generate only one
2: SELECTbutton to generate the elements of the switching elements and
3: interimAjaxlibrary forv036

SELECTbutton to generate the elements of the switching elements and

Sample
(*this sample, see above link)

browser behavior

this sample is, first2one button will be displayed. one is button selection another de-, SELECTselection is.

button selection when you click the, button of the prefectural name will be printed at once, SELECTselection when you click the, previous page select sample of similar options will be displayed.

each button has a, belowonclickbecause there were charged in the event, at the same time as the click, Ajaxlibraries forsendRequest()function byAjaxloading will occur.

button selection when you click the, ken.csv(KHTMLthe system isken2.csv)after reading the, the callback functionon_loadedBtn()data is passed to the. SELECTselection the difference in the, the callback function to be started after receiving data, in this caseon_loadedSel()is, startSELECTwe are the generation of the element. <input type=”button” value=”button selection” onclick=”sendRequest( on_loadedBtn ,”,’POST’,’./ken.csv’,true,true)”> <input type=”button” value=”SELECTselection” onclick=”sendRequest( on_loadedSel ,”,’POST’,’./ken.csv’,true,true)”>
was usedJavaScript/HTMLside andTEXTsource of the side, are as follows:.

Incoming search terms:

• ajax interactive form (3)
• ajax interactive form sample (1)