JQuery Newbie

D

davebonas

New Member
Hi All,

I have just been asked to look at incorporating a JQuery plugin into a webspeed page which we have never done before so have started with the basics but keep getting an error when defining the entry point.

The standard jQuery entry point code is described as follows


<script type = "text/javascript">// Define the entry point

$(document).ready(function() {
// The DOM (document object model) is constructed
// We will initialize and run our plugin here
}</script>



which I am then putting into the webspeed code as

{&OUT}
'<script type = "text/javascript">''// Define the entry point'

'$(document).ready(function() ~{'
' // The DOM (document object model) is constructed'
' // We will initialize and run our plugin here'
'~}''</script>'.

this compiles fine but when I run it in IE I get the exclamation mark in the bottom left corner and the message within the popup when I double click it is saying that an 'Object is expected' at char 0 on the $(document).ready(function(){ line.

I'm not sure where I have gone wrong :confused: and cannot find any examples within the forums so hoped someone who has used jQuery would care to share their secrets...:awink:

regards,

Dave.
 
Hi,

You dont put jquery or javascript in your speedscript there is no need to do that.

Here are some simple examples using jquery

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<script type="text/javascript" src="[URL]http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script[/URL]>
<script type="text/javascript">
$(document).ready(function() {
// you jquery code goes between these tags. //
 
   // toggles the div with the id "hello" to fade in and out   
   $('#button1').click(function() {
       $('#helloid').slideToggle('slow');
      return false;
   });
   // show an alert   
   $('#mylink1').click(function() {
       alert("Hello Im an alert box");
      return false;
   });
   // I am an alert box from a hyperlink   
   $('#mylink2').click(function() {
       alert("Hello Im an alert box");
      return false;
   });
   // do something on click of button2 I could submit
   // a form do an ajax request etc. 
   $('#button2').click(function() {
       var k = $('#keyword').val();
       // hide output value div
       $('#output').hide();
       alert("you clicked the button. You entered the keyword "+k);
       // set text for output container to value
       $('#output').html("Search Keyword: <strong>"+k+"</strong>");
       // fade it in
       $("#output").fadeIn("slow");
       return false;
   });
 
// you jquery code goes between these tags. //
});
</script>
</head>
<body>
<input type="button" id="button1" value="Toggle Hello"><br />
<div id="helloid" style="padding:10px;background-color:#eee;width:120px">Hello</div>
<p id="mylink1">Click me and show alert</p>
<a id="mylink2" href="#">click me and show alert using hyperlink and an id</a>
<p style="padding-top:1px">
   Enter a value and click button
</p>
<form id="myform">
 <input id="keyword" name="keyword" type="text" value="toast" size="50"><br />
 <input type="button" id="button2" value="Click Button">
</form>
<div id="output" style="padding-top:20px"></div>
</body>
</html>

So with the same example I am including some speedscript (webspeed 4gl code) in my jquery. This is a very basic example below. Im just setting a variable to todays date and adding the date to the alert display initiated by jquery.

To see the below code work you need to compile in workshop since I have some speedscript in the page.

with some speedscript

Code: 
<script language="speedscript">
 
  /* I can have some progress code here */
  def var v-progress-date as char no-undo.
 
  /* I will set this variable to todays date 
     and include that in my jquery script using
     the back tic */
  assign v-progress-date = string(today).
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[URL]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/URL]">
<html xmlns="[URL]http://www.w3.org/1999/xhtml[/URL]">
<head>
<script type="text/javascript" src="[URL]http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script[/URL]>
<script type="text/javascript">
$(document).ready(function() {
// you jquery code goes between these tags. //
 
   // toggles the div with the id "hello" to fade in and out   
   $('#button1').click(function() {
       $('#helloid').slideToggle('slow');
      return false;
   });
   // show an alert   
   $('#mylink1').click(function() {
       alert("Hello Im an alert box. todays date is `v-progress-date`");
      return false;
   });
   // I am an alert box from a hyperlink   
   $('#mylink2').click(function() {
       alert("Hello Im an alert box. todays date is `v-progress-date`");
      return false;
   });
   // do something on click of button2 I could submit
   // a form do an ajax request etc. 
   $('#button2').click(function() {
       var k = $('#keyword').val();
       // hide output value div
       $('#output').hide();
       alert("you clicked the button. You entered the keyword "+k);
       // set text for output container to value
       $('#output').html("Search Keyword: <strong>"+k+"</strong>");
       // fade it in
       $("#output").fadeIn("slow");
       return false;
   });
 
// you jquery code goes between these tags. //
});
</script>
</head>
<body>
<input type="button" id="button1" value="Toggle Hello"><br />
<div id="helloid" style="padding:10px;background-color:#eee;width:120px">Hello</div>
<p id="mylink1">Click me and show alert</p>
<a id="mylink2" href="#">click me and show alert using hyperlink and an id</a>
<p style="padding-top:1px">
   Enter a value and click button
</p>
<form id="myform">
 <input id="keyword" name="keyword" type="text" value="toast" size="50"><br />
 <input type="button" id="button2" value="Click Button">
</form>
<div id="output" style="padding-top:20px"></div>
</body>
</html>
 

Attachments

You must log in or register to reply here.
Back
Top