Working with jQuery from Visual foxpro

Published on December 3 2015 by Yousfi Benameur


jQuery is a lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on the web pages.
jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.
The jQuery library contains the following features:
    HTML/DOM manipulation
    CSS manipulation
    HTML event methods
    Effects and animations
    AJAX
    Utilities
Tip: In addition, jQuery has plugins for almost any task out there


the compiled file zlibrary.fxp (100 ko) shipped embeds 36 functions relative to jquery demos.
it must be on the source folder with the form to make the codes working.
its a good tutoriel for whose want to work with jQuery from visual foxpro through the IE browser as olecontrol.
i dont shipped the prg because its editable and contains jquery scripts( as some old developpers shipped flls from C or C++).it can be decompiled but this is not important!
all is not lost because each code is retrieved separatly by clicking on  the bottom button on the form  as txt file.

All demos are from this jQuery site:http://jqueryui.com/demos/
can download for free the jQuery UI library and all the samples.

I used web urls to link to all the libraries (js,css) that why internet must be connected (its tested in code).
all the used libraries are on the web servers.

click on any title on the left grid to play the web page sample on the right browser.
Some automations can interact between vfp and the web page as thisform.olecontrol1.getElementbyId,... and then can trap the values from the jQuery results...

SUBJECTS aborded are various as:
DATEPICKER
EASING_DEMOS
EFFECTS ON ELEMENTS
IMAGESCYCLER
MAPS
TOOLBAR
MENUS
MODAL DIALOGS
TOOLTIPS
PHOTOS_MANAGER
PROGRESSBARS
ACCORDIONS
....
can appreciate how jQuery is indeed a lightweight library.Note that javascript is the first soft used in the world wide actually.
The jQuery runs on all navigators and its cross-browser library.

Note: can run all these codes as local files but modify the url from http:// to local  files in the  script tags of each code.
in the download builder  page choose a theme (CSS-24 themes) and you have all components themed.in this demo its a basic theme only .

*Download the zip below,unzip and run the yjQUery.prg.

*Important:These codes are tested on Win10 pro+ie11 emulation and vfp9sp2
*errata: correct this line as:[Create Cursor ycurs (num i,Title c(25))] in zip yjQuery.prg code.

*added on Friday 04 decmeber 2015 8 themed jQuery datePickers adapted from Github.

Click on code to select [then copy] -click outside to deselect


