Semantic UI adding class dynamically to input field - javascript

It seems there is an issue with adding class dynamically to input field in SUI.
My goal is to active a disabled input on double click, then disabled it again on blur.
On https://jsfiddle.net/Greggg/e1x7jnor/2/ on first input I am adding css dynamically with success. On second input, I am trying to do the same just by adding class and it does not work.
Here is code
<div class="column">
<div class="ui disabled transparent test2 input">
<input value="Add class do not work" type="text">
</div>
$(".disabled.transparent.test2").dblclick(function() {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active');
});
Is it a SUI issue or a miscoding?
Any help would be appreciated
Greg

The class is getting added, but the background color is getting overriden by another rule because of specificity.
Also since the class active is dynamically added, you need to use event delegation to target those elements.
/* Focus on double click on page name */
$(".disabled.transparent.test1").dblclick(function() {
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').css('background-color', 'red');
});
$(".disabled.transparent.test2").dblclick(function() {
console.log('a')
$(this).addClass('focus').removeClass('disabled transparent');
$(this).find('input[type=text]').addClass('active');
});
$('.ui.input').on('blur', '.active', function() {
alert("test");
$('input').hasClass('.active').addClass('disabled transparent');
});
.ui.input input.active,
.ui.input.focus input.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.4/semantic.min.js"></script>
<div class="column">
<div class="ui disabled transparent test1 input">
<input value="Add css work" type="text">
</div>
</div>
<div class="column">
<div class="ui disabled transparent test2 input">
<input value="Add class do not work" type="text">
</div>
</div>

Related

How to restore div which is hidden using empty() function

