asked on

bootstrapper typeahead fail

greetings,
I am having difficulty getting the typeahead function to run in bootstrapper...
I have all of the necessary files, but I am receiving a "cannot read property of length" errors on the
typeahead.process(data.data);
line

I do get a proper response from the ajax, so I don't know what's up....
where do I look?
Thanks.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Recruiter Profile</title>
	<meta name="viewport" content="width=device-width">
	<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
	<link href="http://localhost/laravel/css/style.css" media="all" type="text/css" rel="stylesheet">
	<link href="http://localhost/bundles/bootstrapper/css/bootstrap.min.css" media="all" type="text/css" rel="stylesheet">
<link href="http://localhost/bundles/bootstrapper/css/nav-fix.css" media="all" type="text/css" rel="stylesheet">
<link href="http://localhost/bundles/bootstrapper/css/bootstrap-responsive.min.css" media="all" type="text/css" rel="stylesheet">
	<script src="http://localhost/bundles/bootstrapper/js/jquery-1.8.1.min.js"></script>
<script src="http://localhost/bundles/bootstrapper/js/bootstrap.min.js"></script>
<script src="http://localhost/bundles/bootstrapper/js/bootstrap-ajax.js"></script>
	<script src="http://localhost/bundles/ckeditor/ckeditor/ckeditor.js"></script>
<script src="http://localhost/js/html5slider.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

	$(document).ready(function () {

	    if ( jQuery().typeahead ) {
	        $('.typeahead').typeahead({
	            source : function(typeahead, query){
	                    $.ajax({
	                        url      : '/hospital/typeahead',
	                        type     : 'POST',
	                        data     : { query : query, column : 'name' },
	                        dataType : 'json',
	                        async    : true,
	                        success  : function(data) {
	                            typeahead.process(data.data);
	                        }
	                    });
	            }
	        });
	    }

		$('#myTab a[href="'+ window.location.hash +'"]').tab('show');
		$('#profilefrm :checkbox').hide();
		$('.close').click(function(){
			$('#ProfilePic').modal('hide');
		})

		$('#myTab a').click(function (e) {
		  e.preventDefault();
		  $(this).tab('show');
		})

		$('.region').click( function(){
			if ($(this).hasClass('active')){
				$(this).removeClass('btn-primary');
				$(this).children('i').removeClass('icon-ok icon-white').addClass('icon-ban-circle');
				$(this).next('input').prop('checked', false);
			}
			else
			{
				$(this).addClass('btn-primary');
				$(this).children('i').removeClass('icon-ban-circle').addClass('icon-ok icon-white');
				$(this).next('input').prop('checked', true);
			}
		});
	});
</script>
</head>
<body>
	<div class="navbar navbar-inverse navbar-fixed-top">
	    <div class="navbar-inner">   
			<ul class="nav">
			  <li class="active"><a href="http://localhost/">Home</a></li>
			  			  <li><a href="http://localhost/search">Hospital Search</a></li>
			   			   			   			  <li class="dropdown">
			    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Recruiter<b class="caret"></b></a>
			    <ul class="dropdown-menu">
			      <li><a href="http://localhost/recruiter/staff">Staff</a></li>
			    </ul>
			  </li>
			  			  			  			</ul>
			<div>
				<ul class="nav pull-right">
																		<li><a href="messages"><span class="badge">0</span> Inbox</a></li>
											<li><a href="http://localhost/logout">logout</a></li>
									</ul>
			</div>
	    </div>
    </div>
		<form id="profilefrm" method="POST" action="http://localhost/physician/update" accept-charset="UTF-8"><input type="hidden" name="_method" value="PUT"><input type="hidden" name="csrf_token" value="PP0qIrcwBydI6OgMnb3gTsBRvKHNhV9uytXSC83c"><input type="hidden" name="id" value="5"><div class="row-fluid span8 offset2">
<ul class="nav nav-tabs" style="width:900px;" id="myTab">
  <li class="active"><a href="#home">Basic Information</a></li>
      <li class="dropdown">
    <a class="dropdown-toggle"
       data-toggle="dropdown"
       href="#">
        Representation
        <b class="caret"></b>
      </a>
    <ul class="dropdown-menu">
      <!-- links -->
      <li><a href="#Coverage">Coverage</a></li>
      <li><a href="#prosumstmt">Professional Summary Statement</a></li>
    </ul>
  </li>
  <li><a href="#settings">Settings</a></li>
  <li class="pull-right"><input class="psubmit btn btn-primary" type="submit" value="Update Profile"></li>
