AJAX to get memberInfo to add as variable in Javascript

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
peebee
AppGini Super Hero
AppGini Super Hero
Posts: 356
Joined: 2013-03-21 04:37

AJAX to get memberInfo to add as variable in Javascript

Post by peebee » 2015-06-16 06:20

Looking for some help please. I currently use a javascript button(s) above a <textarea> for users to insert a date/time stamp into the field before entering their text updates.

Yes, I know I can use a <%%editingDateTime%%> default value but that only records the last edit details - not all edits to the particular field which may be updated many times. Inserting the date/time with the javascript button is handy and allows users to store the details immediately above every new entry to the text field (presuming the User does actually use the button as instructed) and it is working well for my purpose.

Date & Time works perfectly. Now I am now trying to add $memberInfo['username'] to the button's javascript function but I can't work out exactly how to achieve that so far? I need to keep a chronological record of updates.

I realise it will have to be an AJAX call as the $memberInfo['username'] will have to be delivered server-side. I've created a php script to successfully retrieve the $memberInfo['username']. Now I just have to successfully get the $memberInfo['username'] result to my javascript file? I've tried quite a few AJAX functions but they all either result in "undefined" or a broken javascript with no result. What AJAX function and where to include in my javascript file??? Any help or advice greatly appreciated.

This is what I have so far:

The text field button

Code: Select all

<button type="button" class="btn btn-success btn-xs" onclick="ajaxFunction();setStartTimeNow()"><span class="glyphicon glyphicon-pencil"></span><span style="color: #fff"> Insert Date/Time Stamp</span></button> - <i>Click button to insert new Date/Time Stamp</i><textarea class="form-control" name="possession" id="possession" rows="8"><%%VALUE(possession)%%></textarea>
The getMemberInfo.php file

Code: Select all

<?php
/* Get MemberInfo for date/time stamps */
	$curr_dir = dirname(__FILE__);
	include("{$curr_dir}/defaultLang.php");
	include("{$curr_dir}/language.php");
	include("{$curr_dir}/lib.php");	
	
	$mi = getMemberInfo();
	echo $mi['username'];
?>
Javascript to insert date/timestamp (field name is "possession")

Code: Select all

	function setStartTimeNow()
			{
			var theInput = document.getElementById("possession");
  			var now = new Date();
  			var date = [ "\n" + "Date: " + ((now .getDate() < 9 ? '0' : '') + (now .getDate())), ((now .getMonth() < 9 ? '0' : '') + (now .getMonth() + 1)), now.getFullYear() ];
  			var time = [ now.getHours(), now.getMinutes() ];
  			var suffix = ( time[0] < 12 ) ? "AM" : "PM" + "\n" ;
  			time[0] = ( time[0] < 12 ) ? time[0] : time[0] - 12;
  			time[0] = time[0] || 12;
  			for ( var i = 1; i < 3; i++ ) {
    			if ( time[i] < 10 ) {
      			time[i] = "0" + time[i];
    }
  }
 
// Return the formatted string
  			return theInput.value += date.join(".") + " " + time.join(":") + " " + suffix;
}

udayvatturi
AppGini Super Hero
AppGini Super Hero
Posts: 85
Joined: 2014-06-14 03:08
Location: India
Contact:

Re: AJAX to get memberInfo to add as variable in Javascript

Post by udayvatturi » 2015-06-17 09:49

Ajax Call

var url1="getMemberInfo.php";
jQuery.ajax({
url: url1,
dataType: 'json',
success:function(response){
alert(response); //display memberinfo['username']

}

});

getMemberInfo.php
<?php
$curr_dir = dirname(__FILE__);
include("{$curr_dir}/defaultLang.php");
include("{$curr_dir}/language.php");
include("{$curr_dir}/lib.php");

$mi = getMemberInfo();
echo json_encode($mi['username']);
?>

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 356
Joined: 2013-03-21 04:37

Re: AJAX to get memberInfo to add as variable in Javascript

Post by peebee » 2015-06-19 04:21

Thanks Uday. Much appreciated. With a little bit of fiddling around and changing the Ajax call from Asynchronous to Synchronous (add async: false) if have finally managed to get the button to return the formatted string exactly as I wanted it like so:

Date: 19.06.2015 12:21 PM - by: The Username

This is the final javascript that is working in case anybody is interested:

Code: Select all

	function setStartTimeNow() {
           var theInput = document.getElementById("possession");
           var now = new Date();
           var date = [ "\n" + "Date: " + ((now .getDate() < 9 ? '0' : '') + (now .getDate())), ((now .getMonth() < 9 ? '0' : '') + (now .getMonth() + 1)), now.getFullYear() ];
           var time = [ now.getHours(), now.getMinutes() ];
           var suffix = ( time[0] < 12 ) ? "AM" : "PM";
           time[0] = ( time[0] < 12 ) ? time[0] : time[0] - 12;
           time[0] = time[0] || 12;
           for ( var i = 1; i < 3; i++ ) {
             if ( time[i] < 10 ) {
               time[i] = "0" + time[i];
    			}
  		}
			// Ajax call
			jQuery.ajax({	
			url: 'getMemberInfo.php',
			dataType: 'json',
			async: false,
			success:function(response){
			username=response; //display memberinfo['username']
				}
			})
// Return the formatted string
           return theInput.value += date.join(".") + " " + time.join(":") + " " + suffix + " " + "- by: "+ username + "\n";
}


Post Reply