*1*
*save this code as yjQuery.prg work with zlibrary.fxp and internet connected.
Publi yform
yform=Newobject("yjQuery")
yform.Show
Read Events
Retu
*
Define Class yjQuery As Form
    Height = 611
	Width = 898
	ShowWindow = 2
	AutoCenter = .T.
	Caption = "Form1"
	yscript = .F.
	Name = "Form1"

	Add Object grid1 As Grid With ;
		Anchor = 768, ;
		Height = 576, ;
		Left = 0, ;
		ReadOnly = .T., ;
		Top = 0, ;
		Width = 235, ;
		Name = "Grid1"

	Add Object olecontrol1 As OleControl With ;
		oleclass="shell.explorer.2", ;
		Top = 0, ;
		Left = 246, ;
		Height = 577, ;
		Width = 649, ;
		Anchor = 15, ;
		Name = "Olecontrol1"

	Add Object command1 As CommandButton With ;
		Top = 585, ;
		Left = 492, ;
		Height = 25, ;
		Width = 145, ;
		FontBold = .T., ;
		FontSize = 12, ;
		Anchor = 768, ;
		Caption = "Script code", ;
		MousePointer = 15, ;
		ForeColor = Rgb(255,0,0), ;
		Name = "Command1"

	Add Object label1 As Label With ;
		AutoSize = .T.,;
		FontBold = .T.,;
		FontSize = 16,;
		Anchor = 768,;
		BackStyle = 0,;
		Caption = "?",;
		Height = 27,;
		Left = 648,;
		MousePointer = 15,;
		Top = 585,;
		Width = 15,;
		ForeColor = Rgb(0,255,0),;
		Name = "Label1"

	Procedure label1.Click
	local m.xtitle,m.myvar
		m.xtitle='<center  style="color:white;background-color:navy;"><h2>Summary help</h2></center><br<'
		m.myvar=m.xtitle+'<p style="color:maroon;padding:10px;">'+Strtran(Filetostr(m.yrep+"yreadme.txt"),Chr(13),"<br>")+"</p>"
		Thisform.yscript=m.myvar
		Local m.lcdest
		m.lcdest=m.yrep+"test.html"
		Strtofile(m.myvar,m.lcdest)
		With Thisform.olecontrol1
			.Navigate(m.lcdest)
		Endwith
	Endproc


	Procedure my
		Lparameters nButton, nShift, nXCoord, nYCoord
		Sele ycurs
		Local m.x
		m.x=Recno()

		Try
			m.myvar=Eval("y"+Trans(m.x)+"()")
			Thisform.yscript=m.myvar
			Local m.lcdest
			m.lcdest=m.yrep+"test.html"
			Set Safe Off
			Strtofile(m.myvar,m.lcdest)

			With Thisform.olecontrol1
				.Navigate(m.lcdest)
			Endwith
		Catch
			Messagebox("function y"+Trans(m.x)+"() dont exist!",16+4096)
		Endtry
	Endproc

	Procedure Init
		*check if internet connected
		Declare Integer InternetCheckConnection In wininet;
			STRING lpszUrl, Integer dwFlags, Integer dwReserved

		#Define FLAG_ICC_FORCE_CONNECTION 1
		lcURL="http://www.microsoft.com"
		lResult = (InternetCheckConnection(lcURL, FLAG_ICC_FORCE_CONNECTION, 0)=1)
		If !lResult=.T.
			Messagebox("There is no internet connexion ! this must be established mandatory to run the program.",0+16,"internet Connection")
			Return .F.
		Endi
		***************
		Set Safe Off
		Publi m.yrep
		m.yrep=Addbs(Justpath(Sys(16,1)))
		Set Defa To (yrep)
		Thisform.yscript=""
		******************
		If !File(m.yrep+"zlibrary.fxp")
			Messagebox("library [zlibrary.fxp] must be in source folder.....cancelling!",16+4096,"Error",2000)
			Return .F.
		Endi
		*****************
		Create Cursor ycurs (num i,Title c(25))
		Local m.xx
		TEXT to m.xx noshow
		ADD_CLASS_DEMO
		DATEPICKER
		DATEPICKER0
		DATEPICKER2
		DATEPICKER3
		DATEPICKER4
		DATEPICKER5
		DATEPICKER6
		DATEPICKER_INLINE
		DATEPICKER_LOCALIZED
		EASING_DEMOS
		EFFECTS_ON_ELEMENTS
		IMAGES_CYCLER
		MAP_SPINNER
		MEDIAPLAYER_TOOLBAR
		MENU_ICONS
		MENU_SELECT
		MODAL_DIALOG_ANIMATION
		MODAL_DIALOG_CONFIRM
		MODAL_DIALOG_MESSAGE
		MODAL_MOUSE_TRACK
		MODAL_TOOLTIP_CUSTOM
		PHOTOS_MANAGER
		PROGRESSBAR_CUSTOM
		PROGRESSBAR_DOWNLOAD
		RESIZABLE
		SLDER_SCROLLBAR
		SLIDER_COLORPICKER
		SLIDER_VERTICAL
		TABS_COLLAPSE
		TABS_MOUSEOVER
		TABS_SORTABLE
		YJQUERY_ACCORDEON
		YJQUERY_ACCORDEON1
		YJQUERY_ACCORDEON2
		YJQUERY_ACCORDEON3
		ENDTEXT

		For i=1 To Memlines(m.xx)
			Insert Into ycurs Values (i,Allt(Mline(m.xx,i)))
		Endfor
		Thisform.Caption=Trans(Reccount())+" jQuery samples"
		Locate

		With Thisform.grid1
			.RecordSource="ycurs"
			.FontSize=8
			.GridLines=0
			.DeleteMark=.F.
			.SetAll("DynamicBackColor", "IIF(MOD(RECNO( ), 2)=0, RGB(205,215,207) , RGB(0,255,0))", "Column")
			.AutoFit
			Bindevent(.Columns(2).text1,"mousedown",Thisform,"my")
		Endwith
		Set Defa To (yrep)
		Set Proc To (m.yrep+"zlibrary") AddI
	Endproc


	Procedure Destroy
		Release Proc (m.yrep+"zlibrary")
		Erase m.yrep+"test.html"
		Erase Addbs(Sys(2023))+"ytemp.txt"
		Clea Events
	Endproc

	Procedure command1.Click
		Local m.oo
		m.oo=Addbs(Sys(2023))+"ytemp.txt"
		Strtofile(Thisform.yscript,m.oo)
		Run/N notepad &oo
	Endproc

