In this jsBin file an alert (which just displays 'fired') is called three times.
It should be just called once since its just added to :
.data( "autocomplete" )._renderItem = function( ul, item ) {
Here is the bin file :
http://jsbin.com/welcome/55641/edit
How can the code be amended so that the alert is just fired once ?
The entire code :
<!doctype html>
<html lang="en">
<head>
<style type="text/css">
fieldset {width: 60%; margin: 0 auto;}
div.row {clear: both;}
div.row label {float: left; width: 60%;}
div.row span {float: right; width: 35%;}
</style>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Custom data and display</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#project-label {
display: block;
font-weight: bold;
margin-bottom: 1em;
}
#project-icon {
float: left;
height: 32px;
width: 32px;
}
#project-description {
margin: 0;
padding: 0;
}
</style>
<script>
$(function() {
var projects = [
{
value: "jquery",
label: "jQuery",
desc: "the write less, do more, JavaScript library",
icon: "jquery_32x32.png"
},
{
value: "jquery-ui",
label: "jQuery UI",
desc: "the official user interface library for jQuery",
icon: "jqueryui_32x32.png"
},
{
value: "sizzlejs",
label: "Sizzle JS",
desc: "a pure-JavaScript CSS selector engine",
icon: "sizzlejs_32x32.png"
}
];
$( "#project" ).autocomplete({
minLength: 0,
source: projects,
focus: function( event, ui ) {
$( "#project" ).val( ui.item.label );
return false;
},
select: function( event, ui ) {
$( "#project" ).val( ui.item.label );
$( "#project-id" ).val( ui.item.value );
$( "#project-description" ).html( ui.item.desc );
$( "#project-icon" ).attr( "src", "images/" + ui.item.icon );
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
alert('fired');
return $("#suggestionsDiv").append("<div class='row'> <label for='first-field'>The first field</label><span><input type=text id='first-field' size='15' /></span></div>");
};
});
</script>
</head>
<body>
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="" />
<input id="project" />
<input type="hidden" id="project-id" />
<p id="project-description"></p>
<fieldset>
<legend>Suggestions</legend>
<div id ="suggestionsDiv">
<div class="row">
<label for="first-field">The first field</label>
<span><input type="text" id="first-field" size="15" /></span>
</div>
<div class="row">
<label for="second-field">The second field with a longer label</label>
<span><input type="text" id="second-field" size="10" /></span>
</div>
<div class="row">
<label for="third-field">The third field</label>
<span><input type="text" id="third-field" size="5" /></span>
</div>
</div>
</fieldset>
</body>
</html>
When you type j in the field as suggested, three items are returned. For each item, the _renderItem method is being called to render each item, resulting in three alerts. It is working as intended.
Related
I'm trying to use the jQuery Selectmenu to add images to a dropdown in my Angular project. The following html file adapted from the example works fine on it's own when ran in the browser:
<!doctype html>
<html lang="en">
<head>
<!-- <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Selectmenu - Custom Rendering</title>-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", { text: item.label } );
if ( item.disabled ) {
li.addClass( "ui-state-disabled" );
}
$( "<span>", {
style: item.element.attr( "data-style" ),
"class": "ui-icon " + item.element.attr( "data-class" )
})
.appendTo( wrapper );
return li.append( wrapper ).appendTo( ul );
}
});
$( "#people" )
.iconselectmenu()
.iconselectmenu( "menuWidget")
.addClass( "ui-menu-icons avatar" );
} );
</script>
</head>
<body>
<h2>Selectmenu with custom avatar 16x16 images as CSS background</h2>
<fieldset>
<label for="people">Select a Person:</label>
<select name="people" id="people">
<option value="1" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/b3e04a46e85ad3e165d66f5d927eb609?d=monsterid&r=g&s=16');">John Resig</option>
<option value="2" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/e42b1e5c7cfd2be0933e696e292a4d5f?d=monsterid&r=g&s=16');">Tauren Mills</option>
<option value="3" data-class="avatar" data-style="background-image: url('http://www.gravatar.com/avatar/bdeaec11dd663f26fa58ced0eb7facc8?d=monsterid&r=g&s=16');">Jane Doe</option>
</select>
</fieldset>
</body>
I see this:
However, when I add it to my Angular project I just see a plain dropdown with no images:
EDIT:
I think I forgot to clear the cache. I see something:
Perhaps it's a styling issue.
My Controller:
Fasttrack.controller('TasksCtrl', function ($scope, TasksService, TimetrackService, Salesmen, SweetAlert,
SelectedUser, HoursService, $http, $filter, Salescalls) {
$( function() {
$.widget( "custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function( ul, item ) {
var li = $( "<li>" ),
wrapper = $( "<div>", { text: item.label } );
if ( item.disabled ) {
li.addClass( "ui-state-disabled" );
}
$( "<span>", {
style: item.element.attr( "data-style" ),
"class": "ui-icon " + item.element.attr( "data-class" )
})
.appendTo( wrapper );
return li.append( wrapper ).appendTo( ul );
}
});
$( "#people" )
.iconselectmenu()
.iconselectmenu( "menuWidget")
.addClass( "ui-menu-icons avatar" );
} );
etc.......
No resources are missing. Can anybody tell me what I'm doing wrong?
I am more versed in PHP but I have to code a loan calculator using javascript and jquery ui.
I have 3 sliders, here the code of one of them:
$('#amountSlider').slider({
range: "min",
value: 37,
min: 1000,
max: 20000,
slide: function( event, ui ){
$("#amount").val( "$" + ui.value );
}
});
$("#amount").val("$" + $("#amountSlider").slider("value"));
HTML where the values are output:
<input type="text" name="amount" id="amount"><br>
<input type="text" name="rate" id="rate"><br>
<input type="text" name="term" id="term"><br>
<input type="text" name="calcTotal" id="calcTotal"/>
The sliders work fine and show the value in the text box but I can't seem to access the values outside the sliders to add them all into a total calculation text box.
Example:
Slider 1 value : 50
Slider 2 value: 3
Slider 3 value: 5.5
I'd like to be able to say : calcTotal = slider1.val + slider2.val + slider3.val and that the value is always updating as i drag the slider.
A live example I found is the homepage calculator at : http://blinkfinance.com.au/
Appreciate your help, thank you.
Call a function, which accesses the other values and sum them there up.
Of course you could then split this all up in a service, cache the elements etc. but you get the idea.
$( function() {
var output = $('#output');
$( "#slider1" ).slider({
slide: function( event, ui ) {
output.text( getAllValues() );
}
});
$( "#slider2" ).slider({
slide: function( event, ui ) {
output.text( getAllValues() );
}
});
$( "#slider3" ).slider({
slide: function( event, ui ) {
output.text( getAllValues() );
}
});
function getAllValues() {
return getValue("1") + getValue("2") + getValue("3");
}
function getValue(id) {
return $("#slider" + id).slider("value");
}
});
#import url(http://fonts.googleapis.com/css?family=Lato:400,700);
body {
background-color: #f0f0f0;
color: #333;
font-family: Lato, Helvetica, Arial, sans-serif;
margin: 25px;
}
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="slider1"></div>
<br>
<div id="slider2"></div>
<br>
<div id="slider3"></div>
<br><br>
<div id="output">Drag..</div>
Here is the entire test code.
In the end I will have numerous sliders and input fields with different IDs (no pattern) so I want to use $this or pass vars rather than having a bunch of repeated code.
There will be 3 max-values of the sliders: 5, 10, 15
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/jquery-ui.css" type="text/css" media="all" />
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script>
$(function() {
$( "#slider1" ).slider({
value:0, min: 0, max: 5, step: 1,
slide: function( event, ui ) {
$( "#amount1" ).val( ui.value );
}
});
$( "#amount1" ).val( $( "#slider1" ).slider( "value" ) );
$( "#slider2" ).slider({
value:0, min: 0, max: 10, step: 1,
slide: function( event, ui ) {
$( "#amount2" ).val( ui.value );
}
});
$( "#amount2" ).val( $( "#slider2" ).slider( "value" ) );
$( "#slider3" ).slider({
value:0, min: 0, max: 15, step: 1,
slide: function( event, ui ) {
$( "#amount3" ).val( ui.value );
}
});
$( "#amount3" ).val( $( "#slider3" ).slider( "value" ) );
});
</script>
<style>
.steps {
border: 1px solid transparent;
position: relative;
height: 30px;
}
.tick {
border: 1px solid transparent;
position: absolute;
width: 1.2em;
margin-left: -.6em;
text-align:center;
left: 0;
}
.ui-slider .ui-slider-handle {
width: 2em;
height: 3em;
top: -1.4em;
margin-left: -1em;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 2px solid #d3d3d3;
background: #333;
}
</style>
</head>
<body style="font-size: small;">
<div style="display:block;margin:100px auto;padding:0 8%">
<input type="text" id="amount1" style="border:0 none">
<div id="slider1"></div>
<div class="steps">
<?php
for ($i=0, $t=5; $i<=$t; $i++) {
echo '<span class="tick" style="left:'.(100/$t*$i).'%;';
if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;';
echo '">|<br>'.$i.'</span>';
}
?>
</div>
</div>
<div style="display:block;margin:100px auto;padding:0 8%">
<input type="text" id="amount2" style="border:0 none">
<div id="slider2"></div>
<div class="steps">
<?php
for ($i=0, $t=10; $i<=$t; $i++) {
echo '<span class="tick" style="left:'.(100/$t*$i).'%;';
if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;';
echo '">|<br>'.$i.'</span>';
}
?>
</div>
</div>
<div style="display:block;margin:100px auto;padding:0 8%">
<input type="text" id="amount3" style="border:0 none">
<div id="slider3"></div>
<div class="steps">
<?php
for ($i=0, $t=15; $i<=$t ; $i++) {
echo '<span class="tick" style="left:'.(100/$t*$i).'%;';
if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;';
echo '">|<br>'.$i.'</span>';
}
?>
</div>
</div>
</body>
</html>
You should give your sliders data attributes to hold slider values, min and max values, etc., and a distinct class and then init slider on them. An example would be:
<div style="display:block;margin:100px auto;padding:0 8%">
<input type="text" id="amount3" style="border:0 none" class="slider_value">
<div id="slider3" class="slider_container" data-value="0" data-min="0" data-max="15" data-steps="1"></div>
<div class="steps">
<?php
for ($i=0, $t=15; $i<=$t ; $i++) {
echo '<span class="tick" style="left:'.(100/$t*$i).'%;';
if ($i==ceil($t/2)) echo 'font-weight:bold;font-size:medium;';
echo '">|<br>'.$i.'</span>';
}
?>
</div>
</div>
And then:
$(function(){
var value, step, min, max, input;
$('.slider_container').each(function(){
input = $(this).prev('.slider_value');
value = $(this).data('value');
step = $(this).data('steps');
min = $(this).data('min');
max = $(this).data('max');
$(this).slider({
value: value,
min: min,
max: max,
step: step,
slide: function(event, ui) {
$(this).prev('.slider_value').val(ui.value);
}
});
input.val($(this).slider("value"));
});
});
I think a loop would reduce duplicate code:
var numElements = 3;
for (var i = 0; i < numElements; i++) {
var $slider = $('#slider'+i);
var $amount = $('#amount'+i);
$slider.slider({
value:0, min: 0, max: 5, step: 1,
slide: function( event, ui ) {
$amount.val( ui.value );
}
});
$amount.val( $slider.slider( "value" ) );
}
Here is what I have now...
$("#contact").click(function() {
if ( $( "#contact_div" ).length ) {
$("#contact_div").remove();
} else {
var html='<div id="contact_div" class="contact-info"><p>Contact info</p></div>';
$('body').append(html);
}
});
$("#submission").click(function() {
if ( $( "#submission_div" ).length ) {
$("#submission_div").remove();
} else {
var html='<div id="submission_div" class="submission-methods"><p>submission methods</p></div>';
$('body').append(html);
}
});
$("#database").click(function() {
if ( $( "#database_div" ).length ) {
$("#database_div").remove();
} else {
var html='';
$('body').append(html);
}
});
$("#frequent").click(function() {
if ( $( "#frequent_div" ).length ) {
$("#frequent_div").remove();
} else {
var html='<div id="frequent_div" class="Freqeuent kick-codes"><p>frequent kick codes</p></div>';
$('body').append(html);
}
});
#charset "utf-8";
/* CSS Document */
body {
padding: 0px;
margin: 0px;
background-image: url("images/mark-athena-2.png");
background-color: #d4d4d4;
}
a {
text-decoration: none;
font-family: "blessed-facit-semibold", "arial Black", Arial;
color: #999999;
font-size: 12px;
padding: 14px;
}
nav {
background-color: #514a79;
height: 25px;
}
a:hover {
color:#e3e3f2;
}
/* color for link= #e3e3f2 */
div {
height: 100px;
width 150px;
border: solid 1px;
margin: 20px;
overflow: hidden;
background-color: #e6e6e6;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script type="text/javascript" src="js/cont.js"></script>
</head>
<body>
<nav>
Home
<a id="contact" href="#">Contact info</a>
<a id="submission" href="#">Submission methods</a>
<a id="database" href="#">Data base</a>
<a id="frequent" href="#">Frequent kick codes</a>
</nav>
<div id="contact_div" class="contact-info">
<p>Contact info</p>
</div>
<div id="submission_div" class="submission-methods">
<p>submission methods</p>
</div>
<div id="frequent_div" class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>
Okay So when I click "Contact Info" on the Nav bar I want the "contact info div" to display or disappear or toggle... same for Submission methods, Data base, and Frequent kick codes. the divs should be able to be toggled to display information inside, and stay displayed until toggled off by the button that toggled them on...
So here is my HTML Code i have created for this project...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
</head>
<body>
<nav>
Home
Contact info
Submission methods
Data base
Frequent kick codes
</nav>
<div class="contact-info">
<p>Contact info</p>
</div>
<div class="submission-methods">
<p>submission methods</p>
</div>
<div class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>
And here is my css
#charset "utf-8";
/* CSS Document */
body {
padding: 0px;
margin: 0px;
background-color: #d4d4d4;
}
a {
text-decoration: none;
font-family: "blessed-facit-semibold", "arial Black", Arial;
color: #999999;
font-size: 12px;
padding: 14px;
}
nav {
background-color: #514a79;
height: 25px;
}
a:hover {
color:#e3e3f2;
}
/* color for link= #e3e3f2 */
div {
height: 100px;
width 150px;
border: solid 1px;
margin: 20px;
overflow: hidden;
background-color: #e6e6e6;
}
You could use jQuery .toggle function, documentation and samples are available here.
You can give an 'id' to the individual navigation anchors, and associate a click event that with jQuery will toggle the div you want. I'd use id in all of them, but you can surely work with class too.
The sample code becomes some like:
<body>
<nav>
Home
<a id="contact" href="#">Contact info</a>
<a id="submission" href="#">Submission methods</a>
<a id="database" href="#">Data base</a>
<a id="frequent" href="#">Frequent kick codes</a>
</nav>
<div id="contact_div" class="contact-info">
<p>Contact info</p>
</div>
<div id="submission_div" class="submission-methods">
<p>submission methods</p>
</div>
<div id="frequent_div" class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
The jQuery/javascript code looks like:
$("#contact").click(function(){
$("#contact_div").toggle();
});
$("#submission").click(function(){
$("#submission_div").toggle();
});
$("#database").click(function(){
$("#database_div").toggle();
});
$("#frequent").click(function(){
$("#frequent_div").toggle();
});
Two notes:
1. the database section is missing in the original post
2. you need to include the jQuery on the page, either you
load it locally on your server, or include it via CDN, like:
<script src="https://code.jquery.com/jquery-2.2.0.js"></script>
For the second request on this, the code blocks would to be added/removed based on clicks. The jQuery method change, and for the full working solution you also need to correctly both import jquery, source the javascript code, and have an document.ready handler that will actually initialize the elements. The code looks like this (css remains unchanged).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Accelorator</title>
<link rel="stylesheet" href="CSS/accel-stylesheet.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.js"></script>
<script type="text/javascript" src="js/cont.js"></script>
<script>
$( document ).ready(function() {
initialize();
});
</script>
</head>
<body>
<nav>
Home
<a id="contact" href="#">Contact info</a>
<a id="submission" href="#">Submission methods</a>
<a id="database" href="#">Data base</a>
<a id="frequent" href="#">Frequent kick codes</a>
</nav>
<div id="contact_div" class="contact-info">
<p>Contact info</p>
</div>
<div id="submission_div" class="submission-methods">
<p>submission methods</p>
</div>
<div id="frequent_div" class="Freqeuent kick-codes">
<p>frequent kick codes</p>
</div>
</body>
</html>
with the js/cont.js as:
function initialize() {
$("#contact").click(function() {
if ( $( "#contact_div" ).length ) {
$("#contact_div").remove();
} else {
var html='<div id="contact_div" class="contact-info"><p>Contact info</p></div>';
$('body').append(html);
}
});
$("#submission").click(function() {
if ( $( "#submission_div" ).length ) {
$("#submission_div").remove();
} else {
var html='<div id="submission_div" class="submission-methods"><p>submission methods</p></div>';
$('body').append(html);
}
});
$("#database").click(function() {
if ( $( "#database_div" ).length ) {
$("#database_div").remove();
} else {
var html='';
$('body').append(html);
}
});
$("#frequent").click(function() {
if ( $( "#frequent_div" ).length ) {
$("#frequent_div").remove();
} else {
var html='<div id="frequent_div" class="Freqeuent kick-codes"><p>frequent kick codes</p></div>';
$('body').append(html);
}
});
}
You can do this like this:
Html
<nav>
Home
Contact info
Submission methods
Data base
Frequent kick codes
</nav>
<div class="contact-info" data-container>
<p>Contact info</p>
</div>
<div class="submission-methods" data-container>
<p>submission methods</p>
</div>
<div class="frequent-kick-codes" data-container>
<p>frequent kick codes</p>
</div>
Jquery
$(document).ready(function() {
// initially don't show anything
$('*[data-container]').hide();
// Hide or show the div for that menu item. We don't hide the others because that wasn't asked.
$('*[data-container-class]').click(function(e) {
var className = $(this).data('container-class');
$('.' + className).toggle();
});
});
Jsfiddle example here
plugin demo: http://jqueryui.com/selectable/#serialize
Hello, I don't quite understand this "plugin" and specifically
result.append( " #" + ( index + 1) ); &
<span>You've selected:</span> <span id="select-result">none</span>.
I want the user to be able to select one of the following "buttons" and then a message to show in place of the Number selected (as in the demo)
So: You've selected: #2.
Would be: You've selected: UK, please goto this and do that etc...
im guessing the easiest way is with JavaScript
if "select-result" = 1 then
else
Sort of thing?
Any help Would be great! i hope this isn't a stupid question...
Code:
<html>
<head>
<title>jQuery UI Selectable - Serialize</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" ).empty();
$( ".ui-selected", this ).each(function() {
var index = $( "#selectable li" ).index( this );
result.append( " #" + ( index + 1) );
});
}
});
});
</script>
</head>
<body>
<p id="feedback">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
<ol id="selectable">
<li class="ui-widget-content">UK</li>
<li class="ui-widget-content">USA</li>
<li class="ui-widget-content">FR</li>
<li class="ui-widget-content">AU</li>
<li class="ui-widget-content">CA</li>
<li class="ui-widget-content">DE</li>
</ol>
</body>
</html>
the example in the plugins is showing the selected index.. you don't need to do that... what you need to do is get the text of selected and show it in span.. so use.. html() or text()..
try this
$(function() {
$( "#selectable" ).selectable({
stop: function() {
var result = $( "#select-result" );
result.html($(this).html()); // result.text($(this).text());
}
});
});
var index = $( "#selectable li" ).index( this );
This grabs the index of the element we've been passed. We don't need this line.
result.append( " #" + ( index + 1) );
The index is the position at which the element occurs while descending the DOM.
We can change the above lines to one simple thing.
$( ".ui-selected", this ).text().appendTo(result);
Edit: See above, this may refer to the entire ul, so we need to filter it by the item that is selected. If you are allowing for a multi-select, then see below.
$( ".ui-selected", this ).each(function(){
$(this).text().appendTo(result);
});