We Keep Coding

Bootstrap custom popover doesn't appear on first click

Actually i'm tying to show a custom popover after the user press on an anchor then he can choose an item and i'd do some server operations after it.
The issue is that after i press the first time on the anchor nothing happen but if i press again the pooper will be shown.
Then i would hide the popover if the user press on the background.
Here is the function which i hire from the anchor
<script>
function pop(id) {
$("#" + id).popover({
html: true,
content: function () {
return $('#popover-content').html();
}
});
}
</script>
While here is the code of the popover that i'm trying to show
<li id="popover-content" class="list-group" style="display: none">
CHIUSO
RISOLTO
IN ATTESA
SCADUTO
</li>

Have you tried this jQuery script?
$(function() {
$('[data-toggle="popover"]').popover()
})
As shown here.
Tell us if it works.

The $().popover({...}) method registers the popover but does not show it yet. So the first exectuion of your pop(id) function will just register the popover on the element.
When you want to show the popover on click you have to also programmatically show it after you register it so your function should look like this.
function pop(id) {
// register the popover
$("#" + id).popover({
html: true,
content: function () {
return $('#popover-content').html();
}
});
// show the popover
$("#" + id).popover('show');
}

how to hide div class while textbox filled

How to hide div class using JavaScript while textbox is filled?
I want to hide class loadData while textbox(t1) is filled.
Example code:
<input type="text" name="t1" placeholder="search">
<div class="loadData">
// some content here....
</div>

window.onload = function () {
elements = document.getElementsByName("t1");
var divs = document.getElementsByClassName("loadData");
elements.onblur = function() { divs.style.visibility="hidden"; };
};

Use jQuery. Check the value of text field on keyup event and perform operation accordingly.
$('input[type="text"]').on('keyup', function() {
($.trim($(this).val()) != '') ? $('.loadData').hide() : $('.loadData').show();
})
FIDDLE

User jQuery's blur function.
<script>
$(function(){
$("[name=t1]").blur(function(){
if ($(this).val() == '') {
$(".loadData").hide();
}
});
})
</script>
Explanation:
You are calling a function on blur event of textbox.
It means user has filled the textbox and want to leave textbox.
In this function body, hide the div with class loadData.

add onblur="showdiv()" to input box and add this function in your javascript
function showdiv()
{
var a=document.getElementsByClassName('loadData');
a[0].style.visibility='hidden';
}

Detect change in an input field when selecting value from a box

I want to detect a change in the input field when i select a value from the box like in the picture below.
html:
<input type="text" class="AgeChangeInput" id="range"/>
js:(not working)
<script>
$(document).ready(function()
{
alert("Hello");
$("#range").bind('input', function()
{
alert("done");
});
});
</script>
I also tried live on functions but they didn;t work too.

Your date selection box should fire a change event, then you only need to capture it:
$(function () {
$('#range').change(function () {
...
});
});
If the selection box doesn't fire the event, you'll need to trick the dom. Something like:
$(document).ready(function () {
// Asuming your selection box opens on input click
$('#range').click(function () {
$('.special-box-class').click(fireRangeEvent);
});
// Now the firing function
function fireRangeEvent() {
...
}
});
Hope it works

Try to use this code
changeDate - This event is fired when the date is changed.
$('#range').datepicker().on('changeDate', function(ev) {
//example of condition
if (ev.date.valueOf() > checkout.date.valueOf()) {
//make action here
alert('Here');
}
});

How to Select / Highlight text box content on first click only

Please does anyone know the script that can help me highligh the content of a textfield on the first click
on the second click the selection / highligh should be cleared from the text box leavingg the insertion point.
Thank You in ADvance..

The script selects the text on the first click, but after every consecutive click the textarea will behave like a textarea always does. When the text area loses its focus due to the blur event and you click on it again, the text will be selected again.
Live Demo on JsFiddle
(function () {
var area = document.querySelector('#txt'),
clicked = false;
area.addEventListener('click', function () {
if (!clicked) {
area.select();
clicked = true;
}
});
area.addEventListener('blur', function () {
clicked = false;
});
})()
Because of addEventListener and querySelector the example is not fully cross browser compatible.

Try this: http://jsfiddle.net/4Hkhx/1/
$(document).ready(function(){
$('input').click(function(){
$(this).select();
});
});

function SelectText(sender) {
document.getElementById(sender.id).focus();
document.getElementById(sender.id).select();
}
<input type="text" id="tbTest" value="Test" onclick="SelectText(this)" />

How to hide a dom element after creating it on the fly with JQuery?

I am trying to build a form where users can add a text field by clicking on a "add option" button. They can also remove added fields by a "remove option" link created on the fly by Jquery, along with the text field.
JavaScript:
$(document).ready(function(){
$("#add_option").click(function()
{
var form = $("form");
var input_field = '<input type="text" />';
var delete_link = 'remove';
form.append(input_field + delete_link);
return false;
});
$("a").click(function()
{
alert('clicked');
return false;
});
});
When I click on the "add_option" button, a new text field and the "delete_link" appear. But when clicking on the "delete_link" created by JQuery, the browser follows the link instead of launching a pop-up displaying "clicked".
How do I hide a dom element after creating it on the fly with JQuery?

I'd use delegate because its uses less bubbling :
$(document).delegate("a", "click", function(){
alert('clicked');
});
EDIT , here is your code you need to change :
$(document).ready(function(){
$("#add_option").click(function(){
var form = $("form");
var input_field = '<input type="text" />';
input_field.addClass = "dynamic-texfield";
var delete_link = 'remove';
form.append(input_field + delete_link);
return false;
});
Then comes the delegate part :
$(document).delegate(".delete-trigger", "click", function(){
alert('ready to delete textfield with class' + $(".dynamic-texfield").attr("class"));
});

Try binding the handler for the <a> with "live"
$('a').live('click', function() { alert("clicked); });
You probably should qualify those <a> links with a class or something.

I don't get why you're using a <a> as a button to execute a function in jQuery. You have all the tools you need right in the framework to totally bypass well-worn traditions of HTML.
Just put a css cursor:pointer definition on the button you want to appear "clickable," add some text-decoration if that's your fancy, and then define your function with jQ:
$('.remove-button').live('click', function() {
$(this).parent().remove();
}