I have included this:
<link rel="stylesheet" href= "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="/js/bootstrap3-typeahead.js"></script>
then there is input:
<input type="text" name="name" autocomplete="off" class="typeahead" data-provide="typeahead"
data-items="4" data-source="['aaa','bbb','ccc']" placeholder="Find customer" />
Nothing happens. No error, no suggested items. Why is that? How could I fix it?
I downloaded bootstrap3-typeahead.js form there: https://github.com/bassjobsen/Bootstrap-3-Typeahead
Use jQuery "autocomplete" instead: http://jqueryui.com/autocomplete/
Related
I have an input field which will accept tags. Once I am done with those tag additions, how can I get the values out to save it to my database?
I am using the tagManager library to make this tag addition easily.
$(".tm-input").tagsManager();
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>
<input type="text" name="tags" placeholder="Type the subsystem name and press enter" class="form-control tm-input tm-input-info" autocomplete="off" />
http://jsfiddle.net/0y7a5kfu/2/
According to the documentation you can use tagsManager('tags') to retrieve the input:
$('.tm-input').tagsManager();
$('button').click(function() {
console.log($('.tm-input').tagsManager('tags'))
})
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tagmanager/3.0.2/tagmanager.min.js"></script>
<input type="text" name="tags" placeholder="Type the subsystem name and press enter" class="form-control tm-input tm-input-info" autocomplete="off" />
<button>Get</button>
i am trying to integrate the google api i have found some codes for that
API Script
<!-- Dependencies: JQuery and GMaps API should be loaded first -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- CSS and JS for our code -->
<link rel="stylesheet" type="text/css" href="css/jquery-gmaps-latlon-picker.css"/>
<script src="js/jquery-gmaps-latlon-picker.js"></script>
html code
<fieldset class="gllpLatlonPicker">
<input type="text" class="gllpSearchField">
<input type="button" class="gllpSearchButton" value="Search">
<br/><br/>
<div class="gllpMap">Google Maps</div>
<br/>
lat/lon:
<input type="text" name="gllpLatitude" class="gllpLatitude" value="30.44867367928756"/>
/
<input type="text" name="gllpLatitude" class="gllpLongitude" value="70.6640625"/>
zoom: <input type="text" name="gllpZoom" class="gllpZoom" value="4"/>
<input type="button" class="gllpUpdateButton" value="update map">
<br/>
</fieldset>
this code working fine separately but when i integrate in my application it
shows me that error
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
In the above script the tag sensor is not required in "src" instead of that please provide a googlemapapi key, it will work!!
eg:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=paste your key here"></script>
Get your key:
https://developers.google.com/maps/documentation/javascript/get-api-key#key
Thanks!!!
There is a version problem of library and JQuery mobile UI
I want to add a value to a radio button group by a click button.
Took the test at : http://jsfiddle.net/BUBtL/4/
Thanks in advance
<link rel="stylesheet" href="themes/theme-brixky.min.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<fieldset data-role="controlgroup" id="field_radio_amis">
<legend></legend>
<label for="cat">Cat</label>
<input type="radio" name="radio_animal" id="cat" class="custom" value="cat" />
<label for="dog">Dog</label>
<input type="radio" name="radio_animal" id="dog" class="custom" value="dog" />
</fieldset>
<input type="button" name="btn_go" id="btn_go" value="Click to set button radio" />
</div>
$(document).ready(function () {
$("#btn_go").click(function () {
$('input:radio[name="radio_animal"]').filter('[value="cat"]').attr('checked', true);
});
return false;
});
This is a compatibility issue, you're using the wrong versions combination.
You need jQuery Mobile 1.4.0 and it's corresponding CSS file to work with jQuery 1.10.1
Change .attr to .prop
$('input:radio[name="radio_animal"]').filter('[value="cat"]').prop('checked', true);
Check jsfiddle
oups !
See my combinaison :
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
Why is this jquery image watermarking plugin not working? I am using the code from the official plugin website.. from here When i see the source code of the demo website they have used js/jquery-watermarker-0.3.js. but i cannot find this plugin online anywhere? how come this works for them in the demo. Please help.
<html>
<head>
<script type="text/javascript" src="js/jquery.js">
<script type="text/javascript" src="js/jquery-1.4.2.min.js">
<script type="text/javascript" src="js/jquery-ui-1.8.6.custom.min.js">
<script type="text/javascript" src="js/jquery-watermarker-0.2.js">
<script type="text/javascript">
$().ready(function(){
$('#watermarked').Watermarker({
watermark_img: "a.png",
onChange: showCoords
});
});
function showCoords(c)
{
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
};
</script>
<style type="text/css">
div.watermark
{
border:1px dashed #000;
}
img.watermark:hover{
cursor:move;
}
</style>
</head>
<body>
<img src="1.jpg" id="watermarked" />
<form method="post" action="phpScriptToMergeBothImage.php">
<input type="text" id="x" name="x" value="" />
<input type="text" id="y" name="y" value="" />
<input type="text" id="w" name="w" value="" />
<input type="text" id="h" name="h" value="" />
<input type="submit" name="save" value="Ok >" />
</form>
</body>
</html>
Make sure you've downloaded the plugin from the site (here) and included the scripts in your file. In the code you supplied above, it looks like you should have a folder called 'js' that contains 'jquery.js', 'jquery-1.4.2.min.js', 'jquery-ui-1.8.6.custom.min.js' and 'jquery-watermarker-0.2.js'. If this is true, the plug-in is loaded.
Next, make sure that you also have the images '1.jpg' and 'a.png' in your root folder, where '1.jpg' is the background image and 'a.png' is the image you want the watermark to be. If they don't have those names, change the names in the plug-in code to match the name of the images that you're working with.
Your first line should either be $(function) or $(document).ready(function):
$(document).ready(function(){
$('#watermarked').Watermarker({
watermark_img: "a.png",
onChange: showCoords
});
});
$() Used to return a jQuery collection containing document in 1.3.x but this was changed in 1.4 to return an empty collection.
Also, your script tags need to be closed </script>
A nice watermark plugin can be found here.
Simply call it using the following:
<script type="text/javascript">
$(document).ready(function () {
$("#textbox1").WaterMark({
waterMarkText: "Watermark text"
});
});
</script>
<input type="text" id="textbox1" name="textbox1" />
There is also an example for use with textareas there too.
I cannot figure out why this isn't working. It's a JQuery search box that uses the Freebase API to find games. When I POST, the gameID and gameName are blank.
<link type="text/css" rel="stylesheet" href="http://freebaselibs.com/static/suggest/1.3/suggest.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://freebaselibs.com/static/suggest/1.3/suggest.min.js"></script>
<script type="text/javascript">
$(function() {
$("#game-search").suggest({type:'/games/game'}).bind("fbSelect", function(e, data) {
$("#game-id").val(data.id);
$("#game-name").val(data.name);
});
});
</script>
<form name="input" action="/game-profile" method="post">
<input class="search-box" name="fbSelect" type="text" id="game-search"/>
<input type="hidden" name="gameID" id="game-id" />
<input type="hidden" name="gameName" id="game-name" />
<input class="button" value="Go" type="submit"/>
</form>
I grabbed your code and changed the hidden fields to type="text" just so I could see the data when a selection was made from the auto-complete. The fields weren't being populated on select, so I took a quick peek at the API.
It looks like the event you should be binding to is fb-select rather than fbSelect a la:
$(function() {
$("#game-search").suggest({type:'/games/game'}).bind("fb-select", function(e, data) {
$("#game-id").val(data.id);
$("#game-name").val(data.name);
});
});
It doesn't look like the fbSelect event you're binding to, ever gets fired. Have you included all required code parts for this to work?
(Answered retrospectively via comment on original question. #borkweb is more correct.)