Solved

Spry AutoSuggestion With Ajax

Posted on 2008-06-12
1
943 Views
Last Modified: 2012-08-13
Hi,
I try to use Spry.AutoSuggest widget in my project with ajax. But it doesn't work with ajax. In normally there is no problem.
I've attach code.
Spry link : http://labs.adobe.com/technologies/spry/

<?php
if (isset($_GET["progress"])){
	?>
	<div id="spryautosuggest1">
	  <input type="text" name="text1" id="text1" />
			<div id="productMenu" spry:region="dsProducts1">
				<div spry:repeat="dsProducts1" spry:suggest="{DISPLAY_TEXT}">
					<div>{DISPLAY_TEXT}</div>
				</div>
			</div>
	</div>	
	<?php
	exit();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>CRM</title>
<script src="/js/Spry_1_6_1_022408/widgets/autosuggest/SpryAutoSuggest.js" type="text/javascript"></script>
<script src="/js/Spry_1_6_1_022408/includes/xpath.js" type="text/javascript"></script>
<script src="/js/Spry_1_6_1_022408/includes/SpryData.js" type="text/javascript"></script>
<link href="/js/Spry_1_6_1_022408/widgets/autosuggest/SpryAutoSuggest.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/prototype.js"></script>
 
<script language="javascript">
var sprysuggest1;
var dsProducts1;
 
function getSuggestionDiv(){
	new Ajax.Request("a.php?progress=yes",{onComplete:getSuggestionDivComplete});
}
 
function getSuggestionDivComplete(request){
	dsProducts1 = new Spry.Data.XMLDataSet("adobe_products-xml.txt", "/FIELDS/FIELD", { sortOnLoad: "DISPLAY_TEXT" });
	$("myDiv").innerHTML=request.responseText;
	sprysuggest1 = new Spry.Widget.AutoSuggest("spryautosuggest1", "productMenu", "dsProducts1", "DISPLAY_TEXT");
        //it should be work after here. but doesn't work.
	
}
 
</script>
 
<script type="text/javascript">
	
</script>
</head>
<body>
<div id="myDiv">
</div>
<button onclick="getSuggestionDiv();">Get div for auto suggestion</button>
 
</body>
</html>

Open in new window

adobe-products-xml.txt
0
Comment
Question by:erenpasa
1 Comment
 

Accepted Solution

by:
erenpasa earned 0 total points
ID: 21778677
I've find my solution my own.
<?php
if (isset($_GET["progress"])){
        ?>
        <div id="spryautosuggest1">
          <input type="text" name="text1" id="text1" />
                        <div id="productMenu" spry:region="dsProducts1">
                                <div spry:repeat="dsProducts1" spry:suggest="{DISPLAY_TEXT}">
                                        <div>{DISPLAY_TEXT}</div>
                                </div>
                        </div>
        </div>  
        <?php
        exit();
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" />
<title>CRM</title>
<script src="/js/Spry_1_6_1_022408/widgets/autosuggest/SpryAutoSuggest.js" type="text/javascript"></script>
<script src="/js/Spry_1_6_1_022408/includes/xpath.js" type="text/javascript"></script>
<script src="/js/Spry_1_6_1_022408/includes/SpryData.js" type="text/javascript"></script>
<link href="/js/Spry_1_6_1_022408/widgets/autosuggest/SpryAutoSuggest.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/prototype.js"></script>
 
<script language="javascript">
var sprysuggest1;
var dsProducts1;
 
function getSuggestionDiv(){
        new Ajax.Request("a.php?progress=yes",{onComplete:getSuggestionDivComplete});
}
 
function getSuggestionDivComplete(request){
        dsProducts1 = new Spry.Data.XMLDataSet("adobe_products-xml.txt", "/FIELDS/FIELD", { sortOnLoad: "DISPLAY_TEXT" });
        $("myDiv").innerHTML=request.responseText;
        sprysuggest1 = new Spry.Widget.AutoSuggest("spryautosuggest1", "productMenu", "dsProducts1", "DISPLAY_TEXT");
        //it should be work after here. but doesn't work.
 
        Spry.Data.initRegions();//I've added this line for init html again.It works now.
}
 
</script>
 
<script type="text/javascript">
        
</script>
</head>
<body>
<div id="myDiv">
</div>
<button onclick="getSuggestionDiv();">Get div for auto suggestion</button>
 
</body>
</html>

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
MySQL limit and not so limited 13 41
What is the correct way to check for empty value in input field 2 19
Building JSON/JQuery Results Display 11 27
JSON decode 5 20
When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

733 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question