Enddefine
*
*-- EndDefine: yjQuery

Click on code to select [then copy] -click outside to deselect


*2*
*jQuery calculators ( a basic and scientific calculators).
*from http://keith-wood.name/calculator.html
*can see and free download more at https://github.com/kbwood/calculator
*i link to web libraries.in github download all are in local files.

Local m.myvar
TEXT to m.myvar noshow
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Calculator</title>
<link rel="stylesheet" href="http://keith-wood.name/css/jquery.calculator.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://keith-wood.name/js/jquery.plugin.js"></script>
<script src="http://keith-wood.name/js/jquery.calculator.js"></script>
<script>
$(function () {
    $.calculator.setDefaults({showOn: 'both', buttonImageOnly: true, buttonImage: 'http://keith-wood.name/img/calculator.png'});
	$('#basicCalculator').calculator();
	$('#sciCalculator').calculator({layout: $.calculator.scientificLayout});
});
</script>
</head>
<body bgcolor=bisque  oncontextmenu="return false;">
<center><h1 style="color:red;background-color:navy;">jQuery Calculator Basics (from http://keith-wood.name/calculator.html)</h1></center>

<p><input type="text" id="basicCalculator"></p>
<p>- </p>
<p>- </p>
<p>- </p>
<p>- </p>
<p>- </p>
<p><input type="text" id="sciCalculator"></p>
</body>
</html>

ENDTEXT
Set Safe Off
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)

Declare Integer BringWindowToTop In user32 Integer
Local apie
apie=Newobject("internetexplorer.application")
With apie
    .silent=.t.
	.Navigate(m.lcdest)
	.menubar=0
	.Toolbar=0
	.StatusBar=0
	.Resizable=0
	.Width=600
	.Height=600
	.Top=50
	.Left=(Sysmetric(1)-.Width)/2
	BringWindowToTop(.HWnd)
	.Visible=.T.
Endwith

Click on code to select [then copy] -click outside to deselect


*3*
*jQuery calculators
*from http://keith-wood.name/calculator.html
*the same code but for a styled calculator midnight colors (css+juery script change)

Local m.myvar
TEXT to m.myvar noshow
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>jQuery Calculator</title>
<link rel="stylesheet" href="http://keith-wood.name/css/jquery.calculator.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://keith-wood.name/js/jquery.plugin.js"></script>
<script src="http://keith-wood.name/js/jquery.calculator.js"></script>

