Alpha Video Training
Results 1 to 11 of 11

Thread: how to integrate 3rd party js

  1. #1
    "Certified" Alphaholic richard2007's Avatar
    Real Name
    Richard Harris
    Join Date
    Sep 2007
    Location
    Ashford, Kent, UK
    Posts
    1,094

    Default how to integrate 3rd party js

    i have found a 3rd party javascript function to do a postcode search.

    is it possible to use this in a dialog2? or on a html page and post the results to a table?

    i have copied the .js file to my web project

    added this code to the head section tag of a dialog2 properties

    Code:
    <script type="text/javascript" charset="ISO-8859-1" src="js/crafty_postcode.class.js"></script>
    	<script>
    		var cp_access_token = "03450-36cb9-c1008-00878"; // 
    		var cp_obj_1 = CraftyPostcodeCreate();
    		cp_obj_1.set("access_token", cp_access_token); 
    		cp_obj_1.set("first_res_line", "----- please select your address ----"); 
    		cp_obj_1.set("res_autoselect", "0");
    		cp_obj_1.set("result_elem_id", "crafty_postcode_result_display_1");
    		cp_obj_1.set("form", "address");
    		cp_obj_1.set("elem_company"  , "companyname"); // optional
    		cp_obj_1.set("elem_street1"  , "address1");
    		cp_obj_1.set("elem_street2"  , "address2");
    		cp_obj_1.set("elem_street3"  , "address3"); // or if you have only 2 address lines cp_obj_1.set("elem_street3"  , "");
    		cp_obj_1.set("elem_town"     , "town");
    		cp_obj_1.set("elem_county"   , "county"); // optional
    		cp_obj_1.set("elem_postcode" , "postcode");
    		cp_obj_1.set("elem_udprn" 	 , "udprn"); // optional
    		cp_obj_1.set("single_res_autoselect" , 1); // don't show a drop down box if only one matching address is found
    
    	</script>
    i have added a button to the dialog2 and added this code

    Code:
    onclick="cp_obj_1.doLookup()"


    thanks

  2. #2
    "Certified" Alphaholic
    Real Name
    Andy Gill
    Join Date
    Jul 2011
    Location
    Barbados
    Posts
    1,029

    Default Re: how to integrate 3rd party js

    there should be a place to include the js lib file under properties, not manually placing it in the header.
    Plus, the setup vars you will want to define within the onclick event.

  3. #3
    "Certified" Alphaholic richard2007's Avatar
    Real Name
    Richard Harris
    Join Date
    Sep 2007
    Location
    Ashford, Kent, UK
    Posts
    1,094

    Default Re: how to integrate 3rd party js

    i did link the .js file using the properties linked javascript file - all this did was show text on the web page that looked like the head code of the dialog.

    i have this on the button - which i got by changing the action script to search for an address using a zipcode.

    Code:
    {dialog.Object}.ajaxCallback('',1,'cp_obj.doLookup','','__postcode=new_postcode&__address2=new_street&__town=new_town&__part=O&_rowNumber=1&__cityCase=Proper');
    in the head part of the code needs to me to reference the form which holds the fields to fill in - i guessed at the name of the dialog.

    Code:
    <script type="text/javascript" charset="ISO-8859-1" src="js/crafty_postcode.class.js">
    </script>
    
    <script>
    	var cp_obj = CraftyPostcodeCreate();
    	cp_obj.set("access_token", "xxxxx-xxxxx-xxxxx-xxxxx"); // your token here
    	cp_obj.set("result_elem_id", "crafty_postcode_result_display");
    	cp_obj.set("form", "ff_newaddress");
    	cp_obj.set("elem_company"  , "companyname");
    	cp_obj.set("elem_street1"  , "address1");
    	cp_obj.set("elem_street2"  , "address2");
    	cp_obj.set("elem_street3"  , "address3");
    	cp_obj.set("elem_town"     , "town");
    	cp_obj.set("elem_county"   , "county");
    	cp_obj.set("elem_postcode" , "postcode");
    </script>
    it would be really cool if i could get this in to my application, maybe the guys at alpha can help me out.

    here is a link to the web site with instructions - http://www.craftyclicks.co.uk/web-se...d-rapidaddress, i have followed 1 and 2 but obviously i need to change 3 as im using my dialog.

    as an alternative i could put all of this on a web page which i am ok to set up, but i would need to then get the value of the fields in to my table.

  4. #4
    "Certified" Alphaholic
    Real Name
    Andy Gill
    Join Date
    Jul 2011
    Location
    Barbados
    Posts
    1,029

    Default Re: how to integrate 3rd party js

    What you are attempting seems doable. You really just want to populate fields via a callback to an external site. The devil will be in the details, but look at the video showing the twitter feed...and note that your fieldnames will need to be defined in a5 conventions.

  5. #5
    Member
    Real Name
    Lisa Li
    Join Date
    Jan 2014
    Posts
    6

    Default Re: how to integrate 3rd party js

    I am interested in integrating third party with alpha. is there any documentation or guideline something to start with?
    Thanks in advance,

    Lisa

  6. #6
    Member
    Real Name
    Ian Klek
    Join Date
    May 2013
    Location
    St Andrews, Scotland
    Posts
    100

    Default Re: how to integrate 3rd party js

    I created a solution to using Crafty Clicks that may interest you. Not JS, but the XML option. You enter the postcode, where OnChange event returns address line 1 results into a dropdown, then the OnChange of the dropdown selects that line.

    Using a dialog, create a text field to enter the postcode
    Add in the xbasic OnChange of the text field:
    Code:
    dim j as p
    dim line1 as c
    
    j = GetPostcodes(line1,e.dataSubmitted.chvaddresspostcode,"")
    
    
    	
    serverside_a0ee0c3163084c58b01b1d020cb6e882 = "{dialog.object}.populate(" + varToJSON(j) + "); {dialog.object}.prepare(); {dialog.Object}.populateDropdownBox('SELECTADDRESS',[" + line1 + "],true);"
    Place below into the Xbasic functions of the dialog:
    Code:
    function GetPostcodes as p(byref line1 as c, postcode as C, selectedLine as c)
    'debug(1)
    	dim resp as p, qty as n, j as p  ' DeliveryPointCount as C,
    	
    	resp = http_get("pcls1.craftyclicks.co.uk/xml/rapidaddress?postcode=" + postcode +  "&response=data_formatted")
    	
    	qty =  convert_type(extract_string(resp.body,"<delivery_point_count>","</delivery_point_count>",1,.F.),"N")
    	
    	'linecount = convert_type(deliverypointcount,"N")
    	
    	j.chvAddressTown = extract_string(resp.body,"<town>","</town>")
    	j.chvAddressCounty = extract_string(resp.body,"<postal_county>","</postal_county>")
    	'j.tcounty = extract_string(resp.body,"<traditional_county>","</traditional_county>",1,.F.)
    	j.chvAddressPostcode = extract_string(resp.body,"<postcode>","</postcode>")
    
    
    	dim j.udprn[qty] as c
    	dim j.line1[qty] as c
    	dim i as n
    	dim tmp as c
    	
    	for i = 1 to qty STEP 1
    		j.udprn[i] = extract_string(resp.body,"<udprn>","</udprn>",i) 
    		
    		if selectedLine = j.udprn[i] then
    			j.CHVADDRESSLINE1 = extract_string(resp.body,"<line_1>","</line_1>",i)	
    			j.CHVADDRESSLINE2 = extract_string(resp.body,"<line_2>","</line_2>",i)
    		end if
    		
    		tmp = "['" + extract_string(resp.body,"<line_1>","</line_1>",i) + "','" + j.udprn[i] + "']"
    		line1 = iif(len(line1) = 0,tmp,line1 + "," + tmp ) 
    	next
    
    	GetPostcodes = j
    
    	
    end function
    Create a dropdown called 'SELECTADDRESS'
    In the xbasic OnChange of SELECTADDRESS add:
    Code:
    dim j as p
    dim line1 as c
    
    j = GetPostcodes(line1,e.dataSubmitted.chvaddresspostcode,e.dataSubmitted.SELECTADDRESS)
    
    serverside_2a6e992d141b4c91b26853bbef7b7c8c =  "{dialog.object}.populate(" + varToJSON(j) + "); {dialog.object}.prepare();"
    The second time the GetPostcodes function is called, it should contain the updrn parameter from SELECTADDRES. When the function loops through the addresses and it comes across the address that was selected, it sets the chosen line 1 and 2 address to the actual values (passed through within the j pointer array).

    Hope this may be of help to anyone. Note though: I've just created it so it doesn't yet deal with errors and could do with a little tidy up.

  7. #7
    Member
    Real Name
    Ian Klek
    Join Date
    May 2013
    Location
    St Andrews, Scotland
    Posts
    100

    Default Re: how to integrate 3rd party js

    I'll be working on this more as it calls the postcode lookup twice. Not ideal!

  8. #8
    "Certified" Alphaholic richard2007's Avatar
    Real Name
    Richard Harris
    Join Date
    Sep 2007
    Location
    Ashford, Kent, UK
    Posts
    1,094

    Default Re: how to integrate 3rd party js

    Hi Ian,

    that's pretty cool. i had left this but am due to release my new app next week so was just about to start on it again. ill have a go at it as well.

  9. #9
    Member
    Real Name
    Ian Klek
    Join Date
    May 2013
    Location
    St Andrews, Scotland
    Posts
    100

    Default Re: how to integrate 3rd party js

    Cheers. Here's version 2, which now makes use of session variables and only sends the request once.

    Postcode textbox xbasic onChange:

    Code:
    dim results as c
    
    if GetPostcodes(results,e.dataSubmitted.chvaddresspostcode) = .t. then
    	serverside_a0ee0c3163084c58b01b1d020cb6e882 = "{dialog.Object}.populateDropdownBox('SELECTADDRESS',[" + results + "],true);" 	
    else
    	serverside_a0ee0c3163084c58b01b1d020cb6e882 = "alert('" + js_escape(session.pclookup[1].errormsg) + "'); {dialog.Object}.populateDropdownBox('SELECTADDRESS',[['']],true);"
    end if
    GetPostcodes function

    Code:
    function GetPostcodes as L(byref results as c, postcode as C)
    debug(1)
    	dim resp as p
    	dim qty as n
    	
    	'Return results
    	resp = http_get("pcls1.craftyclicks.co.uk/xml/rapidaddress?postcode=" + postcode +  "&response=data_formatted")
    	
    	'Save number of address lines
    	qty =  convert_type(extract_string(resp.body,"<delivery_point_count>","</delivery_point_count>",1,.F.),"N")
    	
    	dim session.pclookup[qty] as P
    	dim j.udprn[qty] as c
    	dim j.line1[qty] as c
    	dim i as n
    	dim tmp as c
    	
    	'Save headers
    	session.pclookup[1].errorcode	= 	extract_string(resp.body,"<error_code>","</error_code>")
    	session.pclookup[1].errormsg	= 	extract_string(resp.body,"<error_msg>","</error_msg>")
    	
    		'Quit if error exists
    		if .not. isnull(session.pclookup[1].errorcode) then 
    			exit function
    		end if
    		
    	session.pclookup[1].city 		=   extract_string(resp.body,"<town>","</town>")
    	session.pclookup[1].county 	=  	extract_string(resp.body,"<postal_county>","</postal_county>")
    	session.pclookup[1].postcode	= 	extract_string(resp.body,"<postcode>","</postcode>")
    	
    	'Loop through address lines
    	for i = 1 to qty STEP 1	
    		tmp = extract_string(resp.body,"<line_1>","</line_1>",i) + ", " + extract_string(resp.body,"<line_2>","</line_2>",i)
    		
    		results = iif(len(results)=0, "['" + tmp + "']", results + ",['" + tmp + "']" ) 
    		
    		session.pclookup[i].udprn 		=   extract_string(resp.body,"<udprn>","</udprn>",i)
    		session.pclookup[i].line1 		=   extract_string(resp.body,"<line_1>","</line_1>",i)
    		session.pclookup[i].line2 		=   extract_string(resp.body,"<line_2>","</line_2>",i)
    		session.pclookup[i].dropdownval	=	tmp
    				
    	next
    	
    	GetPostcodes = .t.
    	
    end function
    SELECTADDRESS dropdown xbasic OnChange:

    Code:
    dim j as p
    dim i as n
    
    'j = GetPostcodes(line1,e.dataSubmitted.chvaddresspostcode,e.dataSubmitted.SELECTADDRESS)
    
    for i = 1 to session.pclookup.size() STEP 1
    	if session.pclookup[i].dropdownval = e.dataSubmitted.SELECTADDRESS then
    		j.CHVADDRESSLINE1 	= 	session.pclookup[i].line1
    		j.CHVADDRESSLINE2 	= 	session.pclookup[i].line2
    		j.CHVADDRESSTOWN 	=	session.pclookup[1].town
    		j.CHVADDRESSCITY	=	session.pclookup[1].city
    		j.CHVADDRESSCOUNTY	=	session.pclookup[1].county
    		j.CHVADDRESSPOSTCODE=	session.pclookup[1].postcode
    		exit for
    	end if
    	
    next
    
    serverside_2a6e992d141b4c91b26853bbef7b7c8c =  "{dialog.object}.populate(" + varToJSON(j) + "); {dialog.object}.prepare();"

  10. #10
    Member
    Real Name
    Ian Klek
    Join Date
    May 2013
    Location
    St Andrews, Scotland
    Posts
    100

    Default Re: how to integrate 3rd party js

    The Third and final version - this is now live in our production server. The session variables in the last version didn't work correctly, but this method does and I'm told is the best when using session variables to hold arrays.

    First, declare session variables when you login (on your index page for example or upon opening the postcode search form):

    Code:
    dim session.pclookup as c = ""
    	dim session.pclookupFORMAT as c = ""
    	dim session.pclookup_error as c = ""
    	dim session.pclookup_errorFORMAT as c = ""
    GetPostcode function (plus a line print function. ReturnKey() is your crafyclicks key....explicit or in a function)

    Code:
    function GetPostcodes as L(byref results as c, postcode as C)
    debug(1)
    	dim resp as p
    	dim qty as n
    	dim i as n
    	dim tmp as c
    	dim postal_county as c
    	
    	'Drop out if session variable not valid
    	if eval_valid("session.pclookup") = .f. then
    		exit function
    	end if
    	
    	'Return arr
    	resp = http_get("pcls1.craftyclicks.co.uk/xml/rapidaddress?postcode=" + postcode +  "&response=data_formatted&key="+returnKey("however"))
    	
    	'Save number of address lines
    	qty =  convert_type(extract_string(resp.body,"<delivery_point_count>","</delivery_point_count>"),"N")
    
    	dim arr[qty] as p
    	
    	'If zero returned to return error message	
    	if qty = 0 then
    		'Place values into array
    		arr[].errorcode				= 	extract_string(resp.body,"<error_code>","</error_code>")
    		arr[..].errormsg			= 	extract_string(resp.body,"<error_msg>","</error_msg>")
    		'Dump array into session variable
    		session.pclookup_errorFORMAT= 	"errorcode|errormsg"
    		session.pclookup_error   	= 	arr.dump_properties(session.pclookup_errorFORMAT)
    		exit function
    	end if
    	
    	
    	'Loop through address lines
    	for i = 1 to qty STEP 1
    		
    		'Place values into array
    		arr[i].city 		=   extract_string(resp.body,"<town>","</town>",1)	'Only 1 city
    		postal_county		= 	extract_string(resp.body,"<postal_county>","</postal_county>",1)
    		arr[i].county  		=   iif(len(postal_county)>0,postal_county,extract_string(resp.body,"<traditional_county>","</traditional_county>",1))
    		arr[i].postcode		= 	extract_string(resp.body,"<postcode>","</postcode>",1)   'Only 1 postcode
    		arr[i].udprn 		=   extract_string(resp.body,"<udprn>","</udprn>",i)
    		arr[i].line1 		=   extract_string(resp.body,"<line_1>","</line_1>",i)
    		arr[i].line2 		=   extract_string(resp.body,"<line_2>","</line_2>",i)
    		
    		'Compile result line that shall appear in dropdown	
    		tmp = "['" + print_item(arr[i].line1,.t.) + print_item(arr[i].line2,.t.) + print_item(arr[i].city,.t.) + print_item(arr[i].county,.f.) +  "','" + arr[i].udprn + "']"
    		
    		results = iif(len(results)=0, tmp , results + "," + tmp ) 
    				
    	next
    	
    	'Dump array into session variable
    	session.pclookupFORMAT = "city|county|postcode|udprn|line1|line2"
    	session.pclookup = arr.dump_properties(session.pclookupFORMAT)
    	
    	GetPostcodes = .t.
    	
    end function 
    
    function print_item as c(data as c, post_comma as l)
    	if len(data) > 0 then
    		print_item = data +  iif(post_comma,",","")
    	end if
    end function
    Button onclick xbasic (SEARCHFOUND is a check box used to hide/show the results dropdown):

    Code:
    dim results as c
    dim arr[0] as p
    
    
    
    if GetPostcodes(results,e.dataSubmitted.chvaddresspostcode) = .t. then
    	e._set.SEARCHFOUND.value = 1
    	serverside_fb800e08aeb3496d8f6f16ba458245dc = "{dialog.Object}.populateDropdownBox('SELECTADDRESS',[" + results + "],true);" 	
    else
    	arr.initialize_properties(session.pclookup_errorFORMAT,session.pclookup_error)
    	e._set.SEARCHFOUND.value = 0
    	serverside_fb800e08aeb3496d8f6f16ba458245dc = "alert('" + js_escape(arr[1].errormsg) + "'); {dialog.Object}.populateDropdownBox('SELECTADDRESS',[['']],true);"
    end if
    SELECTADDRESS dropdown xbasic OnChange:

    Code:
    dim arr[0] as p
    dim j as p
    dim i as n
    
    arr.initialize_properties(session.pclookupFORMAT,session.pclookup)
    
    
    for i = 1 to arr.size() STEP 1
    	if arr[i].udprn = e.dataSubmitted.SELECTADDRESS then
    		j.CHVADDRESSLINE1 	= 	arr[i].line1
    		j.CHVADDRESSLINE2 	= 	arr[i].line2
    		j.CHVADDRESSCITY	=	arr[1].city
    		j.CHVADDRESSCOUNTY	=	arr[1].county
    		j.CHVADDRESSPOSTCODE=	arr[1].postcode
    		j.SEARCHFOUND		= 	1
    		exit for
    	end if
    	
    next
    
    serverside_2a6e992d141b4c91b26853bbef7b7c8c =  "{dialog.object}.populate(" + varToJSON(j) + "); {dialog.object}.prepare();"
    Last edited by kleky; 04-09-2014 at 05:18 AM.

  11. #11
    Member
    Real Name
    Ian Klek
    Join Date
    May 2013
    Location
    St Andrews, Scotland
    Posts
    100

    Default Re: how to integrate 3rd party js

    The way this works is that a session doesn't actually hold an array, but a string representation of the array. You gather the data into the pointer array 'arr', then dump that string into the session variable using arr.dump_properties. As it's a pointer array, you need another session to hold the pointer names (city, county etc). This is the session.pclookupFORMAT variable.

    To get your session back into a pointer array:
    Code:
    dim arr[0] as p
    
    arr.initialize_properties(session.xxxFORMAT,session.xxx)
    You need to create a function that will return you crafty clicks key - mine was not called ReturnKey() in reality as that's to obvious to hackers, so create you own subtly named. Or you could not be bothered and throw the key straight in.

Similar Threads

  1. Do you use 3rd party Tools Poll
    By csda1 in forum Alpha Five Version 8
    Replies: 11
    Last Post: 09-27-2008, 02:37 AM
  2. TPL and 3rd party billings
    By Mike Reed in forum Alpha Five Version 7
    Replies: 1
    Last Post: 02-01-2007, 01:01 PM
  3. 3rd party cookie trouble
    By RustyAuxier in forum Web Application Server v7
    Replies: 1
    Last Post: 04-26-2006, 05:08 PM
  4. 3rd party books for Alpha Five
    By Robert Messerly in forum Alpha Five Version 6
    Replies: 4
    Last Post: 03-13-2006, 10:12 PM
  5. 3rd Party Solutions
    By Ted Giles in forum Alpha Five Version 6
    Replies: 0
    Last Post: 03-11-2006, 04:51 AM

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
  •