I am wondering if there is a service or solution to creating a website search that will allow me to have the results populate into a dropdown window below my search bar, rather than have to populate the results to a new page. Kind of like google's word prediction/suggestion, but rather than on-the-fly suggestions, I would like a new DIV to drop down with the results upon submission.
The website I am working on is at: http://www.conceptsuppliers.com/beta
I highly recommend using the jQuery Tokeninput plugin. I recently implemented this on a site for live searching functionality and it works perfectly.
The library provides options for styling every aspect of the search bar and dropdown results list.
Example:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tokeninput.js"></script>
<link rel="stylesheet" type="text/css" href="token-input.css" />
<script type="text/javascript">
$(document).ready(function () {
$("#searchbar").tokenInput("/url_to_your_search_endpoint");
});
</script>
The plugin can be found, along with documentation, here: http://loopj.com/jquery-tokeninput/
Related
I have a page that uses jQuery UI. Ideally I would like to use the google cached version if possible, but if that was unavailable I would like to fall back on a local version.
Is this possible? I have been hunting through the html <script> tag reference but cant find anything to do a check and fallback.
You can do something like this (while of course changing the URLs to suit your needs):
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>window.jQuery.ui || document.write('<script src="/libs/jquery-ui.js"><\/script>');</script>
This was answered before:
Best way to use Google's hosted jQuery, but fall back to my hosted library on Google fail
The same applies for jQueryUI ofcourse.
<script src="/path/to/external/jqueryui"></script>
<script>
if (!window.jQuery.ui) {
document.write('<script src="/path/to/local/jqueryui"><\/script>');
}
</script>
I got some issue in Google Map api in my project. I didn't handled anything related to this part and it was working fine before today.
But now, If i run the application, i got this popup msg and after that, the pages that are using google map api aren't working with this error.
I googled and followed this step.
1) https://code.google.com/apis/console/b/0/#project:40595208241:access
2) generate a new key
3) copy the new key to the index.htm inside key value
<script src="http://maps.google.com/maps?file=api&v=2.x&key=AIzaSyAJz86xjTce_oqnSTw8MoNaY-13tIx03XU" type="text/javascript"> </script>
<script type="text/javascript" src="extJS-ux/GMapPanel.js"></script>
<link href="extJS-ux/Ext.ux.grid.RowActions.css" rel="stylesheet" type="text/css" />
<script src="http://www.google.com/jsapi?key=AIzaSyAJz86xjTce_oqnSTw8MoNaY-13tIx03XU" type="text/javascript"></script>
<script type="text/javascript">
google.load('search', '1');
</script>
So i've followed this same step, but now it doesn't work anymore. It doesn't show the error msg anymore, but it doesn't also show up the result. It says no result and do nothing. It worked right yesterday!!
I tried to do some other ways, but there wasn't a good solution for this.
Can you help me with this?
You are using v=2.x (the "experimental version). That is not recommended for production sites. It might start working if you call for v=2 or v=2.s (the "stable" version), if this was a change in the API.
Note that you are using v2 of the Google Maps API which is deprecated and may stop working May 19, 2013; definitely not recommended for production sites.
I am using jquery tools tabs on a corporate site, to show the 5 company directors.
each director has a slide to themselves containing there photo, title, details etc.
however on teh page load... for about half a second, all of the tabs appear before organising themselves and the first slide is present.
is there anyway to make the tabs organise themselves instantly, or at least not appear until all the organising has gone on. I feel it may be a problem with how and where I am placing the scripts.
I am using html5 boilerplate and my scripts are near the bottom of the page.
here is my code (modernizr.js is being called in the header):
<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<script>
$(function() {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'slide',
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow();
});
</script>
<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
If I have some Mootools script, do I include the script in HTML like so?
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
window.addEvent("domready", function(){
$$('div.rj_insertcode a.glossarylink, .no_glossary a.glossarylink').each(function(el) {
new Element("span", {
html: el.get("html")
}).replaces(el);
});
});
</script>
</head>
I am using Joomla with "System - Mootools Upgrade" plugin enabled (so MT 1.2.4 is already included and ready to use).
I am using Joomla with "System - Mootools Upgrade" plugin enabled (so MT 1.2.4 is already included and ready to use).
if mootools is already included then your domready script block needs to be after the call to include mootools so its symbols and methods are defined.
typically:
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
window.addEvent("domready", function() {
// code here
});
</script>
if your script is unlikely to produce anything that relates to template variables you are outputting and you just work the DOM, then I'd suggest moving it to an external .js file instead.
Other best practices ATM seem to point to putting all js at the bottom so it's non-blocking and faster but this negates the point of domready as by the time you run the js all page elements are defined, it won't fire any earlier (you can reference dom already).
<script type="text/javascript" src="your-mootools-file.js"></script>
I am a real newbie in programming and now I have to combine Google Maps and Dojo. Both alone are fine but when I try to implement a Google Map into a Dojo content pane which is embedded in a border-container it simply does not work. I think there is a problem with the naming of the divs but perhaps there is something else to take care of?
Could someone post the simplest possible solution?
many thanks
I was able to figure it out myself.
Here is the answer:
Actually I was going to use ArcGIS Server Javascript extension for GoogleMaps and Dojo together. Thus we have to sure that all references to APIs are made correctly.
I think it is wise to use the Dojo components directly from the ArcGIS Server-API pages instead of loading from the DOJO network. This should guarantee the compatability between all components.
<!--Load Google Maps API -->
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA22G6YWIfghc6CfXo3jGlQBQIhNZriPAS64ZF0ztgQFnJUtUvlhSuBly8ueb8pLmxY8qzKANsSXJhUA" type="text/javascript"></script>
<!--load arcgis-javascript for googlemaps api -->
<script src="http://serverapi.arcgisonline.com/jsapi/gmaps/?v=1.4" type="text/javascript" ></script>
<!--load arcgis js api -->
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.4"></script>
<!--load the required Dojo components -->
<script type="text/javascript">
dojo.require("dojox.data.XmlStore");
dojo.require("dojox.grid.DataGrid");
<!--This loads the esri specific geoprocessing tool -->
dojo.require("esri.tasks.gp");
<!-- defining variables -->
var gmap = null;
var dynMapOv = null;
</script>
Then, after the initializing function is set up...
function initialize() {
//Load Google Maps
gmap = new GMap2(document.getElementById("gmap"));
var centerat = new GLatLng(-1, 23.7);
gmap.setCenter(centerat, 3); ...
... one has to ensure load the function with
dojo.addOnLoad(initialize);
Furthermore, it is important to put a reference to the the dojo-theme in the body tag of the HTML code.
<body class="soria" onunload="GUnload();">
I hope this very basic stuff helps someone who is not sure about how to combine AGS+GoogleMaps+Dojo.