I want to select or type a text in a combox with the frameworks w2ui. When i type on the key "Enter", i would get the value in the combobox to push this value in a array (see my addItem function in my code). I don't know how to access the string in the combobox ?
The documentation for this combo is here : http://w2ui.com/web/docs/1.5/form/fields-list
I have made a jsfiddle about what i'm trying to do here :
https://jsfiddle.net/espace3d/bLughmy9/
This is for a simple todo list with tag.
<!DOCTYPE html>
<html>
<head>
<title>W2UI Demo: fields-3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
<div style="height: 10px"></div>
<div class="w2ui-field w2ui-span3">
<label>Combo:</label>
<div> <input type="combo"> <span class="legend">You can type any text</span> </div>
</div>
<div style="height: 20px"></div>
<style>
.w2ui-field input {
width: 200px;
}
.w3ui-field > div > span {
margin-left: 20px;
}
</style>
<script type="text/javascript">
var data={
description:["georges","henry"],
}
var addItem=function(item){
console.log(item)
data.description.push(item)
data.description.sort();
}
$('input[type=combo]').w2field('combo', {
items: data.description,
});
$( 'input[type=combo]' ).keypress(function(event) {
if(event.key == 'Enter'){
console.log( "Handler for .keypress() called." );
/////////////////////////////////////////
//WHAT I WANT TO DO
//addItem(something)
}
});
</script>
</body>
</html>
You can access the w2field object by calling $element.w2field().
After that, you can access the content by calling get() on the w2field object.
Side note: get() may return an object, e.g. if your items are objects in the form { id: 123, text: "my text" }, which would be valid for w2ui combo box or list fields.
In your case, you can change the code as follows:
$( 'input[type=combo]' ).keypress(function(event) {
if(event.key == 'Enter'){
console.log( "Handler for .keypress() called." );
var w2ui_field = $(this).w2field();
var value = w2ui_field.get();
addItem(value);
w2ui_field.options.items = data.description;
}
});
Note that you will have to re-assign the new items to the w2field options, if you want to display them in the combo box.
If you don't want that, you can ommit the w2ui_field.options.items = data.description; part.
Updated fiddle: https://jsfiddle.net/k548j0w1/
I had the same problem as you.
To address my problem, I got the JSON object item of the list and got its id or text in the COMBOBOX as follows.
$('#yourlistid').w2field().get().id
$('#yourlistid').w2field().get().text
Related
I am trying to make an emoji system whereby a file called emoji.css willm store the emojis.The names of all the emoji's are stored in a really javascript array although slightly altered.When users input a emoji text
(something like :emoji: ,:another-emoji:)Javascript should check if it that text is in the emoji array,if it is,it will be automatically turned into an emoji.
Atleast that is what I'm trying to do
This is the steps of what is supposed to happen
Page loads
User inputs in input with class 'input'
If the text is in the array called
emoji,javascript
i.Alerts the name of the input
ii.Says 'it is in array'
iii.Copy the text into a div with class
`see`
iv.Text in div automatically becomes an array`
And I think that is where the problem is.
In the emoji.css file all emoji have classes with names like em em-abc,em em-woman but when users want to call an emoji, they must input a text with a : in the front and back like :abc:,:woman: so jquery should automatically change that input string(:abc:) to emoji.css class(em em-abc) and I used this line of code to do that
$(".see").addClass("em em-"+$(".see").html().split(":").pop()).removeClass(".see");
here is my full code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Rad emojis</title>
<style>
div {
color: blue;
}
span {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link href="emoji.css" rel="stylesheet">
</head>
<body>
<div class ="see em-abc"></div>
<input class="input">
<div class ="see"></div>
<div class ="see2"></div>
<div class ="see3"></div>
<div class="add"></div>
<script>
var emoji = [ ":abc:", ":woman",":eye:", <!--it was much longer than this--> ];
var input=$(".input");
var input2=$(".input").val();
$(input).change(function(){
$(".see").html( $(".input").val());
if(jQuery.inArray($(".input").val(), emoji) != -1) {
var see="."+$(".see").html();
$(".see2").html(see);
var classs =see+"";
alert($(".see").html());
var real=$(".see").html().split(":").pop();
$(".see3").html(real);
$(".see").toggleClass("em em-"+$(".see").html().split(":").pop());
$(".see").addClass("em em-"+$(".see").html().split(":").pop()).removeClass(".see");
alert("is in array");
alert($(".see").html());
} else {
alert("is NOT in array");
}
});
</script>
</body>
</html>
When you remove a class using the removeClass method, you have to omit the dot.
Simply use
$(".see").addClass("em em"+$(".see").html().split(":").pop()).removeClass("see");
How can I make a new row of data using jquery? For example i have a div with an id "box" and I have two spans each with an id of "name" and "time".
How can I have jquery append to this box holding both name and time? I tried experimenting and tried this code, but didn't work.
$("#button").click(function(){
$("#box").append(
$("#name").text("username"),
$("#time").text("5:00pm")
);
)}
In this code, I expected the box to create a new row of data every time I click the button. So if I want 5 rows of data, I would just click the button 5 times.
IDs must be unique and you need new spans
$("#button").on("click",function() {
$("#box").append(
"<br><span>username</span> <span>5:00pm</span>"
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="button">Click</button>
<div id="box"></div>
With vars, you can use a template literal
var cnt=0,
data = [{ username: "John", time: "05:00pm" },
{ username: "Paul", time: "07:00pm" }];
$("#button").on("click", function() {
if (cnt < data.length) {
$("#box").append(
`<br><span class="user">${data[cnt].username}</span> <span class="time">${data[cnt++].time}</span>`
);
}
});
.user { color:green }
.time { color: red }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button type="button" id="button">Click</button>
<div id="box"></div>
this is how you must do :
$(document).ready(function() {
$('#button').click(function(){
$("#box").append('<br><span>username</span><span>5:00pm</span>')
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
</div>
<a id="button">button</a>
Since ID must be unique as #mplungjan mentioned, assuming you have some css linked with them, i'll just give examples with a class instead of IDs
$("#button").click(function(){
$("#main").append(
$("<div>").addClass("box")
.append($("<span>").addClass("name").text("username"))
.append($("<span>").addClass("time").text("5:00PM"))
);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main"></div>
<button id="button">Click me</button>
As you can see, after using the syntax $("<div>") you can chain as you want like you would in jQuery. The main difference between this and what #mplungjan has shown is how dynamic you are planning to make these. If you are planning on expanding these divs and spans dynamically as you go you are better off using this. If not and you just want lesser syntax you could rather use his.
Working on a simple issue here. In the end the project will take a user's submitted name and capitalize the first two letters.
However for now I'm just trying to store the user's input in a variable and then display the exact same thing in a "results" form. Not sure where I'm going wrong.
JSFiddle: http://jsfiddle.net/Ever/DQn57/
HTML:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<script src="application.js"></script>
<title>Tim's Name Capitalizer!</title>
</head>
<body>
<h2>Name Capitalizer</h2>
<div class="intro">
Welcome! Enter your name below (first and last) then press "SUBMIT" to see
what happen!
<br>
</div>
<br>
<form>
Enter Here:
<br>
<input type="text" name="name" id="enteredFormName" placeholder="Your
Name">
</form>
<br>
<form>
Result:
<br>
<input type="text" name="fixName" id="fixedFormName" placeholder="Your
Name">
</form>
<br>
<button>Submit</button>
</body>
</html>
CSS:
div.intro{
font-weight: bold;
width: 50%;
}
form.questions{
text-align: left;
font-size: 25px;
width: 500px;
height: 100px;
border: 1px solid black;
padding: 5px;
}
JS:
$(document).ready(function(){
//when the <submit> button is clicked
$('button').click(function(){
//store the user's entry in a variable
var enteredName = document.getElementById('enteredFormName').value;
//update the html in the second form to show the user's entered name
$('#fixedFormName').value(enteredName);
});
}
http://jsfiddle.net/dwebexperts/U68ny/2/
Replace this:
$(document).ready(function(){
//when the <submit> button is clicked
$('button').click(function(){
//store the user's entry in a variable
var enteredName = document.getElementById('enteredFormName').value;
//update the html in the second form to show the user's entered name
$('#fixedFormName').value(enteredName);
});
}
with this:-
$(document).ready(function(){
//when the <submit> button is clicked
$('button').click(function(){
//store the user's entry in a variable
var enteredName = document.getElementById('enteredFormName').value;
//OR var enteredName = $('#enteredFormName').val();
//update the html in the second form to show the user's entered name
$('#fixedFormName').val(enteredName);
});
});
You also have an issue at the closing of " $(document).ready(function(){ ", you are closing it with } this only whereas, it requires }); at the end.
why are you mixing normal js with jquery ?
var enteredName = $('#enteredFormName').val();
$('#fixedFormName').val(enteredName);
Just try this
$(function(){
$("button").click(function(){
var data = $("#enteredFormName").val();
$("#fixedFormName").val(data);
});
})
Use the jQuery my friend.
$(document).ready(function(){
//when the <submit> button is clicked
$( "button" ).click(function() {
//store the user's entry in a variable
var enteredName = $('#enteredFormName').val();
//update the html in the second form to show the user's entered name
$('#fixedFormName').val(enteredName);
});
});
Try this :
Jquery :
$(document).ready(function(){
$('#button').click(function(){
var enteredName = document.getElementById('enteredFormName').value.toUpperCase();
$('#fixedFormName').val(enteredName)
});
});
Demo :
http://jsfiddle.net/C9gGq/
I"m making a very simple to-do list with jquery. I have an input box for adding thing and once entered it will print out that underneath:
HTML:
<html>
<head>
<title>My to-do list</title>
<link rel="stylesheet" href="css/list.css" >
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="js/list.js"></script>
<div id="empty-top"></div>
<div align= "center" class="wrapper">
<h2>Add thing to your to-do list</h2>
<input id='input' type="text" placeholder="To-do-list" >
</div>
<div class = "things">
</div>
</body>
</html>
my js file:
$(function(){
$("#input").keypress(function(e){
if(e.which == 13){
var content = $("#input").val();
$("<li>" + content + "<input id= 'check' type='checkbox'> </li>").appendTo(".things");
};
});
//I want to check if the box is checked. If it is then I want to insert the tag to cross that item. This function, however does not work. I also tried ("input").is(":checked") or ("input").prop("checked",true) but still doesn't do what I wanted.
$("#check").click(function(){
var box = $(this);
$("<del>").insertBefore("<li>");
$("</del>").insertAfter("</li>");
});
});
Thank you!!!!!!!!
Firstly, you can't append LI elements to a DIV, it should be an UL or OL parent element, and you can't wrap the LI in a DEL, as a DEL element can't be a child of an UL, so you have to wrap the inner element, and unwrap it when the checkbox is unchecked again.
As for the event handler, you can attach that when you create the element, and you should be listening to the change event etc.
$(function () {
$("#input").keypress(function (e) {
if (e.which == 13) {
var content = $("#input").val();
var li = $('<li />', {
text : this.value
}),
inp = $('<input />', {
'class': 'check',
type : 'checkbox',
on : {
change: function() {
if (this.checked) {
$(this).closest('li').wrapInner('<del />');
}else{
$(this).unwrap();
}
}
}
});
$('.things').append( li.append(inp) );
};
});
});
FIDDLE
To see if your checkbox is checked, you can use:
$("input").get(0).checked
I would suggest adding a class in your CSS:
.complete{text-decoration:line-through}
And then add the complete class if checked
if($("input").get(0).checked){
$('corresponding-list-item').addClass('complete');
}
How do I add an onClick listener to a div.
I want to change the name of a div to divclass active if it was inactive previously & then remove the word 'active' if user click on the list again.
I'm at a loss how to do this.
This is what I've tried so far
<script>
$function tog(){
$(this).toggleClass('active');
return false;
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-4').removeClass('active');
});
});
</script>
where the div whose class name I want to change is defined as below
<div id="dd" onclick="tog()" class="wrapper-dropdown-4">
<!--something-->
</div>
I've tried this..
<html>
<head>
<script>
$('#dd').on('click', function(){
$(this).toggleClass('active')
});
</script>
<style>
.active {
color: red;
}
</style>
</head>
<body>
<div id="dd" class="wrapper-dropdown-4">
ddddd
</div>
</body>
</html>
What's wrong with this now?
I'm inspecting the element id via chrome developer's tool & I don't see any change using this code. So, can anyone please help?
Thanks. :)
The only script you need is
$(function(){
$('#dd').on('click', function(){
$(this).toggleClass('active')
});
});
Demo: Fiddle
you have to pass the object $(this) is not recognizable , use tog(this)
<script>
function tog(obj)
{
$(obj).toggleClass('active');
return false;
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-4').removeClass('active');
});
});
</script>
<div id="dd" onclick="tog(this)" class="wrapper-dropdown-4">
<!--something-->
</div>
not the best way to do it, you can bind the event ,by registering the click in the event.