By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,968 Members | 1,589 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,968 IT Pros & Developers. It's quick & easy.

Implementing data filter with AJAX

P: 2
Hello Ajaxxer

ich created a .json file with data records from which I want to extract data records per user request.
I created 2 ajax components: one for getting user data and one for getting external json data. Now I cannot join both. Can you help me out here ?

- here is the code for the html input form:
Expand|Select|Wrap|Line Numbers
  1. - hier ist der HTML FORM Code zu User Input:
  2.   <form id="myform" name="myform" enctype="multipart/form-data" action="register1.php" method="post" onsubmit="AJAXSubmit(this); return false;">
  3.     <label>RS1
  4.     <select name="rs">
  5.       <option value="red" selected>für RW</option> 
  6.       <option value="white">für WW</option>
  7.     </select>    
  8.     </label>
  9.     <label>Region
  10.     <select name="region">
  11.       <option value="region1" selected>REG A</option> 
  12.       <option value="region2">REG A</option>
  13.       <option value="region3">REG A</option>
  14.       <option value="region4">REG A</option>
  15.     </select>    
  16.     </label>
  17.        <input id="bg" type="checkbox" name="bg" value="1"/> <label for="bg">bg</label>
  18.       <input id="submit" type="submit" value="submit">
  19.     </fieldset>
  20. </form>
  21.  
- I use the AJAX Form Submit Framework ::
https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest

