PDA

View Full Version : Autocomplete function within Ajaxtab div container doesn't work



jeroen75
08-24-2009, 09:53 AM
1) Script Title: Ajax Tabs Content script v2.0 and Ajax Auto Suggest v.2.1.3

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/index.htm


3) Describe problem: it is not possible to use the autocomplete function within the tab container. When I place it outside the div container there is no issue.

<html>
<head>
<title>Test</title>
</head>
<body>
<script type="text/javascript" src="/intranet/newtab/ajaxtabs/ajaxtabs.js"></script>
<link rel="stylesheet" type="text/css" href="/intranet/newtab/ajaxtabs/ajaxtabs.css" />
<script type="text/javascript" src="/intranet/debiteuren/functie/bsn.AutoSuggest_2.1.3_groot.js" charset="utf-8"></script>
<link rel="stylesheet" href="/intranet/stylegids/autosuggest_papier.css" type="text/css" media="screen" charset="utf-8" />
<ul id="countrytabs" class="shadetabs">
<li><a href="#" class="selected" rel="#default">Tab 1</a></li>
<li><a href="test.html" rel="countrycontainer">Tab 2</a></li>
<li><a href="external3.htm" rel="countrycontainer">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>
<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<!--include autosuggest form -->
<form id="form1" name="form1" method="get" action="#" class="asholder">
<label for="ribname">Search Ribs:</label>
<input name="search" type="text" id="search" size="55" />
<input name="testid" type="hidden" id="testid" value="" />
<input type="submit" class="search_button" value="GO" />
</form>
<script type="text/javascript">
var options_xml = {
script: function (input) { return "/intranet/debiteuren/functie/data_suggest/data_kleur.asp?input="+input+"&testid="+document.getElementById('testid').value; },
callback: function (obj) { document.getElementById('testid').value = document.getElementById('testid').value + obj.id; },
varname:"input"
};
var as_xml = new bsn.AutoSuggest('search', options_xml);
</script>
<!--end autosuggest form -->
</div>
<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</body>
</html>