Javascript/jQuery watch for CSS Changes - javascript

I have a simple dropdown that opens up a search field when you click it. Even though I have the text field of this search set to autofocus, it's not working for all browsers.
What method of Javascript/jQuery would I use to check if the containing UL css display is set to block, so that I can force the focus to be on the field using .focus().
HTML:
Quick Search
<ul class="dropdown-menu" role="menu">
<li id="li-quicksearch">
<form id="mainSearch" class="form-search">
<p>
<input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
<button type="submit">SUBMIT</button>
</p>
</form>
</li>
</ul>

EDIT: There is no css change event so you'll have to approach the problem in 1 of 2 ways.
check the dom element in set intervals to see if its css has changed
trigger an event when the css of the dom element is changed by user interaction/your code.
the first way will look something like this:
var element = $(".dropdown-menu");
function checkForChanges()
{
if (element.css('display') == 'block')
{
// do your .focus() stuff here
}
setTimeout(checkForChanges, 500); // does this every half second.
}
or the second way:
$('.toggle').on('click', function() {
$('.dropdown-menu').toggle();
$('.dropdown-menu').trigger('change');
});
$('.dropdown-menu').on('change', function(){
if($(this).css(.css('display') == 'block')
{
// do your .focus() stuff here
}
});

You can check the display value of the ul using pure JavaScript with this:
JS:
var display = document.getElementById('dropdown-menu')[0].style.display;
if (display === 'block') {
//do what you want.
}
Or using jQuery:
if ($('.dropdown-menu').css('display') === 'block') {
//do what you want.
}

It looks like you are using bootstrap to create the dropdown. If that is the case you can use the "shown" event. However you need to attach the event on a container element.
Html
<div class="quickSearchContainer">
Quick Search
<ul class="dropdown-menu" role="menu">
<li id="li-quicksearch">
<form id="mainSearch" class="form-search">
<p>
<input type="text" id="inputSearch" class="form-control" placeholder="Quick Search" required="" autofocus autocomplete="off">
<button type="submit">SUBMIT</button>
</p>
</form>
</li>
</ul>
</div>
Javascript
$('#quickSearchContainer').on('show.bs.dropdown', function () {
$('#inputSearch').focus();
});

I want to thank everyone for their input, but the working solution that I found was to modify the bootstrap JS to allow for an autofocus on toggleClass of the OPEN for the dropdowns. Everyone gets kudos!

Related

How to prevent ngBlur from firing first

Supposedly I have an input text markup like this:
<input type="text" ng-focus="x = true" ng-blur="x = false">
So when you click it, this div shows up:
<div ng-show="x === true">
<ul>
<li ng-click="choose(1)">First</li>
<li ng-click="choose(2)">Second</li>
<li ng-click="choose(3)">Third</li>
</ul>
</div>
What happens is when I click one of the selections in the list, the div becomes hidden because the ng-blur from the text field is fired, therefore, the ng-click in the selection is not executed (or so this is what happens in my situation). Is there any workaround for this? Thanks.
A bit of a hack would be to put your ngBlurin a $timeout pushing it back one digest.
<input type="text" ng-focus="x = true" ng-blur="hideFields()">
function hideFields() {
$timeout(function() {
$scope.x = false;
});
}

Clearing input text field value with Jquery

I seem to be able to hide the resource container using
resource.parent().parent().hide();
but I don't understand why the input value is not clearing with
resource.parent().siblings('.resource-value').children('input').val('');
when I use
resource.parent().siblings('.resource-value') I get the parent of the input value but adding .children('input').val('') on top of that does nothing or if I add .children('input:text').val('')
I have very similar code for something else which works just fine, looked at other questions and not sure what I'm missing.
function removeResource(resource) {
'use strict';
//hide resource on screen
resource.parent().parent().hide();
//set resource text value to ''
resource.parent().siblings('.resource-value').children('input').val('');
}
(function($) {
'use strict';
$(function() {
$('#resources').on('click', '.remove-resource', function(evt) {
// Stop the anchor's default behavior
evt.preventDefault();
// Remove the image, toggle the anchors
removeResource($(this));
});
});
})(jQuery);
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="resources">
<div class="resource">
<div class="resource-value">
<input type="text" name="resources[]" value="1" />
</div>
<p class="hide-if-no-js"><a title="remove resource" href="javascript:;" class="remove-resource">remove resource</a > </p>
<!-- .hide-if-no-js -->
</div>
<div class="resource">
<div class="resource-value">
<input type="text" name="resources[]" value="2"/>
</div>
<p class="hide-if-no-js"><a title="remove resourcee" href="javascript:;" class="remove-resource">remove resource</a> </p>
<!-- .hide-if-no-js -->
</div>
</div>
</body>
<html/>
Tried your code and worked fine for me in terms of the actual value of the field clearing, though in inspector the HTML element still has the value attribute showing.
You can use
.attr('value','')
to clear that too http://jsfiddle.net/bvtg93dm
You just have to change the value witch jquery to set "" (so, empty).
input.attr('value','')
Try to log your sibling element with
Try to change your removeResource function to
function removeResource(resource) {
'use strict';
//hide resource on screen
var parent = resource.parent().parent();
parent.hide();
// log your element
console.log(parent.find('.resource-value input'));
// make sure you are getting an element you need
console.log(parent.siblings('.resource-value').childer('input').get(0);
//set resource text value to ''
parent.find('.resource-value input').val('');
}

Issue with adding a list item using JQuery

I have this code which was working earlier. Then I started putting the code into small small functions and now it is not working. I can see that it is adding list item but automatically removing it also. Please guide -
<body>
<header>
<h1>Your Ration List</h1>
</header>
<div id="container">
<form class="shopList-form">
<input id="add" type="text" placeholder="Type new item here" />
</form>
<ul id="item_list">
<li id="base" class="hidden">
<form>
<input class="check" type="checkbox" /> <span class="item">Item</span>
</form>
<button class="delete_item hidden"></button>
</li>
</ul>
JQuery code -
$(document).ready(function () {
/* Get user input */
getItem();
function getItem() {
$('input#add').keydown(function (event) {
if (event.keyCode == 13) {
addItem();
}
});
}
function addItem() {
$('li#base').clone(true).appendTo('#item_list').removeAttr('id').removeClass('hidden');
$('ul#item_list>li:last>form>span').text($('input#add').val());
$('input#add').val("");
}
});
Full code can be found at this JSFiddle -
http://jsfiddle.net/varunksaini/Zjxq5/8/
Since it is a form, pressing enter not only triggers your function but also submits the form (since there is no action it submits to itself) so the page actually refreshes and that is why the new <li> is gone.
All you need to do is add return false to getItem.
see fiddle: http://jsfiddle.net/Zjxq5/9/
The problem you have with your script is that you are using a form and when you press enter it submits the form to the server and reloads the page. You can use the preventDefault() function to avoid that.
$('input#add').keydown(function (event) {
if (event.keyCode == 13) {
event.preventDefault();
addItem();
}
});
Example: http://jsfiddle.net/rdnKq/1/

How to remove a div in the parent structure?

I am trying to remove some elements using a link. The elements that I am trying to remove are in a link's parent div, but i cannot seem to remove them.
Here is the HTML:
<div class="QR-answer-holder">
<label class="QR-answer-label">Enter an answer:</label>
<input class="QR-answer-input textbox" type="text" name="answer" />
</div>
<a class="new-answer new-qr-answer-space" href="javascript:void(0)">New answer space</a> |
<a class="remove-answer remove-qr-answer-space" href="javascript:void(0)">Remove Answer Space</a>
Here is the JQuery:
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function() {
$(this).parent.$(".QR-answer-holder").$(".QR-answer-label").remove();
$(this).parent.$(".QR-answer-holder").$(".QR-answer-input").remove();
});
Is there anyway to make it so the remove button removes the label and input closest to the end of the div? (or does it do that automatically)?
You're accessing the .parent() node from that anchor .new-qr-answer-space.
Infact, you need to get the .sibling(), since the div.QR-answer-holder is not the parent node:
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function() {
$(this).siblings(".QR-answer-holder").find(".QR-answer-label:last, .QR-answer-input:last").remove();
});
try
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function() {
$(this).parent().find($(".QR-answer-holder").remove();
});
and it should remove the lable and input as those are inside the placeholder
see siblings:
$(this).siblings('.QR-answer-holder .QR-answer-label').remove();
this would remove the elements '.QR-answer-holder .QR-answer-label' from the same dom node as this.
Try using this
HTML:
<div class="QR-answer-holder">
<label class="QR-answer-label">Enter an answer:</label>
<input class="QR-answer-input textbox" type="text" name="answer" />
</div>
<a class="new-answer new-qr-answer-space" href="#">New answer space</a> |
<a class="remove-answer remove-qr-answer-space" href="#">Remove Answer Space</a>
JavaScript:
$remove_qr_answer = $(".remove-qr-answer-space");
$remove_qr_answer.live("click", function(e) {
e.preventDefault();
$(this).siblings(".QR-answer-holder").find(".QR-answer-label,.QR-answer-input").remove();
});
parent is a method, not a property. There is no $ method in the jQuery object, you use the find method to locate children:
$(this).parent().find(".QR-answer-holder .QR-answer-label").remove();
$(this).parent().find(".QR-answer-holder .QR-answer-input").remove();
Edit:
As you actually want to get the closest sibling before the link, you should use the prev method instead:
$(this).prev().find(".QR-answer-holder .QR-answer-label").remove();
$(this).prev().find(".QR-answer-holder .QR-answer-input").remove();
Or if you want to remove all elements in the div, simply:
$(this).prev().empty();

How to use jquery to show hidden form fields

I have three input fields for collecting telephone numbers from users. I display one field and hide the other two. I have placed a link(Add home number) below it and when you user clicks on the link it shows the hidden input field. And I have placed one more link below it when clicked displays the last input field.
<input type="text" />
<a href="#" class="show" >Add Home Number</a>
<div style="display: none">
<input type="text" />
<a href="#" class="show" >Add Office Number</a>
</div>
<div style="display: none">
<input type="text" />
</div>
And the jquery looks like this..
<script>
$(function(){
$(".show").click(function () {
$(this).next("div").show("slow");
});
});
</script>
The first link works fine, But the second one does not work.
I appreciate all help.
Thanks.
you have to use the each function:
like this:
$(".show").each($(this).click(function () {
$(this).next("div").show("slow");
})
);
.next() only selects the next sibling element. You links have no subsequent siblings, because you close the parent element (the div) immediately after. You need to select the next sibling of the div:
<script>
$(function(){
$(".show").click(function () {
$(this).parent().next("div").show("slow");
});
});
</script>

Categories