<style>
.calculator-popup.midnight { background: #10085a; }
.midnight .calculator-space { width: 38px; }
.midnight .calculator-result { background-color: #1a0d91;
    color: #fff; font-size: 1.5em; }
.midnight .calculator-row .calculator-undo,
.midnight .calculator-row .calculator-clear-error,
.midnight .calculator-row .calculator-clear {
    font-size: 1em; padding-left: 3px; }
.midnight .calculator-row button { width: 38px; height: 38px; padding: 5px;
    background: url(http://keith-wood.name/img/midnight.gif) no-repeat; border: none;
    color: #fff; font-size: 1.5em; font-weight: bold; }
.midnight .calculator-row .calculator-key-down { padding: 7px 3px 3px 7px;
    background: url(http://keith-wood.name/img/midnight.gif) no-repeat -38px 0px; }
.midnight .calculator-keystroke { width: 30px; height: 20px; color: #fff;
    background-color: #10085a; font-weight: normal; font-size: 0.8em; }
</style>

<script>
$(function () {
$('#midnightCalc').calculator({calculatorClass: 'midnight',closeText: 'X', useText: 'Y', eraseText: 'N', showOn: 'both', buttonImageOnly: true, buttonImage: 'http://keith-wood.name/img/calculator.png'});
});
</script>

</head>
<body bgcolor=bisque  oncontextmenu="return false;">
<center><h1 style="color:red;background-color:navy;">jQuery Calculator Basics (from http://keith-wood.name/calculator.html)</h1></center>


  <p> <input type="text" id="midnightCalc"></p>
  </body>
</html>

ENDTEXT
Set Safe Off
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)

Declare Integer BringWindowToTop In user32 Integer
Local apie
apie=Newobject("internetexplorer.application")
With apie
    .silent=.t.
    .Navigate(m.lcdest)
	.menubar=0
	.Toolbar=0
	.StatusBar=0
	.Resizable=0
	.Width=600
	.Height=600
	.Top=50
	.Left=(Sysmetric(1)-.Width)/2
	BringWindowToTop(.HWnd)
	.Visible=.T.
Endwith

Click on code to select [then copy] -click outside to deselect

                  
 
 
*4*
 *8 themed jQuery datePickers attached to a texbox.
 *can download complet jQuery project at: https://github.com/rtsinani/jquery-datepicker-skins
 *these 8 datePickers are adapted from this site(free use)


Local m.xstyle
m.xstyle=Int(Val(Inputbox("style datePicker 1-8","","3")))
If Empty(m.xstyle)
    Return .F.
Endi
If ! Between(m.xstyle,1,8)
	m.xstyle=1
Endi

Local mystyle
Do Case
	Case m.xstyle=1
		m.ystyle="santiago"
	Case m.xstyle=2
		m.ystyle="latoja"
	Case m.xstyle=3
		m.ystyle="lugo"
	Case m.xstyle=4
		m.ystyle="cangas"
	Case m.xstyle=5
		m.ystyle="vigo"
	Case m.xstyle=6
		m.ystyle="nigran"
	Case m.xstyle=7
		m.ystyle="melon"
	Case m.xstyle=8
		m.ystyle="siena"
Endcase

Local m.myvar
TEXT to m.myvar textmerge noshow
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="description" content="CSS3 skins for jQuery UI datapicker" />
	<meta name="keywords" content="jquery datepicker themes, jquery datepicker skins, jquery ui datepicker themes, jquery ui datepicker skins, CSS3 jquery datepicker, CSS3 datepicker, CSS3 calendar, javascript datepicker, javascript calendar" />
	<meta property="twitter:card" content="summary"/>
  <meta property="twitter:site" content="@GitHub">
  <meta property="twitter:title" content="rtsinani/jquery-datepicker-skins"/>

	<title>jquery-datepicker-skins :: CSS3 skins for jQuery UI datepicker</title>
	<link href="http://rtsinani.github.io/jquery-datepicker-skins/css/jquery-ui-1.10.1.css" rel="stylesheet">

	<link href="http://rtsinani.github.io/jquery-datepicker-skins/css/jquery-ui-1.10.1.css" rel="stylesheet">
	<link href="http://rtsinani.github.io/jquery-datepicker-skins/css/santiago.datepicker.css" rel="stylesheet">
	<link href="http://rtsinani.github.io/jquery-datepicker-skins/css/latoja.datepicker.css" rel="stylesheet">
	<link href="http://rtsinani.github.io/jquery-datepicker-skins/css/lugo.datepicker.css" rel="stylesheet">
	<link href="http://rtsinani.github.io/jquery-datepicker-skins/css/cangas.datepicker.css" rel="stylesheet">
	<link href="http://rtsinani.github.io/jquery-datepicker-skins/css/vigo.datepicker.css" rel="stylesheet">
	<link href="http://rtsinani.github.io/jquery-datepicker-skins/css/nigran.datepicker.css" rel="stylesheet">
    <link href="http://rtsinani.github.io/jquery-datepicker-skins/css/melon.datepicker.css" rel="stylesheet">
	<link href="http://rtsinani.github.io/jquery-datepicker-skins/css/siena.datepicker.css" rel="stylesheet">
	<style>
		body {
			font: 100% "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
			margin: 0;
			background:fff;

		}

		h1 {
			width:600px;
			margin: .5em auto 0;
			padding: 10px 0 0;
			background: url('') left center no-repeat;
			height: 43px;
			line-height: 30px;
			padding-left: 50px;
			color: #ed7474;
			font-size: 1.6em;
		}

		h2 {
			width:600px;
			margin: .5em auto 0;
		}

		article {
			display: block;
			width: 620px;
			margin: 1em auto;
			margin-left:20px;
		}

		input {
			font-size: 1em;
		}

	</style>
</head>
<body>
	<h1>jQuery datepicker skins:<<m.ystyle>></h1>
	<p style="color:maroon;font-size:12px;<width:200px;margin-left:20px;">Click on textbox to fire the attached datePicker</p>
	<article>
		<div>
			<input type="text" id="date-picker-input-1" />
		</center>
	</article>
	<script src="http://rtsinani.github.io/jquery-datepicker-skins/js/jquery-1.9.1.js"></script>
	<script src="http://rtsinani.github.io/jquery-datepicker-skins/js/jquery-ui-1.10.1.min.js"></script>
	<script>
		$(function() {
			$( "#date-picker-input-1" ).datepicker({
				inline: true,
				showOtherMonths: true
			})
			.datepicker('widget').wrap('<div class="ll-skin-<<m.ystyle>>"/>');
		});
	</script>
</body>
</html>
ENDTEXT

Set Safe Off
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)


Declare Integer BringWindowToTop In user32 Integer
Local apie
apie=Newobject("internetexplorer.application")
With apie 
    .silent=.t.
	.Navigate(m.lcdest)
	.menubar=0
	.Toolbar=0
	.StatusBar=0
	.Resizable=0
	.Width=700
	.Height=500
	.Top=50
	.Left=(Sysmetric(1)-.Width)/2
	BringWindowToTop(.HWnd)
	.Visible=.T.

Endwith

Click on code to select [then copy] -click outside to deselect


*5*  added on 08 december 2015
*a basic jquery looping diaporama (images limited to 20 max picked on local disc)
*can adjust the width,height in tag img as wanted
*libraries (js+css) are in the author site server.(internet connected)
*this seems fast.if download librairies (css+js files) can adjust the delay (actual=3 sec --> 6sec).

local m.yrep,gnbre
m.yrep=Getdir()
If Empty(m.yrep)
    Return .F.
Endi
m.yrep=Addbs(m.yrep)
gnbre=Adir(gabase,m.yrep+"*.jpg")
If gnbre=0
	Return .F.
Endi
If gnbre>20   &&limit to 20
	gnbre=20
Endi
Local m.x
m.x=""

For i=1 To gnbre
	m.x=m.x+[<li><img src="file:///]+Strtran(m.yrep+gabase(i,1),"\","/")+[" alt="" title="]+Juststem(gabase(i,1))+["  width="800"  height="550" /></li>]+Chr(13)
Endfor
*_cliptext=m.x

Local m.myvar
TEXT to m.myvar textmerge noshow
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Diaporama Simple JQuery</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<!-- Cascading Style Sheets -->
		<link href="http://tuts.guillaumevoisin.fr/jquery/diaporamav2/page.css" rel="stylesheet" type="text/css" />
		<link href="http://tuts.guillaumevoisin.fr/jquery/diaporamav2/style.css" rel="stylesheet" type="text/css" />

		<!-- Javascript -->
		<script type="text/javascript" src="http://tuts.guillaumevoisin.fr/jquery/diaporamav2/js/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="http://tuts.guillaumevoisin.fr/jquery/diaporamav2/js/jquery.jDiaporama.js"></script>
		<script type="text/javascript" src="http://tuts.guillaumevoisin.fr/jquery/diaporamav2/js/script.js"></script>
	</head>

	<body   oncontextmenu="return false;" topmargin=0 leftmargin=0 scroll="no">
	<center><table><tr>
	<td width=95%><h1>Diaporama Simple</h1></td>
	<td ><input type="button", value="X" style="color:red;float:right;cursor:pointer;" onclick="window.open('','_self');window.close();"></td></tr>
	</table></center>

		<center><ul class="diaporama1">
	<<m.x>>
		</ul></center>
		<br />

	</body>

</html>
ENDTEXT
Set Safe Off
Local m.lcdest
m.lcdest=Addbs(Sys(2023))+"test.html"
Strtofile(m.myvar,m.lcdest)

Declare Integer BringWindowToTop In user32 Integer
Local apie
apie=Newobject("internetexplorer.application")
With apie
    .silent=.t.
	.fullscreen=1
	.Navigate(m.lcdest)
	BringWindowToTop(.HWnd)
	.Visible=.T.
Endwith

yjQuery.zip

https://drive.google.com/file/d/0B0r2Vqm-fZwnY1paVlo0eWt3aGc/view?usp=sharing

the yjQuery.zip is relative to the first code (*1*) only.