html code:
<button id="add"></button>
<div id="count_search">
<span class="total_count">Total: <span id="record_count"></span></span></span>
<input type="text" class="txtbox search" placeholder="Search" id="search">
</div>
Jquery code:
$("#add").click(function(){
$("#count_search").empty();
})
I want to show count_search div once again on clicking on any other button execpt to add button
In above code add is button on which empty() is implimented. On clicking on add button count_search is got hide. Then after I want to restore that div content
.empty() deletes the elements in your container (count_search).
Instead, you can use .hide()/.show() or better approach, you can use .toggle() that show or hide your element.
$("#add2").click(function() {
$("#count_search").toggle();
});
$("#add").click(function() {
if ($("#count_search").is(":visible")) {
$("#count_search").hide();
} else {
$("#count_search").show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="add">Show/Hide</button>
<button id="add2">Toggle</button>
<div id="count_search">
<span class="total_count">Total: <span id="record_count"></span></span></span>
<input type="text" class="txtbox search" placeholder="Search" id="search">
</div>
By empty() you are deleting an item in DOM.
Instead of empty, you can use toggle(), which hides the element and If you click once again, the item will show.
$("#add").click(function(){
$("#count_search").hide();
})

How to click radio by clicking on div?

Why is my code not working? i need to simulate click on radio button. Radio button has click event.
$(".form-group").click(function() {
alert("clicked")
$(this).closest(".hotelObj", function() {
$(this).trigger("click");
})
});
.form-group {
background-color: pink;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="male" style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Given the markup you've provided, javascript isn't necessary for this task, unless there's some other requirement you've left out.
Since the label contains all the area that you want the click handler to affect, it should just work as is (clicking anywhere in the pink box will cause the radio button to become selected).
.form-group {
background-color: pink;
}
<div class="form-group">
<label style="font-weight:800;">chose
<input type="radio" value="z6" class="hotelObj" name="hotelType">
<p>description</p>
</label>
</div>
Your code is not working because you are using .closest() jquery method which will look for element starting from itself and then up in DOM tree.
This way element with class.hotelObj is never found.
You need to use .find() method to find .hotelObj, because it's inside .form-group.
$(".form-group").click(function() {
$(this)
.find(".hotelObj")
.trigger("click");
});
Try onClickHandled property
<input type="checkbox" onclick="onClickHandler()" id="box" />
<script>
function onClickHandler(){
var chk=document.getElementById("box").value;
//use this value
}
</script>

input-group-addon change color with onclick

I am trying to change the input-group-addon background-color with an onclick javascript function. It seems i can not get this working.
Anyone has an idea?
color = the name of the color (for example 'red').
<script type="text/javascript">
function changeColor(color, id) {
document.getElementById('onColor').innerHTML = color;
}
</script>
Below background-color is set to red. How can I get the text echo'ed from the function changeColor instead of the text red? So I can put any color into it I want, and the color changes on the clicked radio button.
<div class="input-group" style="width:100%">
<span class="input-group-addon" style="background-color:red"></span>
<input id="bet" type="number" class="form-control" name="bet" placeholder="Lira">
</div>
EDIT:
Seems style change with javascript is the answer (not innerHTML).
See: Change CSS properties on click
Use document.getElementById(id).style to change element's css , not innerHTML.
<div class="input-group" style="width:100%">
<span id="input-addon" class="input-group-addon"> Span </span>
<input id="bet" type="number" class="form-control" name="bet" placeholder="Lira">
</div>
<button onclick="changeColor('red', 'input-addon')">Change Color</button>
<script type="text/javascript">
function changeColor(color, id) {
document.getElementById(id).style.color = color;
}
</script>

angularjs show div if clicked inside a input field and hide if clicked outside

I want to show my div if user clicks inside the input field, and if clicked outside only, then it should hide it. If clicked inside the field again, it shouldn't hide.
Here is my attempt:
JSFIDDLE LINK
<div ng-app="app">
<div ng-controller="HelpCtrl">
<input type="text" id="myText" name="myText" ng-click="showHelp = ! showHelp">
<div class="details" ng-class="{ 'hidden': ! showHelp }">
<p>
The help text here!
</p>
</div>
</div>
</div>
the problem is that when the page is opened, I see the help text, and it suddenly disappears and when I click inside the field, it shows again, but it disappears only when clicked inside the field again. Now I want it to hide only if clicked outside the field.
Please help me with this.
Use ng-focus instead of ng-click
Plunker Example
<input type="text" ng-focus="focused = true" ng-blur="focused = false" />
<p ng-if="focused">Input has focus!</p>
below code should help you.
<style>
.hidden{
-webkit-transition: width 2s; transition: width 2s;
display:none !important;;
}
.details{
display:block;
}
</style>
<div ng-app="app">
<div ng-controller="HelpCtrl">
<input type="text" id="myText" name="myText" ng-focus="showHelp = true" ng-blur="showHelp = false">
<div class="details" ng-class="{'hidden':!showHelp}">
<p>
The help text here!
</p>
</div>
</div>
</div>

avoid multiple cloned or duplicated div on button click and insertAfter the same last cloned div once

I have a div and I want to duplicate it. I mean that I wanted the same div to be duplicated once. I have used such code for it.
$("#btnAddRules").click(function(){
$(".div1_section").clone().insertAfter($(".div1_section"));
});
But, when click on the button again and again , it is adding multiple of the DIVs and I wanted only one div to be inserted after the last div.
<div class="col-md-8">
<div class="row div1_section">
<div class="col-md-6">
<label>hey hey hey</label>
<select class="form-control">
<option>klklk</option>
<option>huhuuh</option>
</select>
<br/>
</div>
<div class="col-md-6">
<label>abc</label>
<div class="input-group-currency">
<span class="currency">pk</span>
<input type="text" class="form-control input-currency" name="start" value="20'000" style="float:left">
</div>
</div>
</div>
Hope to hear from you, soon.
Thanks
Use last() to target just the last element from the collection:
$("#btnAddRules").click(function() {
$(".div1_section").last().clone().insertAfter($(".div1_section").last());
});
.div1_section {
line-height:50px;
margin:20px 0;
padding:0 20px;
background:tomato;
color:white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btnAddRules">Add More Rules</button>
<div class="div1_section">Original</div>
Remove the event listener after the first click like this:
var callback = function () {
document.getElementById('btnAddRules').removeEventListener('click', callback);
$(".div1_section").clone().insertAfter($(".div1_section"));
}
document.getElementById('btnAddRules').addEventListener('click', callback);
Sorry for using vanilla JS and your jquery, I'm more used to write vanilla JS.
Use last() to target just the last element from the collection and after() to put div after a div:
$("#btnAddRules").click(function(){
$(".div1_section").last().after($(".div1_section").last().clone());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1_section" >
Hi this is testing
</div>
<button type="button" id="btnAddRules">
Add DIV
</button>

Categories

Resources