I want to specify click event to particular textfield in my web page, it's id value is service.
Even If I pass another element using setElement() to view, still I want to apply that click event on text-field(id:service).
view code:
var addService=Backbone.View.extend({
events:{
"click #service":"alertfunction"
},
alertfunction:function(event){
alert("working");
}
});
var addFunctionObj=new addService({el:$("div")});
html code:
<div align="center" id="div2">
<input type="text" id="service" style="width: 200px; height: 20px; color: white; background: green" placeHolder="Enter Service"/>
<input type="text" id="price" style="width: 200px; height: 20px; color: white; background: green" placeHolder="Enter Price"/>
<input type="button" id="add" align="center" style="width: 100px; height: 50px; color: white; background: green" value="AddService"/>
<span>I am Normal Text</span>
</div>
testcases :
Initially If I click on text-field(service),getting alert even If you pass div to view.
But If I pass the following names to view using setElement,click event is not working on text-field(service).
view.setElement('#add')
view.setElement('input')
view.setElement('span')
again If you pass div or #div2 to view, click event is working fine on text-field(service).But If you pass the above elements to view,it's not working. Why?
What I want : If you pass any element to view,click event should be work on text-field(service). Is it possible.
Thanks.
What you are trying to do is not how Backbone works.
What the following code does is listen for click events for children of the "this.el" that bubble up.
events:{
"click #service": "alertfunction"
}
This means that you cannot set "this.el" to be input#add because this element has no children with the id #service.
Works
<div id="div1">
<input type="text" id="service" />
</div>
var addFunctionObj=new addService({el:$("div1")});
Does not work
<div id="div1">
</div>
<input type="text" id="service" />
var addFunctionObj=new addService({el:$("div1")});
The second examples does not work because #service is not a child of this.el. As long you "pass" it an element that does not have #service as a child element then it will never work.
Related
i have an input Element that Get Name of Helper but Two Element has same id
it is incorrect for Edit this problem,
i want to Add Parent Div Id to Child Input.how can i Append ParentId to ChildId
<div class="wrapper-merge-input">
<div id="Stb" class="col-md-6 ">
<label class="control-label">StartDate</label>
#page.Html.Raw(fromHtml)
</div>
<div id="Edb" class="col-md-6 ">
<label class="control-label">EndDate</label>
#page.Html.Raw(toHtml)
</div>
</div>
</div>
*And *
<input type="text" dir="ltr" class="form-control"
name="#name" id="#name"
value="#value"
onclick="DatePicker.Show(this,'#today');" />
for example #name+Edb
The code below shows how you can use .attr("id") to get an element's id. In order to travel up one level to the parent DOM element you should use .parent().
You can also use .attr("id", "new-id") to set an attribute value. This can take strings or variables (as in the code below).
By placing the update code into a function you can call it on page load, after a click or any other event. I have made it run after a click of the button so you can see the id change.
I added some basic styling to make the demo a bit nicer to use.
Let me know if you wanted something else.
WARNING you will likely want to make the updateID() function more specific, so it does not act on every input on the page.
// Click event for button to demonstrate change
$("#startUpdate").click(function() {
updateID();
});
function updateID() {
// Cycle through each input - WARNING - you will want to make this more selective
$("input").each(function() {
// Update id of input from it's own name and it's immediate parent's id
$(this).attr("id", $(this).attr("name") + "-" + $(this).parent().attr("id"));
// Print message to console to demonstrate id
console.log("new id = " + $(this).attr("id"));
});
}
.wrapper-merge-input {
border: 1px solid black;
border-radius: 5px;
padding: 8px;
margin: 20px;
}
#Edb {
padding-top: 10px;
}
#startUpdate {
margin-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper-merge-input">
<div id="Stb" class="col-md-6 ">
<label class="control-label">StartDate</label>
<input name="example1" id="example1" value="example1" onclick="DatePicker.Show(this,'#today');">
</div>
<div id="Edb" class="col-md-6 ">
<label class="control-label">EndDate</label>
<input name="example2" id="example2" value="example1" onclick="DatePicker.Show(this,'#today');">
</div>
</div>
<button id="startUpdate">Update IDs</button>
I´m not really sure I can do this, but it's worth the try.
I have a table with at least 10 items coming from a Mysql database. They are items for which you can bid. The idea is that every row (therefore, every item) has a button that can be clicked to enter the bid. This button opens a popup with a text field to enter the bid and a button to submit the form.
In order to identify the item the user is bidding for, I need its id, as well as the amount bid. The amount is really easy to get, but I´m struggling a lot with the item id.
Here is what I have:
$(document).ready(function(){
$(".show").click(function() {
$("#popup").show();
var $id = document.getElementsByClassName('show')[0].value;
console.log($id);
$("#jugador").val($id);
});
$("#close, #submit").click(function() {
$("#popup").hide();
});
});
#popup {
position: relative;
z-index: 100;
padding: 10px;
}
.content {
position: absolute;
z-index: 10;
background: #ccc;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: #000;
z-index: 5;
opacity: 0.4;
}
<td><button class="show" id="bid" value="<?php echo $row2["id"];?>"><img src="pictures/bidIcon.png" width="30" height="30"></button></td>
/*Popup*/
<div id="popup" style="display: none;">
<div class="overlay"></div>
<div class="content">
<header>
<div id="close">✖</div>
</header>
<form name="form1" method="post" action="bid.php">
<fieldset>
<label for="bid">Bid:</label>
<input type="text" name="bidAmount" id="bidAmount" size="8" />
<input type="hidden" name="item" id="item" />
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
<footer>
<button type="button" id="submit">Bid Now</button>
</footer>
</form>
</div>
</div>
I´ve been trying for a while with no luck. I will always get the item id for the first element no matter in which button I click.
Is it feasible what I want? Is this the correct approach? Should I use a different one?
Thanks a lot in advance.
Just change this line:
var $id = document.getElementsByClassName('show')[0].value;
To this:
var $id = $(this).val();
The problem is that with document.getElementsByClassName('show')[0].value you are querying the first occurrence of the .show button. With $(this) instead you will be accessing the current clicked button.
JQuery binds the events to the target where you attach the event, so this will always be a reference to the target of the event. Using $(this) will create a jQuery object of the target element permitting to apply jQuery functions to the element.
As a side note, you shouldn’t duplicate the elements ids. Every id must be unique in the html document, so it will be a good practice to make that id different for each button.
Hope it helps.
To access the current div element's Id you can use the ($this), which refers to the current javascript object.
$("div").click(function(){
alert($(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">Num 1</div>
<div id="2">Num 2</div>
<div id="3">Num 3</div>
<div id="4">Num 4</div>
Here in this example, i have created div's which when clicked return's the id of that div.
When you do it like this var $id = document.getElementsByClassName('show')[0].value; it will always take the first element having class="show".
Which will contain the first item hence always gives the id of first item.
So instead of doing it like that you can do it like this:
var $id = $(this).val();
This will select the current item on which user has clicked so will give the id of that item.
I am looking for a way to have a list of checkboxes slide out from an input box when I click it. Basically what I'm looking for is a way to create an overlay form that's tethered to the input box. This image shows what I have before click (left) and what I want to happen on click (right).
Right now I have a bootstrap modal pop up on click, but obviously that's not very user friendly. Any working solution will do, from pure css to js packages. My front end currently works with just html, css, js & jquery.
I've tried the following, but that shows my checkboxes through/behind the text that's already there.
.change-search__form-container {
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}
A pure css solution based on previous answers and Pete's comments.
#myDiv{
display:none;
}
#myDiv:hover, #myDiv:focus-within {
display: block;
}
#myInput:focus + #myDiv {display:block}
<input id="myInput" placeholder="search query">
<div id="myDiv">
<input type="checkbox" id="box1">
<label for="box1">Stuff 1</label>
<input type="checkbox" id="box2">
<label for="box2">Stuff 2</label>
<br>
<input type="checkbox" id="box3">
<label for="box3">Stuff 3</label>
<input type="checkbox" id="box4">
<label for="box4">Stuff 4</label>
</div>
The DIV can be shown by using the below jQuery code
$("#searchbox").focus(function(){
$("#searchresults").show();
});
By using this code the DIV won't go away if the focus from textbox is lost
I solved the problem with the help of the comments. My CSS:
#change-search__form-container {
position: relative;
}
#change-search__dropdown-form {
z-index: 1;
display: none;
position: absolute;
width: 300px;
background: #fff;
border: #000;
border-width: 1px;
}
My jQuery:
$('#change-search__form-container').click(function () {
$('#change-search__dropdown-form').show();
});
This way the container shows on clicking the input box, and doesn't disappear when I click elsewhere (on one of the checkboxes, for example).
there is a great post for a very similar problem:
Css Focus on input div appearing
Runs for Safari and soon in chrome..
#myDiv2{display:none;}
#myInput:focus + div { display: block; }
#myDiv1:focus-within #myDiv2 { display: block; }
<div id="MyDiv1">
<input id="myInput" type="text"/>
<div id="myDiv2">
<label class="container">One
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div style="display:none">
<span> aaa </span>
</div>
</div>
I have a form and need to append a field as many times as required. If the button CLICK TO ADD ANOTHER FIELD is clicked the div should be appended. After the first append (onload), the div responses correctly but from the second one on, I am not getting the similar response from the div. Here is my JSFiddle
If I click on the TEST BUTTON , I get alert for the first div but on adding another div (by clicking the CLICK TO ADD ANOTHER FIELD button) , the button (TEST) doesn't work anymore for the second div onwards.
I tried clone() to help this but unable solve this one. May be I am not using it correctly.
To replicate the issue please follow the steps::
Click on the CLICK TO ADD ANOTHER FIELD button to add div
Click on the TEST button on the second div onwards
Please take a look and suggest. Thanks in advance.
You have to use delegation like $(document).on('click','.test',function(){
var count = 1;
$.fn.addclients = function(add){
var mydiv = '';
mydiv = '<div class="dataadd"><fieldset><legend>Test: '+add+'</legend><b>Test Name :</b> <input type="text" id="ct'+add+'" name="cname" value="" style="width:250px" />'+
' <button class="test" id="test" style="float:left;">TEST</button>'+
'<br>'+
'</fieldset></div>';
//$(".dataadd").clone().appendTo('#registerForm');
$('#registerForm').append(mydiv);
}
$.fn.addclients(count);
$(document).on('click','#btn',function(){
++count;
$.fn.addclients(count);
return false;
});
$(document).on('click','.test',function(){
alert("test");
return false;
});
.zend_form{
font-weight:bold;
font-size:10px;
width:358px;
float: left;
}
.dataadd{
font-weight:bold;
font-size:10px;
width:358px;
//border: 1px solid;
margin-top: 15px;
margin-bottom: 15px;
//padding: 5px;
//float:left;
}
.selectbox{
margin-top: 15px;
width:155px;
height:100px;
}
.buttonc{
background-color: #fff;
width:145px;
height:45px;
}
.selection_area{
font-weight:bold;
font-size:10px;
}
input {
width: 200px;
}
dt {
width:50%; /* adjust the width; make sure the total of both is 100% */
}
dd {
width:80%; /* adjust the width; make sure the total of both is 100% */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="registerForm" enctype="application/x-www-form-urlencoded" method="post" action=""><dl class="zend_form">
<dt id="firstname-label"><label for="firstname" class="required">First Name:</label></dt>
<dd id="firstname-element">
<input type="text" name="firstname" id="firstname" value="" style="width:200px; float:left;" /></dd>
<dt id="middlename-label"><label for="middlename" class="optional">Last Name</label></dt>
<dd id="middlename-element">
<input type="text" name="middlename" id="middlename" value="" style="width:200px" /></dd>
</form>
<div style='display:table;background-color:#ccc;width:99%;padding:5px;'>
<button class='buttonc' name='btn_sub' id='btn' style='float:left;'>CLICK TO ADD ANOTHER FIELD</button>
</div>
You write:
$('#btn').click(function(){ ... });
but this will only bind the event handler to elements currently on the page when running this code. So elements added later will not be covered by this code.
But first tip: do not use a HTML ID (#btn) if you want to repeat it. So instead use a class (.btn), to capture all elements.
And then the best way is to write something like:
$(document).on('click', '.btn', function() { ... } )
This will capture any click event on the document (you could use a container div instead --just easier to show now), and only run the callback if it matches the given selector (.btn).
all elements created after body load must use delegation to work
$("body").on("click",".test",function(){
alert("test");
return false;
});
This way, the event is attached to the body, witch always exists, but only triggers when the matched elements appear, no matter when they're created (before or after js is loaded)
I got several buttons created in a loop dynamically.
<input class="btn btn-info attribute-button" name="commit" type="button" value="first_name">
And i got a text field.
<textarea class="text optional special form-control" data-role="tagsinput" id="campaign_message" maxlength="180" name="campaign[message]"></textarea>
these are created by my rails application.
and this is my js code to add the value of the button into the text field
$(document).on("click",".attribute-button", function(){
var value = $('.special').val($('.special').val() + $(this).val());})
what i want to do is this;
when a button is pressed i can already write the content on the text are but what i want is to write them as non-editable texts.User shouldn't be able to modify the added text.
http://timschlechter.github.io/bootstrap-tagsinput/examples/bootstrap-2.3.2.html
i found this lib but it didn't work out for me since it doesn't support a text are.He apply tags to all inputs.But i will have tags and input texts together.
how can i achieve this?
take a look at the awnser of this question. All you have to do is make the field readonly if you do not want people to add text.
Make textarea readonly with jquery
You can do this with a button click event
Here is my solution. There is a div with the class of tags. Inside it are divs with the class of tag and a text field with the class of newtag. When you enter text into newtag and hit space, enter or tab, a new tag div will be inserted. If you click a button with the class of attribute-button, its value will be added to a tag div. You will need to add thing to complete it such as a delete button on the tags to remove it.
Fiddle
HTML:
<input class="btn btn-info attribute-button" name="commit" type="button" value="first_name" />
<div class="tags">
<input type="text" name="newtag" class="newtag" placeholder="Add tags" />
</div>
JS:
$(".tags, .attribute-button").click(function(){
$(".newtag").focus();
})
$(".newtag").keydown(function(e){
if(e.which === 13 || e.which === 32 || e.which === 9){
e.preventDefault();
$(".newtag").before("<div class='tag'>"+$(".newtag").val()+"</div>");
$(".newtag").val("");
}
});
$(".attribute-button").click(function(){
$(".newtag").before("<div class='tag'>"+$(this).val()+"</div>");
})
CSS (optional):
.tags{
width: 400px;
height: 100px;
border: 1px solid #000;
margin: 5px;
}
.tag{
padding: 1px;
background-color: blue;
color: #fff;
border-radius: 3px;
display: inline-block;
}
.newtag{
border: none;
outline: none !important;
}