I like to know how to get value from element (using click event) triggered in focus-blur event. I create icon picker which like jQuery datepicker. Here the code, but when I click the icon, date picker element hide without give the value.
PHP code
<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/>
<div id="iconPicker" class="iconpicker dropdown-menu">
<div class="iconpicker-wrapper">
<table class="dt-icons">
<?php
foreach (array_chunk($icons, 5, true) as $icon_cunk) {
echo '<tr>';
foreach($icon_cunk as $key => $ico) {
echo '<td data-value="'. $key .'"><i class="' . $key .'"></i></td>';
}
echo '</tr>';
}
?>
</table>
</div>
</div>
Javascript
$("#contentIcon").keypress(function (e) {
e.preventDefault();
});
$(document).on('click', '#iconPicker table.dt-icons td', function () {
$('#contentIcon').empty();
var _dtself = $(this);
document.getElementById("contentIcon").value = _dtself.data('value');
});
$('#contentIcon').focus(function() {
$('#iconPicker').show();
}).blur(function() {
$('#iconPicker').hide();
});
Update
#iconPicker
is a hidden (display: none) element, used to choose icon. It will be shown when user focus on #contentIcon
input field and will be hidden back when blur event triggered. If I remove $('#iconPicker').hide();
in blur
even handler part, then (I format this code, thanks to @Reddy)
$(document).on('click', '#iconPicker table.dt-icons td', function () {
$("#contentIcon").val($(this).data('value'));
});
can be triggered and the value placed to #contentIcon
input field. But, #iconPicker
not hidden back. If I used $('#iconPicker').hide();
in click
event handler, the #iconPicker
will not hide if user not choose icon.
update
here the example jsfiddle.net
I solve this problem by implement @CMS' answer. With some modification here the codes.
PHP's
<input id="contentIcon" class="form-control" type="text" name="content_icon" placeholder="pilih icon"/>
<div id="iconPicker" class="iconpicker dropdown-menu">
<div class="iconpicker-wrapper">
<table class="dt-icons">
<?php
$a = 0;
foreach (array_chunk($icons, 5, true) as $icon_cunk) {
echo '<tr>';
foreach($icon_cunk as $key => $ico) {
if ($a == 0) {
echo '<td><a class="action-placement choosed-icon" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>';
}else {
echo '<td><a class="action-placement" data-value="'. $key .'"><i class="icon-placement ' . $key .'"></i></a></td>';
}
$a++;
}
echo '</tr>';
}
?>
</table>
</div>
</div>
Javascript's
$(document).on('keypress keydown', '#contentIcon', function (e) {
e.preventDefault();
});
document.onclick = function (e) {
e = e || window.event;
var element = e.target || e.srcElement;
if (element.id !== "contentIcon" && element.tagName !== "A" && element.className !== "action-placement"
&& element.tagName !== "I" && element.className !== "icon-placement") {
$('#iconPicker').hide();
}
};
$(document).on('click', '#iconPicker table.dt-icons td a', function () {
$(".choosed-icon").removeClass("choosed-icon");
$(this).attr("class", "choosed-icon");
$("#contentIcon").val($(this).data('value'));
});
$('#contentIcon').on('click', function () {
$('#iconPicker').show();
$('#iconPicker').focus();
});
Here the demo.