Page 4 of 4 FirstFirst ... 234
Results 31 to 33 of 33

Thread: Calling Functions from Functions.

  1. #31
    Join Date
    Jul 2008
    Posts
    65
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Default

    John,

    I have created the neccesary file, and played with your demo. It does exactly what I need.. in some respects better than what I expected.

    Utilizing PHP I can essentially have a page which gets all the CURRENT comments from a databse.

    Then the user can add a comment and this NEW comment can then be displayed in the 'NewComment' div underneath, without any need to RE query the database for a full list of comments.

    Sadly, were it not for your examples, I would never have got your script working.
    Would it be possible for you to... when you have chance.. comment the script? I would even pay for you to do that.

    I can use it, and it does what I need bur i dont really understand why. It would be awesome to appreciate the workings of the script, and then eventually... one day... maybe help make it better

    Cheers, awesome work.

  2. #32
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    I'm still working on it. I suppose I will get around to commenting it more fully. But for now I just want to add a bit more functionality and document the use of that added functionality. One thing I forgot to mention though is that even in its current form as published here, it could handle radio buttons and checkboxes just fine, except for the fact that I'm unclear what the server is normally sent onsubmit of a form that tells it that a particular radio or checkbox is checked. If you have any insight on that, it would be appreciated. I know that like with a set of radio buttons, one can give them all the same name appended with [] and the server makes an array out of them, but how does it know which one is checked? I'm imagining the GET data would look something like:

    Code:
    ?gender[]=male:checked&gender[]=female
    I guess I can play around with it. From what I can tell POST and GET data are basically the same, only GET data has the ? at its start and is passed with the address.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #33
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,070
    Thanks
    44
    Thanked 3,216 Times in 3,178 Posts
    Blog Entries
    12

    Default

    This business with the [] and radio buttons appears to be a red herring, or a holdover form some previous syntax no longer required. When a form submits, if there is a radio group, only the one (if any) that is checkd is passed, regardless of whether or not the [] is appended to the name used by the group. With a checkbox, its name/value pair is only sent if it is checked. I've updated the script to act like that.

    Anyways, I'm almost done (never really done). I just have to add callbacks for various results/readyStates other than success, and perhaps a hook for optional use of json in interpreting the responseText. I've added some new features. Most notable is the loadXmlHttp.attachForm() function. It allows you to attach loadXmlHttp to a form with a single call in or linked to the head.

    Another thing worthy of mention, is that if using the default callback, you may now choose to have your responseText appended (optionally with HTML or a string added in front of it, use an empty string '' if nothing should be added) to the target element, rather than replace it's content.

    All changes are documented at the beginning of the script. There are also expanded descriptions of some of the features already included:

    Code:
    /* loadXmlHttp Script 2009 John Davenport Scheuer
       as first seen in http://www.dynamicdrive.com/forums/
       username: jscheuer1 - This Notice Must Remain for Legal Use
       */
    
    /* reqObject Properties - //all optional, comma delimit
    	url: page_to_fetch //defaults to this page
    	method: POST_or_GET //defaults to GET
    	el: element_to_populate //defaults to none, overrides id
    	id: id_of_element_to_populate //defaults to none, requires no el
    	append: quoted_HTML_or_String //if populating via the default callback, this will be appended along with the responseText
    	form: form_or_name_of_or_number_of_form_submitting_data //defaults to none, requires method: 'POST' or no query
    	data: encoded_data_to_send_with_POST_request //defaults to none, requires POST and no form
    	query: encoded_data_to_send_with_GET_request //defaults to none, requires GET, overrides form
    	callback: function_to_run_on_readyStateChange //defaults to populate on success, in default mode requires el or id
    	bust: true_OR_false //defaults to false, add cache busting time stamp to the request?
        */
    
    /* Usage:
    	new loadXmlHttp({reqObject Properties})
       Example:
    	new loadXmlHttp({url: 'somePage.php', method: 'POST', form: document.forms.myform})
       */
    
    /* Example callback:
    	   function(){
    		   if(this.success(false)){
    			   alert(this.xmlHttp.responseText);
    		   }
    	   }
    
    	   All native and set properties of the loadXmlHttp instance are availbale to this function as:
    
    	   this.propertyName
    
       Explanation of this.success():
    	   If the request is successful, and there is an element or an id of an element to populate
    	   set in the original call for this instance of loadXmlHttp and that element exists, this.success()
    	   will return true.  If there is no element to populate with the responseText or that element
    	   doesn't exist, and you use:
       
    	   this.success(false)
       
    	   It will still return true, as long as the request was successful.
       */
    
    /* How to use the loadXmlHttp.attachForm() function:
    	   This function will allow you to set a form to use loadXmlHttp with only one consolidated call.
    	   Example:
    
    	   loadXmlHttp.attachForm({form: 'myform', bust: true, id: 'result', method: 'post', callback: function(){
    		   if (this.success()){
    		  	   />([^<]*)<\/sp/i.test(this.xmlHttp.responseText);
    			   this.el.innerHTML = RegExp.$1;
    			   }
    		   }
    	   });
    
    	   Note: When using this method, if a populate element is desired, the el property must be skipped
    	   in favor of the id property, and the form must be represented either by its number in the
    	   document forms collection or by its quoted name.
       */
    
    function loadXmlHttp(req){
    	if(loadXmlHttp.xmlHttp){
    		var f = this, r;
    		for(r in req){
    			if((req.hasOwnProperty && req.hasOwnProperty(r)) || !req.hasOwnProperty){
    				f[r] = req[r];
    			}
    		}
    		f.xmlHttp = loadXmlHttp.xmlHttp();
    		f.el = f.el || (f.id? document.getElementById(f.id) : null);
    		f.form = typeof f.form === 'object'? f.form : document.forms[f.form];
    		f.method = f.method? f.method.toUpperCase() : 'GET';
    		f.url = f.url || location.href;
    		f.bustCache();
    		f.url += f.method === 'GET' && f.query? f.qa + f.query : '';
    		if(f.method === 'GET' && !f.query && f.form){
    			f.encodeData();
    			f.url += f.qa + f.data;
    		}
    		f.xmlHttp.open(f.method, f.url, true);
    		if(f.callback !== null){
    			f.xmlHttp.onreadystatechange = typeof f.callback === 'function'?
    			function(){f.callback.apply(f);} : function(){f.stateChanged();};
    		}
    		if(f.method === 'POST'){
    			if(f.form){
    				f.encodeData();
    			}
    			f.xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    			f.xmlHttp.setRequestHeader('Content-length', f.data? f.data.length : 0);
    			f.xmlHttp.setRequestHeader('Connection', 'close');
    		}
    		f.xmlHttp.send(f.method === 'POST' && f.data? f.data : null);
    	}
    	else alert('Your browser does not support AJAX!'); // substitute your desired request object unsupported code here
    }
    
    //setup - while parsing:
    loadXmlHttp.xmlHttp = null; loadXmlHttp.re = /^http/.test(location.href);
    loadXmlHttp.qa = /\?/; loadXmlHttp.chkbl = /^(radio)|(checkbox)$/i;
    /*@cc_on @*/ // used here and below, limits try/catch to those IE browsers that both benefit from and support it
    /*@if(@_jscript_version >= 5) // prevents errors in old browsers that barf on try/catch & problems in IE if Active X disabled
    try {loadXmlHttp.ie = window.ActiveXObject}catch(e){};
    @end @*/
    if (window.XMLHttpRequest && (!loadXmlHttp.ie || loadXmlHttp.re))
    	loadXmlHttp.xmlHttp = function(){return new XMLHttpRequest();}; // Firefox, Opera 8.0+, Safari, others, IE 7+ when live - this is the standard method
    else if (/(object)|(function)/.test(typeof createRequest))
    	loadXmlHttp.xmlHttp = createRequest; // ICEBrowser, perhaps others
    else {
    	loadXmlHttp.xmlHttp = null;
    	// Internet Explorer 5 to 6, includes IE 7+ when local //
    	/*@if(@_jscript_version >= 5)
    	try{loadXmlHttp.xmlHttp = function(){return new ActiveXObject("Msxml2.XMLHTTP");};}
    	catch(e){try{loadXmlHttp.xmlHttp = function(){return new ActiveXObject("Microsoft.XMLHTTP");};}catch(e){}}
    	@end @*/
    }
    
    loadXmlHttp.prototype = {
    	encodeData: function(){
    		var els = this.form.elements, chkbl = loadXmlHttp.chkbl; this.data = '';
    		for(var i = 0; i < els.length; ++i){
    			if(els[i].name && ((chkbl.test(els[i].type) && els[i].checked) || !chkbl.test(els[i].type))){
    				this.data += (i? '&' : '') + els[i].name + '=' + encodeURIComponent(els[i].value);
    			}
    		}
    	},
    	bustCache: function(){
    		this.qa = loadXmlHttp.qa.test(this.url)? '&' : '?';
    		if(this.bust){
    			this.url += this.qa + 'bustacache=' + new Date().getTime();
    			this.qa = '&';
    		}
    	},
    	success: function(require_el){
    		return (this.el || require_el === false) && this.xmlHttp.readyState == 4 && (this.xmlHttp.status == 200 || !loadXmlHttp.re);
    	},
    	attach: (function(){
    		return window.addEventListener? function(el, evt, func){el.addEventListener(evt, func, false);}:
    		window.attachEvent? function(el, evt, func){el.attachEvent('on' + evt, func);} : function(){return;};
    	})()
    };
    loadXmlHttp.prototype.stateChanged = function(){
    	if (this.success()){
    		if(typeof this.append === 'string'){
    			this.el.innerHTML += this.append + this.xmlHttp.responseText;
    		}else{
    			this.el.innerHTML = this.xmlHttp.responseText;
    		}
    	}
    };
    loadXmlHttp.attachForm = function(req){
    	var attach = loadXmlHttp.prototype.attach;
    	attach(window, 'load', function(){
    		req.form = document.forms[req.form];
    		attach(req.form, 'submit', function(e){
    			new loadXmlHttp(req);
    			if(e && e.preventDefault){
    				e.preventDefault();
    			}
    			return false;
    		})
    	});
    };
    //end setup
    Here's a demo taking advantage of some of the new features:

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #result {
        width: 28em;
        border: 1px solid #ffc0cb;
        padding: 0.25em;
        min-height: 1em;
    }
    form {
        margin-bottom: 0.75em;
    }
    #post {
        display: none;
    }
    </style>
    <script type="text/javascript" src="http_get_post.js"></script>
    <script type="text/javascript">
    loadXmlHttp.attachForm({form: 'myform', bust: true, id: 'result', method: 'post', append: '<br>', callback: function(){
            if (this.success()){
                />([^<]*)<\/sp/i.test(this.xmlHttp.responseText);
                this.el.innerHTML += (this.el.innerHTML !== ''? this.append : '') + RegExp.$1;
            }
        }
    });
    </script>
    </head>
    <body>
    <div id="post"><span><?php echo $_POST['list'] . $_POST['name'] . ', ' $_POST['gender'] . ', country: ' $_POST['country']; ?></span></div>
    <form action="#" name="myform">
    <div>
    <label>Name: <input type="text" name="name" value=""></label><br>
    Gender:<br>
    <label>Not Disclosed:<input type="radio" checked name="gender" value="gender not disclosed"></label><br>
    <label>Female: <input type="radio" name="gender" value="female"></label><br>
    <label>Male: <input type="radio" name="gender" value="male"></label><br>
    <label>Add Me to Your List: <input type="checkbox" name="list" value="Added To List: "></label><br>
    Country: <select name="country">
    <option value="Kenya">Kenya</option>
    <option value="UK">UK</option>
    <option value="USA">USA</option>
    <option value="n/a" selected>None of the Above</option>
    </select><br>
    <input type="submit" value="Go!">
    </div>
    </form>
    <div id="result"></div>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •