in my project,(Edit page) i have an input box that contain the value from db. and place a div over that input box(when page loading that div is not shown). my need is when i am clicking on that input box i want to enable the div and show as a drop down select list. i am using following code,
http://jsfiddle.net/wzPYf/1/
<div class="role">
<div style="float:left;">In Rotary Club of Puthencruz : </div>
<div class="currentrole"><input type="text" value="#Model.Mem_Role" name="Mem_Role" id="memrole"/></div>
<div class="allrole"></div>
</div>
//jquery
$(document).ready(function () {
$('#memrole').click(function () {
$('.allrole').attr('disabled', false);
var arr = [
{ val: 'member', text: 'Member' },
{ val: 'president', text: 'President' }
];
var sel = $('<select>').appendTo('body');
$(arr).each(function () {
sel.append($("<option>").attr('value', this.val).text(this.text));
});
$('.allrole').html(sel);
});
});
//css
.role {
position:relative;
display:inline-block;
}
.currentrole {
position: absolute;
margin-left:100%;
width:200%;
}
.allrole {
position:absolute;
width:150px;
height:20px;
margin-left:100%;
display:none;
}
But my jquery part is not working, the dropdown select list is not displayed.
Change your code to this -
$(document).ready(function () {
$('#memrole').click(function () {
var arr = [
{ val: 'member', text: 'Member' },
{ val: 'president', text: 'President' }
];
var sel = $('<select>');
$(arr).each(function () {
sel.append($("<option>").attr('value', this.val)
.text(this.text));
});
$('.allrole').html(sel);
$('.allrole').show();
});
JSFiddle.
The mistake that you were making was - to show a hidden div, you need to call jQuery's show method on it. Setting disabled attribute to false doesn't work here.
Also you can simply create a select element by calling $(''), no need to append it to a body, since you are already attaching it to the .allrole div later. Next, rather than assigning the the select element with options as a text, I simply appended it to the .allrole div.
If you want to show the div which is display:none or visibility:hidden just use $(yourselector).show(); So your code would be
$('.allrole').show(); instead of
$('.allrole').attr('disabled', false);
The working demo is here Refer show()
Related
I want to replace the span in the context menu to a custom div:
This is the code used:
$.contextMenu({
selector: '.context-menu-row',
items: {
copy: {
name: function(){
return "Layout"
},
callback: function(key, opt){
alert("Clicked on " + key);
}
}
}
});
So instead of "Layout" I need to put a div divided into 3 divs.
Instead of replacing an element, you can have both in the document and change their display property, hiding or displaying the element as you like. To hide an object, just disable the display property as follows:
display: none;
To display it again, change the display property to whatever you need to.
More information:
https://developer.mozilla.org/es/docs/Web/CSS/display
Can someone please help me/explain how can I do this or if it's possible?
I have a simple html code for a grocery list :
<!DOCTYPE html>
<html>
<head>
<title>Let's buy...</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<h2 class="title">My grocery list<span id="counter"></span> </h2>
<ul id="list-items"></ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add item..."/>
<input type="submit" id="addButton" value="add" />
</form>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<!-- <script type="text/javascript"
src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> -->
<script type="text/javascript" src="js/javascript.js"></script>
</body>
</html>
And I am the user is adding elements to the list - when the user adds an item, that item comes with a button. Now, I want that button "change item" to add 4 more buttons with append(), and I want each button, when clicked to change the color of the item eg red, green, orange and grey - depending on user preference.
I am trying to add those buttons but I don't seem to add it, it does not appear on the page - just to say - I tried to add only one button :) .
Here is my jQuery code ... :
$(function() {
let $list, $newItemForm, $newItemButton;
let item = '';
$list = $('ul');
$newItemForm = $('#newItemForm');
$newItemButton = $('#newItemButton');
function updateCount() {
let items = $('li').length;
$('#counter').text(items);
}
updateCount();
$newItemButton.show();
$newItemForm.hide();
$('#showForm').on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
$newItemForm.on('submit', function(e) {
e.preventDefault();
let text = $('input:text').val();
$list.append('<li>' + text + '<button id="btn-change">change item</button><hr></li>');
$('input:text').val('');
updateCount();
});
and this is the = 'button adding process' :
$('#btn-change').one('click', function() {
let b = $('<input/>').attr({
type: "button",
id: "hot",
value: 'hot'
});
$("button").append(b);
});
There are other things that need to be addressed such as multiple buttons, how you instantiate the event handler and more. However to just answer your "why does my new input not appear".
A button element should not contain and input element. You can see why that would not make sense. Thus to create a new input of type button after that and not append TO that so, use the .after. Now assume that the actual clicked on is the one we want to append to we can use this and append to our button with id btn-change
$('#btn-change').one('click', function() {
let b = $('<input/>').attr({
type: "button",
id: "hot",
value: 'hot'
});
$(this).after(b);
});
Here is another option simply using a different method that performs the same function, does the same thing but perhaps the name makes the intent more clear.
$('#btn-change').one('click', function() {
let b = $('<input/>').attr({
type: "button",
id: "hot",
value: 'hot'
});
b.insertAfter(this);
});
Now we can add a button, we observe that we added this button we are clicking dynamically, thus we need to allow our event handler to be dynamic as well, that is attach it to a container for the button.
list-items is our container, so we attach to that.
$('#list-items').one('click', '#btn-change',function() {
let b = $('<input/>').attr({
type: "button",
id: "hot",
value: 'hot'
});
b.insertAfter(this);
});
Now that we have our event handler we also note that the duplicate id is not valid so we modify to use a class instead of an id.
$('#list-items').one('click', '.btn-change',function() {
let b = $('<input/>').attr({
type: "button",
class: "hot",
value: 'hot'
});
b.insertAfter(this);
});
Now that we have some explanation out of the way, lets do a solution
$(function() {
let $list, $newItemForm, $newItemButton;
let item = '';
$list = $('#list-items'); // use faster id
$newItemForm = $('#newItemForm');
$newItemButton = $('#newItemButton');
function updateCount() {
let items = $list.find('li').length; // get inside our list
$('#counter').text(items);
}
updateCount();
$newItemButton.show();
$newItemForm.hide();
$newItemButton.on('click', function() {
$newItemButton.hide();
$newItemForm.show();
});
function addButton(place, b) {
let bt = $('<input/>').attr({
type: "button",
class: b + "button colorbutton",
value: b
}).data("colorclass", b + "thing");
bt.insertAfter(place);
}
// perhaps change to button type not submit type?
$newItemForm.on('submit', function(e) {
e.preventDefault();
let text = $('#itemDescription').val(); // use fast id
text = text=""?"new":text;//avoid empty text
$list.append('<li><span class="desc">' + text + '</span><button type="button" class="btn-change">change item</button><hr></li>');
$('#itemDescription').val('');
updateCount();
});
$('#list-items').on('click', '.colorbutton', function() {
$(this).parent().find('.desc')
.removeClass("hotthing greenthing orangething greything")
.addClass($(this).data("colorclass"));
});
//Note the change here from discussion, still adds the buttons but more modular, disables button to avoid second click vs the .one, works for new items
$('#list-items').on('click', '.btn-change', function() {
$(this).prop("disabled", true); // only add once so disable it
// add the color buttons, matches classes in css
addButton(this, "hot");
addButton(this, "green");
addButton(this, "orange");
addButton(this, "grey");
});
});
.hotbutton {
color: red;
}
.greenbutton {
color: green;
}
.orangebutton {
color: orange;
}
.greybutton {
color: grey;
}
.hotthing {
background-color: red;
}
.greenthing {
background-color: green;
}
.orangething {
background-color: orange;
}
.greything {
background-color: grey;
}
#list-items {
border: solid lime 1px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<body>
<h2 class="title">My grocery list<span id="counter"></span> </h2>
<ul id="list-items"></ul>
<div id="newItemButton"><button type="button" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add item..." />
<input type="submit" id="addButton" value="add" />
</form>
</body>
The problem that you are dealing with is that you try to fire an event from a dynamic generated element. The #btn-change element was not loaded in the page when you attached the event. Based on the documentation you can add a selector. You will have to attach the event into a stable element of your page e.g ul#list-items
so your code would look like this
$("ul#list-items").one('click','#btn-change', function() {
let b = $('<input/>').attr({
type: "button",
id: "hot",
value: 'hot'
});
$("button").append(b);
});
Or you could attach the event grammatically.
Also i would like to suggest you to use classes instead of id for elements that would exist multiple times on the same page (e.g the <button id='btn-change'></button>) the id must be unique in your page.
So the code that i would suggest would look like this
$newItemForm.on('submit', function(e) {
e.preventDefault();
let text = $('input:text').val();
$list.append('<li>' + text + '<button class="btn-change">change item</button><hr></li>');
$('input:text').val('');
updateCount();
});
changed the id='btn-change' to class='btn-change'
and the code of the btn-change click event
$('ul#list-items').one('click','.btn-change', function() {
let btnContainer = $("<div></div>").css("display","inline-block").attr({
class: "btn-container"
});
btnContainer.append(
$('<input/>').attr({
type: "button",
class: "hot", //use class instead of id in case you generate more than 1 element
value: 'hot'
})
).append(
$('<input/>').attr({
type: "button",
class: "green", //use class instead of id in case you generate more than 1 element
value: 'green'
})
).append(
$('<input/>').attr({
type: "button",
class: "grey", //use class instead of id in case you generate more than 1 elements
value: 'grey'
})
).append(
$('<input/>').attr({
type: "button",
class: "orange", //use class instead of id in case you generate more than 1 element
value: 'orange'
})
);
btnContainer.insertBefore(this);
$(this).hide();//or remove based on what you want to achieve
});
here I am using the .btn-change as selector and I am creating a container element to hold the four buttons then i add the container of four buttons before the .btn-change button and hide the button.
You can add later the part of code that will remove/hide the container of the four buttons and show the .btn-change button
I want to hide kenod edit button with out removing it from code, I tried with adding a class with display:none and attribute hidden:true but nothing worked.
I need price button here but edit should be hidden.
{ command: ["edit",{text:"D" , click: deleteRow ,class : "k-grid-delete"} , {text:"Price" , click: showDetails ,class : "k-button"} ], title: " ", width: "120px" }
If you want the button to be hidden conditionally, you can use the dataBound() event:
dataBound: function (){
var grid = this;
var trs = this.tbody.find('tr').each(function(){
var item = grid.dataItem($(this));
if( item.Something == "Condition") {
$(this).find('.k-grid-edit').hide();
}
});
}
If you want to hide the button indefinitely, you can use the following CSS:
.k-grid-edit {
display: none;
}
Here is an example which displays the use of both methods (I have initially commented out the CSS example to display the conditional hide functionality).
I am developing a system in which main requirement is that user A press add more button and user will fill up data in it. Then add more again and more data.
What I really need to do is to embed 1st add more data and 2nd add more data in one div using keypress events.
For e.g,
user starting writing in 1st text field of 1st add more, then 2nd text field of 1st add more so it should embed this data in one div named: one
user starting writing in 1st text field of 2nd add more, then 2nd text field of 2nd add more so it should embed this data in one div named: two
At the end I want to embed both one and two divs in one single div.
Problem:
It does not including and embed the fields recursively in final div nor keypress is working as expected.
Als returning error $(...).text(...).append is not a function. That is coming in last line of code.
Jquery code:
children_container = $('<div/>', {'class': 'children_new_package_itineraries_container'});
if (children_container.length > 0) {
$("#day_new_package_itineraries_field").on('keypress change', function () {
$('<div/>', {
'class': 'day_new_package_itineraries_container',
'html': $(this).val()
});
});
$("#title_new_package_itineraries_field").on('keypress change', function () {
$('<div/>', {
'class': 'title_new_package_itineraries_container',
'html': $(this).val()
});
});
children_container.append($(".day_new_package_itineraries_container").text().append($(".title_new_package_itineraries_container").val()));
$(".preview_container").html(children_container);
}
Desired Output:
<div class="preview_container">
<div class="children_1493016690115_container">
<div class="day_1493016690115_container">Day: 123</div>
<div class="title_1493016690115_container">Title: xyz</div>
</div>
<div class="children_1493016960131_container">
<div class="day_1493016960131_container">Day: 123</div>
<div class="title_1493016960131_container">Title: xyz</div>
</div>
</div>
P.S: I am sitting _1493016690115_ or _1493016960131_ these values dynamically so that's not the issue how I am dealing these inputs dynamically.
You can append where you are creating element
children_container = $('<div/>', {'class': 'children_new_package_itineraries_container'});
if (children_container.length > 0) {
$("#day_new_package_itineraries_field").on('keypress change', function () {
if($(".day_new_package_itineraries_container").length) {
$(".day_new_package_itineraries_container").html($(this).val());
}else{
children_container.html($('<div/>', {
'class': 'day_new_package_itineraries_container',
'html': $(this).val()
}));
}
});
$("#title_new_package_itineraries_field").on('keypress change', function () {
if($(".title_new_package_itineraries_container").length) {
$(".title_new_package_itineraries_container").html($(this).val());
}else{
children_container.append($('<div/>', {
'class': 'title_new_package_itineraries_container',
'html': $(this).val()
}));
}
});
$(".preview_container").html(children_container);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div class="preview_container"></div>
<input id= "day_new_package_itineraries_field">
<input id= "title_new_package_itineraries_field">
I have an Example what I get this from one of my previous post .I am trying to upgrade this with my need but I failing . I guess it's because of my lack of knowledge in jquery and JavaScripts . But I need this badly .
Here is Live demo in js fiddle :http://jsfiddle.net/qzKWD/5/
What I have now:
There you can see I have a button . If I click the button it will open a Div with Editable input , where I can rename the input and save . you can create many div by clicking the button and rename as you want .
What I am trying to do
What I was trying to Do is that ,I added a "X" text there . When I click the button "START" new div created with input to change name , also with this "X" text . What I am mainly trying is .. before I rename he input if I don't what that div I can remove the div with input by clicking the "X" text . SO that mean "X" will act as a close of that Div .But I am not finding any way to do that . May be because of my lacking of knowledge . If there is any solution or way it will be Excellent .
My code :
HTML
<button id="createDiv">Start</button>
<div id="results"></div>
CSS
#createDiv, #results span { cursor: pointer; }
#results div {
background: #FFA;
border: 1px solid;
width:auto;
}
#results input[type=text] {
border: none;
display: none;
outline: none;
}
.clickToCancleIcon{
float: right;
}
.new-folder{
height:30px;
float:left;
}
JS
// Call for document .onload event
$(function() {
// Normal Click event asignement, same as $("#createDiv").click(function
$("#createDiv").on("click", function(e) {
// Simply creating the elements one by one to remove confusion
var newDiv = $("<div />", { class: "new-folder" }), // Notice, each child variable is appended to parent
newInp = $("<input />", { name: "inpTitle[]",style:"display:block ;float:left; border:solid 1px #fa9a34", type: "text", value: "Unnamed Group", class: "title-inp" }).appendTo(newDiv),
newSpan = $("<span />", { id: "myInstance2",style:"display:none; float:left;", text: "Unnamed Group", class: "title-span" }).appendTo(newDiv),
clickToCancle = $("<a />", { text: "X", class: "clickToCancleIcon" }).appendTo(newDiv);
// Everything created and seated, let's append this new div to it's parent
$("#results").append(newDiv);
});
// the following use the ".delegate" side of .on
// This means that ALL future created elements with the same classname,
// inside the same parent will have this same event function added
$("#results").on("click", ".new-folder .title-span", function(e) {
// This hides our span as it was clicked on and shows our trick input,
// also places focus on input
$(this).hide().prev().show().focus();
});
$("#results").on("blur", ".new-folder .title-inp", function(e) {
// tells the browser, when user clicks away from input, hide input and show span
// also replaces text in span with new text in input
$(this).hide().next().text($(this).val()).show();
});
// The following sures we get the same functionality from blur on Enter key being pressed
$("#results").on("keyup", ".new-folder .title-inp", function(e) {
// Here we grab the key code for the "Enter" key
var eKey = e.which || e.keyCode;
if (eKey == 13) { // if enter key was pressed then hide input, show span, replace text
$(this).hide().next().text($(this).val()).show();
}
});
})
Just add the following code,
clickToCancle.click(function() {
$(newDiv).remove();
});
After,
clickToCancle = $("<a />", { text: "X", class: "clickToCancleIcon" }).appendTo(newDiv);
Or you can done this by,
clickToCancle = $("<a />", { text: "X", class: "clickToCancleIcon" }).appendTo(newDiv).click(function() {
$(newDiv).remove();
});
See the live DEMO