On March 26, 2019 we launched new MODX Forums. Please join us at the new MODX Community Forums.
Subscribe: RSS
  • Maybe you could add a forum just for Ajax, in the Developers section, since it will be a large part of the reworking of ModX? I'm really having fun with it!
      Studying MODX in the desert - http://sottwell.com
      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
      Join the Slack Community - http://modx.org
    • For now, let's just start a thread here.

      For everyone's information, here's what started this whole request:
      AJAX described by the term inventor: http://www.adaptivepath.com/publications/essays/archives/000385.php

      A short and simple tutorial on a rather crude AJAX project: http://www.webpasties.com/xmlHttpRequest/index.html

      A "SAJAX" toolkit library can be found here for your reference: http://www.modernmethod.com/sajax/index.phtml

      Google Suggest disected: http://serversideguy.blogspot.com/2004/12/google-suggest-dissected.html

      Google Maps discussed: http://jgwebber.blogspot.com/2005/02/mapping-google.html

      Where this can immediately come in handy is a few widgets that do simple things. The first would simply add stuff to a list at the bottom. Next, you'd want another widget that sorts the list items when clicking on move up/down/top/bottom links (and ultimately drag-and-dropping) them. These items that need to be sorted would be either table rows or LIs.

      The benefit of Ajax is that it doesn't reload the whole page when doing this stuff, so you're sending around much less data and having it much more responsive.

      Any demos to share, sottwell?
        Ryan Thrash, MODX Co-Founder
        Follow me on Twitter at @rthrash or catch my occasional unofficial thoughts at thrash.me
      • Well, I played with that zip code tutorial, (http://www.webpasties.com/xmlHttpRequest/) and changed the output to write to <span> elements instead of <input> elements.

        These two links I found to be invaluable:

        http://www.mozilla.org/docs/dom/domref/dom_shortTOC.html
        http://www.devguru.com/Technologies/xmldom/quickref/xmldom_index.html

        Apple Developer has a nice discussion also, involving the iTunes RSS feed:
        http://developer.apple.com/internet/webcontent/xmlhttpreq.html

        Another interesting link:
        http://jibbering.com/2002/4/httprequest.html

        I installed the Developer Tools extension to Firefox; its DOM inspector is great, and the JavaScript console helps me figure out where my typos are...

        The zip code thing isn't really very interesting in itself, but how the javascript works out is interesting, so I'll just post the relevant parts of the HTML file:
        ...
        
        <script type="text/javascript">
        
        var url = "getCityState.php?param="; // The server-side script to be called
        
        // What to do with the returned data, this I understand
        function handleHttpResponse() { 
            if(http.readyState == 4) { // If the http object has done its thing
                // Split the comma-delimited response into an array
                results = http.responseText.split(",");
                var cityText = document.createTextNode(results[0]);
                var stateText = document.createTextNode(results[1]);
                var cityRef = document.getElementById("city"); // The first span
                cityRef.replaceChild(cityText,cityRef.lastChild);
                var stateRef = document.getElementById('state'); // The second span
                stateRef.replaceChild(stateText,stateRef.lastChild);       
            }
        }
        
        // Call the server-side script - need to study the open and send functions
        function updateCityState() { 
            var zipValue = document.getElementById('zip').value; // From the form
            http.open("GET", url + escape(zipValue), true);
            http.onreadystatechange = handleHttpResponse;
            http.send(null);
        }
        
        // Cross-browser goodness, not sure I want to understand it...
        function getHTTPObject() { 
            var xmlhttp;
            /*@cc_on
            @if (@_jscript_version >= 5)
                try {
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (E) {
                        xmlhttp = false;
                    }
                }
            @else
            xmlhttp = false;
            @end @*/
            if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
            // this part is clear enough
                try {
                    xmlhttp = new XMLHttpRequest();
                } catch (e) {
                    xmlhttp = false;
                }
            }
            return xmlhttp;
        }
        
        // We create the HTTP Object that gets used in the function updateCityState()
        var http = getHTTPObject(); 
        </script>
        
        ...
        
        <form action="post">
            <p>
            ZIP code:
            <input type="text" size="5" name="zip" id="zip" onblur="updateCityState();" />
            </p>
        </form>
            City: <span name="city" id="city"> </span><br />
            State: <span name="state" id="state"> </span>
        ...
        
        
          Studying MODX in the desert - http://sottwell.com
          Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
          Join the Slack Community - http://modx.org
        • A couple of weeks ago I ran across a funny little (well, not so little...) javascript that was a mini sql engine for manipulating incoming data. But now I can't find it again. It has occurred to me that it might be useful here. I hope I can find it again.
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
          • A couple of weeks ago I ran across a funny little (well, not so little...) javascript that was a mini sql engine for manipulating incoming data. But now I can't find it again. It has occurred to me that it might be useful here. I hope I can find it again.

            This one?
            http://jsdb.sourceforge.net/demo.html
            • Yeah! Thanks! I knew I should have added it to my "script library" in the first place, but just looked at it as a curiosity at the time. Now if I can only find that applesauce cake recipe again...

              I've just added the EditCSS sidebar extension to Firefox. Now I need a bigger screen :roll:
                Studying MODX in the desert - http://sottwell.com
                Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                Join the Slack Community - http://modx.org
              • Well, I played with that zip code tutorial, (http://www.webpasties.com/xmlHttpRequest/) and changed the output to write to <span> elements instead of <input> elements.

                Well, I have not really looked at Ajax fully but from looking at your code I would say that's nothing new at all. In fact we (DynAPI users) have created a more power library that even supports multiple threads! And to add to that its very easy to use, supports retry and timeouts and even works with ns4.

                var data, io;
                
                io = new IOElement();
                
                data = {
                	myvalue : "My Name, is 'Mary'"
                }
                
                io.post("mypage.php",data,fnCallBack);
                
                function fnCallBack(e,success) {
                	if (success) {
                		var o = e.getSource();
                		var rt = o.getVariable('serverSays');
                		alert(rt)
                	}
                	// retry ?
                }
                
                



                To add to that we had implemented something like web services using the SODA services:

                example

                var dt = io.getData() // this will makes a call to the getData function on the server and returns the results into the dt variable

                Check out the IOElement rpc information here:

                http://www.xwisdomhtml.com/dynapi/docs/docs/quickref.ioelement.html

                IMO, If that's not simple then I don't know what is smiley

                What do you think?
                  xWisdom
                  www.xwisdomhtml.com
                  The fear of the Lord is the beginning of wisdom:
                  MODx Co-Founder - Create and do more with less.
                • I know it's nothing new, just the Ajax tag, but it's new to me, and I'm quite excited over it.
                    Studying MODX in the desert - http://sottwell.com
                    Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                    Join the Slack Community - http://modx.org


                  • Check out the IOElement rpc information here:

                    http://www.xwisdomhtml.com/dynapi/docs/docs/quickref.ioelement.html

                    IMO, If that's not simple then I don't know what is smiley

                    What do you think?

                    whoa whoa whoa, wait a sec, you've done all this work on DynAPI? Nice. Any chance we'd see some of the drag and drop stuff and other widgets in the manager?

                    • whoa whoa whoa, wait a sec, you've done all this work on DynAPI?

                      Well, I created SODA and a few other things smiley

                      Any chance we'd see some of the drag and drop stuff and other widgets in the manager?

                      Well, that we can talk about smiley
                        xWisdom
                        www.xwisdomhtml.com
                        The fear of the Lord is the beginning of wisdom:
                        MODx Co-Founder - Create and do more with less.