jsfiddle: http://jsfiddle.net/d1zqsayh/9/
Trying to put the search box of DataTables in a <div>.
Html:
<div class="dataTables_filter">
<input type="text" id="dataTables_filter" class="dataTables_filter">
</div>
Script:
oTable = $('#example').dataTable();
$('#dataTables_filter').keyup(function(){
oTable.fnFilter( $(this).val() );
})
I saw this from another stack overflow post , but unfortunately the little 'X' button on the right of the search box doesn't show when you start typing in the box. Any way around this ? Perhaps i am using the wrong class on my <input> or <div>.
You need to add the little x yourself, it's not something that magically appears, unless you're using Internet Explorer.
Edit:
Since datatables creates this search box, You need to use fnInitComplete callback/function in datatables to target this search field, then you initialize this button.
You can see a working example here:
http://jsfiddle.net/d1zqsayh/20/
Edit:
You're referring to the behavior in Chrome for input type=search
Just change the input type from text to search and it will do this behavior in Chrome.
See here: http://jsfiddle.net/d1zqsayh/23/
Should your div class be dataTables_wrapper, not _filter, perhaps?
Related
I was asked to do something particular, and after trying I eventually found this site https://codepen.io/elmahdim/pen/hlmri from which I'm using the JQuery. I however don't have any knowledge of it so I only understand in parts. What I'm trying to do is upon marking a checkbox an input type="text" appears below it, so if I check 3 results, input type="text"creates 3 fields, etc, and if I uncheck a checkbox, the camp gets deleted.
I've tried to do it by adding
$("div bb")
{
$('<input type="text" id="textbox" style="width:170px;"/><span> CHF <span>');
}
after $(".hida").hide();but as I have no knowledge of JQuery it obviously didn't work and I don't really know what now. Also before that input, is it possible to add some sort of variable that is "attached" to the input so I can specificy what that input is for? Like if I check "Mercedes" in the checkbox, the input type="text" is created and above it the name "Mercedes" then if I check "BMW" it makes another input type="text" with BMW written above it?
Also wruting the code like this $("div bb") { for some reason disabled the $. Not sure why.
One solution:
create an empty element in your html where the input fields
should appear (e.g. <div id="textfields"></div>)
find the "on-checkbox-click-event-handler", which happens to be this line in the jquery: $('.mutliSelect input[type="checkbox"]').on('click', function() {
add code to the handler at the correct location, to append/delete a text box (difficult if you don't know jquery at all). The correct location is where jquery looks for the "checked-state" of the checkbox. Use $().append() to create the text field and $().remove() to remove on unchecking the checkbox. Should be something like $("#textfields").append("<input type='text'/>"); you will need to add a class to the input field to later address it when removing.
Working pen:
https://codepen.io/anon/pen/gRdmXj
Happy coding!
In my mini-project here, I need to hide the Shop button and the Content div when the user clicks on the textbox. I am attempting to do it using ng-hide.
For some reason there is an error with the module.
Error: error:nomod
Module Unavailable
I was able to partly get it working here, but I need to hide the elements when someone clicks on the textbox, before they start typing.
I need to get this working in Firefox only.
What am I missing?
jsFiddle
I've changed your code a bit. You can try this out:
<input type="text" name="hideBasicInfo" ng-click="hideBasicInfo = true" />
<div ng-hide="hideBasicInfo">
When someone's press the textbox I'll set the property hideBasicInfo true. (via ng-click)
I am making a small text editor, and for that, I would like a similar effect when a user selects some text as here: http://raphaelcruzeiro.github.io/jquery-notebook/
I was thinking of using the jQuery select event, but I can't seem to get it working on divs, only on input fields.
<!--<input type="text" class="writing-area" value="foo bar">-->
<div class="writing-area">foo bar</div>
<script>
$(".writing-area").select(function(){
alert("Text marked!");
});
</script>
You can see a demo here: http://jsfiddle.net/WL2nz/
The outcommented HTML works just fine, but the div version does not.
What am I doing wrong? Can select not be used on divs?
The MDN reference for the select event says that the HTML5 spec only defined the select event for inputs and textareas.
In accordance with jQuery docs, "this event is limited to fields and boxes".
From the jQuery page (http://api.jquery.com/select/) for the .select() function:
"The select event is sent to an element when the user makes a text selection inside it. This event is limited to fields and boxes."
To get the effect you are look for, have you considered onmouseover or onclick with a clickable element?
In addition, the Dojo Toolkit is one place where you can get a nice tooltip to craft something similar to what you are looking for: click here
All answers are correct, but the plugin you have linked to, does it this way:
After using the keyboard or the mouse (keyup,focus,mouseup...) the plugin checks if something is select. If something is selected the bubble pops up.
The code is here
we highlighted the color of div text when hovers it and remove the color while non-hover the text.
$(".writing-area").hover(function(){
$(".writing-area").css('color','red');
},function(){
$(".writing-area").css('color','');
});
http://jsfiddle.net/WL2nz/4/
I have a simple modal in bootstrap 3.0.2 and it has a 2 simple input type="text" I would like to clear it. I have seen example but they are for bootstrap 2 and don't work with my modal. Does any one know how to clear or reset this input text inside a modal when I click on the "reset" button.
-Thank you in advance.
Update: after using #davethecoder solution works like a charm, I still need help clearing 1 of the input text its under the date class:
<input id="#item" type="text" class="date-picker form-control" />
Any chance anyone knows how to clear this one?
-Thank you for helping me.
twitter bootstrap is a CSS framework for modelling response web layouts. If you are using jquery, the code to clear an element is $("#itemid").val('');
easiest would be to give each item a class, and set this value based on class, or as an alternative, you can loop through items of specific formid and reset to clear that way. Personally I would just do this class based, as this will essentially have the loop code per item, within the jquery framework.
I mentioned jquery here, because you had a jquery tag
Oh,just I found that the attribute id of your input element contains '#',it may lead to some unknown mistake. It is best to remove the '#' on your <input>.
If you are using jQuery, just use a function call like this to clear input:
$('#item').val('');
If you're not using jQuery, just use Javascript function like this:
document.getelementById('item').value = "";
I am having a jsp/html page.This page is accessed from two different links.
It is Menu1-->demo.html page and from Menu2-->demo.html page(In my case its jsp)
In the demo.html page I am having a text box which is disabled by default.
<input class="mytextinputtextField" type="text" id="countryOfOrigin"
readonly style="background-color:#DCDCDC" />
Now when the demo.html page is accessed from Menu2 , I am checking it using a hidden parameter and again enabling the text box and setting the focus on the text box.
if(document.getElementById("submenu_name").value=="PM")
{
document.getElementById("countryOfOrigin").focus();
}
The field is enable and the cursor is visible but if I type the text is not typed in the text box.
I need to click on the text box to enter the text.
I think it is because of the disabled and again enabling the field .
Please can any one help me to be able to type in the text box on the focus event from javascript.
I am not using JQuery and the browser is I.E 6
Try this :
document.getElementById("countryOfOrigin").removeAttribute('readOnly');
jQuery version :
jQuery('#countryOfOrigin').removeAttr('readOnly');
Have you tried removing the attribute?
document.getElementById("countryOfOrigin").Attributes.Remove("readonly");
or
document.getElementById("countryOfOrigin").removeAttribute("readonly");
Thank you for your help.
I hav found solution or may say work around.
I am pasting the code which may be useful for others
if(document.getElementById("submenu_name").value=="PM")
{
document.getElementById("countryOfOrigin").focus();
document.getElementById("countryOfOrigin").select();
}
Here is an unofficial solution, we have to use the setTimeout() function to delay the focus() execute time.
setTimeout(function() { document.getElementById('myInput').focus(); }, 10);
See http://www.mkyong.com/javascript/focus-is-not-working-in-ie-solution/