</ul>
<div class="tab-content">
	<div class="tab-pane active" id="home">
		<div class="row-fluid">
			<div class="span3 well" align="center">
									<img src="http://localhost/files/default/profile.jpg" width="240px" height="240px" alt="my profile">				
				<p style="margin-top:15px;"><a id="newpic" href="#ProfilePic" role="button" align="center" class="btn" data-toggle="modal">Upload a Profile Picture</a></p>
			</div>
			<div class="span5">
				<div>
					<p>Name: <br /><input type="text" name="first_name" value="iam"> <input type="text" name="last_name" value="manager"></p>
					<address>
						Address:<br />
						<input class="input-xlarge" type="text" name="address" value=""> <br />
						<input type="text" name="city" value="">, <input class="input-small" type="text" name="state"> <input class="input-small" type="text" name="zip" value=""> <br />
					</address>
					Phone:<br /> <input type="text" name="phone" value="">				</div>
			</div>
		</div>
		<div class="row-fluid">
			<hr class="span8" />
		</div>
		<div class="row-fluid">
			<div class="span4">
				profile link:  http://localhost/physician/ <input type="text" name="alias" value="man123"><br />
				facebook link:  http://localhost/physician/ <input type="text" name="facebook"><br />
				website link:  http://localhost/physician/ <input type="text" name="website"><br />
			</div>
		</div>
	</div>
	<div class="tab-pane" id="Coverage">
		<div class="span3">
			<p>Select the regions to Advertise</p>
			<p>
				<button type="button" class="region btn  " data-toggle="button"><i class="icon-ban-circle"></i> East Coast</button>
				<input type="checkbox" name="EC" value="1">			</p>
			<p>
				<button type="button" class="region btn  " data-toggle="button"><i class="icon-ban-circle"></i> South</button>
				<input type="checkbox" name="South" value="1">			</p>
			<p>
				<button type="button" class="region btn  " data-toggle="button"><i class="icon-ban-circle"></i> New England</button>
				<input type="checkbox" name="NE" value="1">			</p>
			<p>
				<button type="button" class="region btn  " data-toggle="button"><i class="icon-ban-circle"></i> Midwest</button>
				<input type="checkbox" name="MW" value="1">			</p>
			<p>
				<button type="button" class="region btn  " data-toggle="button"><i class="icon-ban-circle"></i> Southern Border States</button>
				<input type="checkbox" name="SBS" value="1">			</p>
			<p>
				<button type="button" class="region btn  " data-toggle="button"><i class="icon-ban-circle"></i> West Coast</button>
				<input type="checkbox" name="WC" value="1">			</p>
			<p>
				<button type="button" class="region btn  " data-toggle="button"><i class="icon-ban-circle"></i> Pacific North West</button>
				<input type="checkbox" name="PNW" value="1">			</p>
		</div>
		<div class="span4">
			<P>Your Hot Pick Hospitals</P>
			<input class="typeahead" data-page="http://localhost/hospital/typeahead" type="text" name="hosp1"><br />
		</div>
	</div>
	<div class="tab-pane" id="prosumstmt">
		<div class="row-fluid">
			<div class="span8">
				<strong>Professional Summary Statement</strong><br />
				<form method="post">
					<textarea name="prostmt" rows="8" cols="60">this is a test</textarea>
<script type="text/javascript">//<![CDATA[
window.CKEDITOR_BASEPATH='C:/wamp/www/hospital/bundles/ckeditor/';
//]]></script>
<script type="text/javascript" src="C:/wamp/www/hospital/bundles/ckeditor/ckeditor.js?t=C9A85WF"></script>
<script type="text/javascript">//<![CDATA[
CKEDITOR.replace('prostmt');
//]]></script>
			
			</form>
			</div>
		</div>
	</div>
</form>	<div class="tab-pane" id="settings">
		<form method="POST" action="http://localhost/phsycian/update" accept-charset="UTF-8">		<input type="hidden" name="csrf_token" value="PP0qIrcwBydI6OgMnb3gTsBRvKHNhV9uytXSC83c">				Change Password Here.

				Delete Account
		</form>	</div>
</div>

<div id="ProfilePic" class="profile modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Update My Profile Pic" aria-hidden="true">
  	<form enctype="multipart/form-data" method="POST" action="http://localhost/physician/pic" accept-charset="UTF-8">  	<input type="hidden" name="csrf_token" value="PP0qIrcwBydI6OgMnb3gTsBRvKHNhV9uytXSC83c">  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Update my profile picture</h3>
  </div>
  <div class="modal-body">
    <p>  
    	<p>Please ensure pictures are 240px by 240px.  Any other size will be rejected.</p>
    	<input type="file" name="pic">    	<input type="hidden" name="URL2" value="test">    	<input type="hidden" name="URL" value="http://localhost/recruiter/man123/edit">	</p>
  </div>
  	  <div class="modal-footer">
	    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
	    <button class="btn btn-primary">Save changes</button>
	  </div>
	</form>	  
 </div>

	</body>
</html>

Open in new window

Scott Fell

$(document).ready(function () {

if ( jQuery().typeahead ) {
	        $('.typeahead').typeahead({
	            source : function(typeahead, query){
	                    $.ajax({
	                        url      : '/hospital/typeahead',
	                        type     : 'POST',
	                        data     : { query : query, column : 'name' },
	                        dataType : 'json',
	                        async    : true,
	                        success  : function(data) {
	                            typeahead.process(data.data);
	                        }
	                    });
	            }
	        });
	    }

		$('#myTab a[href="'+ window.location.hash +'"]').tab('show');
		$('#profilefrm :checkbox').hide();
		$('.close').click(function(){
			$('#ProfilePic').modal('hide');
		});

		$('#myTab a').click(function (e) {
		  e.preventDefault();
		  $(this).tab('show');
		})];

		$('.region').click( function(){
			if ($(this).hasClass('active')){
				$(this).removeClass('btn-primary');
				$(this).children('i').removeClass('icon-ok icon-white').addClass('icon-ban-circle');
				$(this).next('input').prop('checked', false);
			}
			else
			{
				$(this).addClass('btn-primary');
				$(this).children('i').removeClass('icon-ban-circle').addClass('icon-ok icon-white');
				$(this).next('input').prop('checked', true);
			}
		});
	});

Open in new window

Evan Cutler

ASKER

sorry padas...I'm not seeing the change...no change in error...
what am I looking for?

Thanks
Evan

Scott Fell

I have used bootstrap but not typeahead. Perhaps typeahead.process(data.data); should be, return typeahead.process(data); or just typeahead.process(data);

ASKER CERTIFIED SOLUTION

Evan Cutler

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Evan Cutler

ASKER

This worked as a charm.

No worries.
Thanks much anyways.