• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 962
  • Last Modified:

Spry AutoSuggestion With Ajax

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
erenpasa
Asked:
erenpasa
1 Solution
 
erenpasaAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now