Expand|Select|Wrap|Line Numbers
  1. var AJAXSubmit = (function () {
  2.  
  3.   function ajaxSuccess () {
  4. //    var jsonObj = JSON.parse(data_file);
  5. //    document.getElementById("id01").innerHTML = this.responseText;
  6. loadJS(function(response) {
  7. // Do Something with the response e.g.
  8. jsonresponse = JSON.parse(response);
  9. // Assuming json data is wrapped in square brackets as Drew suggests
  10. document.getElementById("id01").innerHTML = jsonresponse;
  11. //console.log(jsonresponse[0].name);
  12.  
  13. });
  14. //  document.getElementById("id01").innerHTML = mydata[0].name;
  15.   }
  16.  
  17. // new  
  18. function loadJS(callback) {
  19.  
  20. var xobj = new XMLHttpRequest();
  21. xobj.overrideMimeType("application/json");
  22. xobj.open('GET', 'grapes1.json', true);
  23. xobj.onreadystatechange = function () {
  24. if (xobj.readyState == 4 && xobj.status == "200") {
  25. callback(xobj.responseText);
  26. }
  27. }
  28. xobj.send(null);
  29. }
  30.  
  31.   function submitData (oData) {
  32.     /* the AJAX request... */
  33.     var oAjaxReq = new XMLHttpRequest();
  34.     oAjaxReq.submittedData = oData;
  35.     oAjaxReq.onload = ajaxSuccess;
  36.     if (oData.technique === 0) {
  37.       /* method is GET */
  38.       oAjaxReq.open("get", oData.receiver.replace(/(?:\?.*)?$/, oData.segments.length > 0 ? "?" + oData.segments.join("&") : ""), true);
  39.       oAjaxReq.send(null);
  40.     } else {
  41.       /* method is POST */
  42.       oAjaxReq.open("post", oData.receiver, true);
  43.       if (oData.technique === 3) {
  44.         /* enctype is multipart/form-data */
  45.         var sBoundary = "---------------------------" + Date.now().toString(16);
  46.         oAjaxReq.setRequestHeader("Content-Type", "multipart\/form-data; boundary=" + sBoundary);
  47.         oAjaxReq.sendAsBinary("--" + sBoundary + "\r\n" + oData.segments.join("--" + sBoundary + "\r\n") + "--" + sBoundary + "--\r\n");
  48.       } else {
  49.         /* enctype is application/x-www-form-urlencoded or text/plain */
  50.         oAjaxReq.setRequestHeader("Content-Type", oData.contentType);
  51.         oAjaxReq.send(oData.segments.join(oData.technique === 2 ? "\r\n" : "&"));
  52.       }
  53.     }
  54.   }
  55.  
  56.   function processStatus (oData) {
  57.     if (oData.status > 0) { return; }
  58.     /* the form is now totally serialized! do something before sending it to the server... */
  59.     /* doSomething(oData); */
  60.     /* console.log("AJAXSubmit - The form is now serialized. Submitting..."); */
  61.     submitData (oData);
  62.   }
  63.  
  64.   function pushSegment (oFREvt) {
  65.     this.owner.segments[this.segmentIdx] += oFREvt.target.result + "\r\n";
  66.     this.owner.status--;
  67.     processStatus(this.owner);
  68.   }
  69.  
  70.   function plainEscape (sText) {
  71.     /* how should I treat a text/plain form encoding? what characters are not allowed? this is what I suppose...: */
  72.     /* "4\3\7 - Einstein said E=mc2" ----> "4\\3\\7\ -\ Einstein\ said\ E\=mc2" */
  73.     return sText.replace(/[\s\=\\]/g, "\\$&");
  74.   }
  75.  
  76.   function SubmitRequest (oTarget) {
  77.     var nFile, sFieldType, oField, oSegmReq, oFile, bIsPost = oTarget.method.toLowerCase() === "post";
  78.     /* console.log("AJAXSubmit - Serializing form..."); */
  79.     this.contentType = bIsPost && oTarget.enctype ? oTarget.enctype : "application\/x-www-form-urlencoded";
  80.     this.technique = bIsPost ? this.contentType === "multipart\/form-data" ? 3 : this.contentType === "text\/plain" ? 2 : 1 : 0;
  81.     this.receiver = oTarget.action;
  82.     this.status = 0;
  83.     this.segments = [];
  84.     var fFilter = this.technique === 2 ? plainEscape : escape;
  85.     for (var nItem = 0; nItem < oTarget.elements.length; nItem++) {
  86.       oField = oTarget.elements[nItem];
  87.       if (!oField.hasAttribute("name")) { continue; }
  88.       sFieldType = oField.nodeName.toUpperCase() === "INPUT" ? oField.getAttribute("type").toUpperCase() : "TEXT";
  89.       if (sFieldType === "FILE" && oField.files.length > 0) {
  90.         if (this.technique === 3) {
  91.           /* enctype is multipart/form-data */
  92.           for (nFile = 0; nFile < oField.files.length; nFile++) {
  93.             oFile = oField.files[nFile];
  94.             oSegmReq = new FileReader();
  95.             /* (custom properties:) */
  96.             oSegmReq.segmentIdx = this.segments.length;
  97.             oSegmReq.owner = this;
  98.             /* (end of custom properties) */
  99.             oSegmReq.onload = pushSegment;
  100.             this.segments.push("Content-Disposition: form-data; name=\"" + oField.name + "\"; filename=\""+ oFile.name + "\"\r\nContent-Type: " + oFile.type + "\r\n\r\n");
  101.             this.status++;
  102.             oSegmReq.readAsBinaryString(oFile);
  103.           }
  104.         } else {
  105.           /* enctype is application/x-www-form-urlencoded or text/plain or method is GET: files will not be sent! */
  106.           for (nFile = 0; nFile < oField.files.length; this.segments.push(fFilter(oField.name) + "=" + fFilter(oField.files[nFile++].name)));
  107.         }
  108.       } else if ((sFieldType !== "RADIO" && sFieldType !== "CHECKBOX") || oField.checked) {
  109.         /* field type is not FILE or is FILE but is empty */
  110.         this.segments.push(
  111.           this.technique === 3 ? /* enctype is multipart/form-data */
  112.             "Content-Disposition: form-data; name=\"" + oField.name + "\"\r\n\r\n" + oField.value + "\r\n"
  113.           : /* enctype is application/x-www-form-urlencoded or text/plain or method is GET */
  114.             fFilter(oField.name) + "=" + fFilter(oField.value)
  115.         );
  116.       }
  117.     }
  118.     processStatus(this);
  119.   }
  120.  
  121.   return function (oFormElement) {
  122.     if (!oFormElement.action) { return; }
  123.     new SubmitRequest(oFormElement);
  124.   };
  125.  
  126. })();
  127.  
Thanks very much for your assistance
Frank
Jun 11 '15 #1
Share this Question
Share on Google+
3 Replies


Dormilich
Expert Mod 5K+
P: 8,639
Now I cannot join both.
I only see a single AJAX code.
Jun 11 '15 #2

P: 2
Hello Dormilich
I put in only the main AJAX function because that is the place where to insert the code; Which other code do you need?
Greetings, Frank
Jun 14 '15 #3

Dormilich
Expert Mod 5K+
P: 8,639
you said something about 2 AJAX components, but posted only one.
Jun 14 '15 #4

Post your reply

Sign in to post your reply or Sign up for a free account.