This discussion has been locked.

You can no longer post new replies to this discussion. If you have a question you can start a new discussion

DEVELOPERS FORUM - how to use jquery.autocomplete in a Form

Peter Borsje - Thursday, May 22, 2014 2:04 AM:

Hi community,

Do someone have experience how to use JQeury widgets on a Form? Is this possible?

I want to use the autocomplete function to let the user easy pick an item from a list and if it is not available in the list the user can type their own value. The jquery gives an example how to use it on http://jqueryui.com/autocomplete/

I used this example code in a html field on a Form.

<head>

<meta charset="utf-8">

<title>jQuery UI Autocomplete - Default functionality</title>

<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<link rel="stylesheet" href="/resources/demos/style.css">

<script>

$(function() {

var availableTags = [

"ActionScript",

"AppleScript",

"Asp",

"BASIC",

"C",

"C++",

"Clojure",

"COBOL",

"ColdFusion",

"Erlang",

"Fortran",

"Groovy",

"Haskell",

"Java",

"JavaScript",

"Lisp",

"Perl",

"PHP",

"Python",

"Ruby",

"Scala",

"Scheme"

];

$( "#tags" ).autocomplete({

source: availableTags

});

</script>

</head>

<body>

<div class="ui-widget">

<label for="tags">Tags: </label>

<input id="tags">

</div>

</body>

This did not work. We also tried to install the JQuery library in our codetree and reference to in the code but without succes.

We also tried to move out the script declaration to Clientjavascriptscriptset1.aspx but this gave an error at the startup from Aras (iis was reset after scriptset1 modification)

Any suggestion on this or alternatives to Jquery.Autocomplete?

Regards,

Peter

DavidSpackman - Sunday, June 1, 2014 9:17 PM:

Hi Peter,

I was able run jquery functions this way.

HTML property field

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ready demo</title>
<style>
p {
color: red;
}
</style>
<script type="text/javascript" src="../javascript/jquery-latest.min.js"></script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>

Form Event - onLoad (Javascript)

$(document).ready(function ()

{

$("p").text("The DOM is now loaded and can be manipulated.");

});

Peter Borsje - Tuesday, June 3, 2014 11:04 AM:

Hi David,

Thanks for your help.

I implemented your code and got the message "The DOM is now loaded and can be manipulated".

After that I modified it to see if I can make the Autocomplete function from JQuery working.

!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>jQuery UI Autocomplete - Default functionality</title>
<style>
p {
color: red;
}
</style>
<link rel="stylesheet" href="../Solutions/Cofely/scripts/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css"/>
<script type="text/javascript" src="Solutions/Cofely/scripts/jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Solutions/Cofely/scripts/jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>
<script> $(function()
{    var availableTags = [ "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
        ];
  $( "#autocomplete" ).autocomplete({
    source: availableTags
  });
});
</script>

</head>
<body>
<p>Not loaded yet.</p>
<h2 class="demoHeaders">Autocomplete</h2>
  <div class="ui widget">
   <input id="autocomplete"/>
  </div>
</body>
</html>

I tested this code also in a html file that I opened with a browser. In the browser it did work but in Aras it did not.

Any suggestions?

Peter

DavidSpackman - Tuesday, June 3, 2014 9:30 PM:

HI Peter,

Can you move your jquery to a onload javascript method?

Peter Borsje - Wednesday, June 4, 2014 8:14 AM:

Hi David,

I got it working thanks to your suggestion!

The code for the HTML field is now:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>jQuery UI Autocomplete - Default functionality</title>
<style>
p {
color: red;
}
</style>
<link rel="stylesheet" href="../Solutions/Cofely/scripts/jquery-ui-1.10.4/css/ui-lightness/jquery-ui-1.10.4.min.css"/>
<script type="text/javascript" src="../Solutions/Cofely/scripts/jquery-ui-1.10.4/js/jquery-1.10.2.js"></script>
<script type="text/javascript" src="../Solutions/Cofely/scripts/jquery-ui-1.10.4/js/jquery-ui-1.10.4.js"></script>

</head>
<body>
<p>Not loaded yet.</p>
<h2 class="demoHeaders">Autocomplete</h2>
<div class="ui widget">
<input id="autocomplete"/>
</div>
</body>
</html>

And for the onLoad form event:

$(function()
{    var availableTags = [ "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"
        ];
  $( "#autocomplete" ).autocomplete({
    source: availableTags
  });
});