Here is my HTML code:
<div class="editable-select-holder">
<input type="text" name="position" id="position" value="${userInfoForm.position}">
<button type="button" class="editable-select-expander"></button>
<ul class="editable-select-options">
<c:forEach var="position" items="${positions}">
<li>${position.description}</li>
</c:forEach>
</ul>
</div>
and this is Jquery:
$(document).on('click', '.editable-select-expander', function () {
var $holder = $(this).parent();
$holder.toggleClass('editable-select-expanded');
$holder.on('click', 'li', function () {
var $t = $(this);
$holder.removeClass('editable-select-expanded');
$holder.find('input').val($t.text());
});
});
I want to exand list when I click on button or focus on input. The code I have provided above only works on button click. I need the same logic also on focus event. Any suggestions?
changed like this but still not working properly.
$(document).on("click",'.editable-select-holder', function() {
var $holder = $(this);
$holder.on('click','.editable-select-expander', function() {
$holder.toggleClass('editable-select-expanded');
});
$holder.on('click', 'li', function() {
var $t = $(this);
$holder.removeClass('editable-select-expanded');
$holder.find('input').val($t.text());
});
$holder.on('focus', 'input', function() {
$holder.addClass('editable-select-expanded');
});
});
I hope you can use this code
$( your input box id or class ).focusin(function() {
//your logic here
});
Related
Like the one i have highlighted in picture popup box appear in every chatbox i want it to appear only on selected chatbox
<script>
$(document).ready(function(){
function make_chat_dialog_box(to_user_id, to_user_name)
{
var modal_content = '<div id=user_dialog>..</div>';
$('#user_model_details').append(modal_content);
$(document).on("click", '.chat_message', function(e){
e.preventDefault();
var to_user_id = $(this).data('touserid');
$('.popupbox').css("display", "block");
})
}
});
</script>
Add id to your tag. and show popupbox only for that selected element.
Suppose you have textarea as a selector then your code should be.
<textarea class="popupbox" id="popupbox_ + to_user_id" ></textarea>
and in JS code
<script>
$(document).ready(function() {
function make_chat_dialog_box(to_user_id, to_user_name) {
var modal_content = "<div id=user_dialog>..</div>";
$("#user_model_details").append(modal_content);
}
$(document).on("click", ".chat_message", function(e) {
e.preventDefault();
var to_user_id = $(this).data("touserid");
console.log(to_user_id); /** Make sure it is correct */
$("#popupbox_"+to_user_id).css("display", "block");
});
});
</script>;
I have a sample code
On Html:
<div id="item-1-desc">ABC</div>
<div id="item-2-desc">DEF</div>
<div id="item-3-desc">XYZ</div>
And jquery:
$('div[id^=item-][id$=-desc]').hide().before('More');
$('a#toggle-desc').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
if($this.hasClass('see-more')){
$this.text('More');
} else {
$this.text('Close');
}
$('div[id^=item-][id$=-desc]').slideToggle(200);
});
When I click on more, it open all div(http://jsfiddle.net/3v25guz6). How to click only show a item desc ?
You have to target only the div which is next sibling of the clicked a so
$(this).next('div').slideToggle(200);
Also, id of an element must be unique, so for the dynamically added elements use the class to register the click handler
$('div[id^=item-][id$=-desc]').hide().before('More');
$('.see-more').click(function(e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
$this.text($this.hasClass('see-more') ? 'More' : 'Close');
$(this).next('div[id^=item-][id$=-desc]').slideToggle(200);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="item-1-desc">ABC</div>
<div id="item-2-desc">DEF</div>
<div id="item-3-desc">XYZ</div>
http://jsfiddle.net/3v25guz6/2/
$('div[id^=item-][id$=-desc]').hide().before('More');
$('a#toggle-desc').click(function (e) {
e.preventDefault();
var $this = $(this);
$this.toggleClass('see-more');
if ($this.hasClass('see-more')) {
$this.text('More');
} else {
$this.text('Close');
}
$this.next().slideToggle(200);
});
i have added a text area and buttons to a table dynamically
i want to add click event for this dynamically added buttons
How do i bind event to dynamically added element...
the script is shown here
<script type="text/javascript">
$(document).ready(function(){
$('#questType').change(function(){
var id=$('#questType option:selected').val();
var txt=$('#questType option:selected').text();
if(id=='singleType'){
document.getElementById('singleChoise').style.display='inline';
document.getElementById('multipleChoise').style.display='none'
}
else if(id=='multipleType'){
document.getElementById('multipleChoise').style.display='inline';
document.getElementById('singleChoise').style.display='none'
}
});
var cnt = 1;
$(".addRadAnsw").click(function(){
cnt++;
$('#tbl1 tr').last().after('<tr><td><input type="radio" name="singAnsw" value="answ'+cnt+'"/></td><td><textarea rows="5" cols="40" placeholder="this is answer'+cnt+'"></textarea><button class="addRadAnsw">ADD</button><button class="remRadAnsw">DELETE</button><br/><hr width="500px;"/></td></tr>');
return false;
});
$(".remRadAnsw").click(function(){
cnt--;
$('#tbl1 tr:last-child').remove();
return false;
});
var cnt1 = 1;
$(".addChkAnsw").click(function(){
cnt1++;
$('#tbl2 tr').last().after('<tr><td><input type="checkbox" name="multAnsw" value="answ'+cnt1+'"/></td><td><textarea rows="5" cols="40" placeholder="this is answer'+cnt1+'"></textarea><button class="addChkAnsw">ADD</button><button class="remChkAnsw">DELETE</button><br/><hr width="500px;"/></td></tr>');
return false;
});
$(".remChkAnsw").click(function(){
cnt1--;
$('#tbl2 tr:last-child').remove();
return false;
});
});
</script>
jQuery On
https://api.jquery.com/on/
$("selector").on("click",function(){
// action
});
Assuming your addRadAnsw and remRadAnsw buttons are added dynamically, this is how you would listen to them.
$('body').on('click', 'button.remRadAnsw', function(e) {
button = $(this);
button.text("I've been clicked!");
});
$('body').on('click', 'button.addRadAnsw', function(e) {
button = $(this);
button.text("I've been clicked!");
});
$('body').on('click', 'button.addChkAnsw', function(e) {
//Dynamic added button clicked
//Remove parent tablerow
$(this).parent().parent().remove();
});
you can try this also
$(function(){
$(document).on('click', 'button.remRadAnsw', function(e) {
$(this).text("Clicked!");
});
});
I have a jquery function to toggle "ReplyComment" div.
function addcommentdiv() {
$('.in').click(function () {
var $this = $(this),
$reply = $this.next('.ReplyComment');
var cevapladisplay = $reply.css('display');
$reply.toggle();
});
}
addcommentdiv();
$(document).ready(function () {
addcommentdiv();
});
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
addcommentdiv();
});
...
<ul class="chats">
<li class="in" >
blablabla
</li>
<div class="ReplyComment" id="ReplyComment">
blablabla
</div>
</ul>
This function sometimes work sometimes doesn't.Shortly not working smoothly.
I can't understand.(inside updatepanel and datalist)
It's possible that you are adding the click handlers multiple times. To avoid the issue completely, I would recommend using event delegation:
$(document).ready(function() {
$(document).on('click', '.in', function () {
var $this = $(this),
$reply = $this.next('.ReplyComment');
var cevapladisplay = $reply.css('display');
$reply.toggle();
});
});
This will prevent you from needing to rebind the events after every UpdatePanel refresh.
I have a jquery script which is supposed to show a content box when hovered over the button.. and the button class hovered is also turned on. When the mouse is hovered inside the button div that was just triggered to show up, the button should still retain its hover styles. But whenever the mouse is hovered off the .hovered class should also be removed. Currently, when you hover over the button, and hover off without hovering over the child elements, the .hovered class is still retained. This needs to be removed.
The HTML code is as follows:
<li>Login
<div class="login-content">
<form name="login-form" action="" method="post">
<input type="email" name="email" value="" placeholder="E-mail" />
<input type="password" name="password" value="" placeholder="Password" />
<input type="submit" name="login" value="Login" class="form-login" />
</form>
</div>
</li>
The jQuery code is as follows:
$(document).ready(function () {
$(".login-btn").hover(
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(".login-content").show();
$(this).addClass('hovered');
},
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(this).data('hoverTimeoutId', setTimeout(function () {
$(this).removeClass('hovered');
$(".login-content").hide();
} ,500));
});
$('.login-content').hover(
function(){
clearTimeout($(".login-btn").data('hoverTimeoutId'));
},
function(){
$(".login-content").hide();
$(".login-btn").removeClass('hovered');
});
});
The initial issue was that the context of this within a setTimeout function is not the element hovered. Instead, persist the context by first assigning it to a variable.:
$(document).ready(function () {
$(".login-btn").hover(
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(".login-content").show();
$(this).addClass('hovered');
},
function() {
var $this = $(this);
clearTimeout($this.data('hoverTimeoutId'));
$this.data('hoverTimeoutId', setTimeout(function () {
$this.removeClass('hovered');
$(".login-content").hide();
} ,500));
});
$('.login-content').hover(
function(){
clearTimeout($(".login-btn").data('hoverTimeoutId'));
},
function(){
$(".login-content").hide();
$(".login-btn").removeClass('hovered');
});
});
I am guessing you're losing $(this) scope inside the setTimeout function. Can you try this simple replacement and see if it has any effect?
$(".login-btn").hover(
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(".login-content").show();
$(this).addClass('hovered');
},
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(this).data('hoverTimeoutId', setTimeout(function () {
$(".hovered").removeClass('hovered'); // change here
$(".login-content").hide();
} ,500));
});
If you have multiple .login-btn on the page, this may not be the most elegant solution because it can cannibalize the other element's hover. If that's the case, you might try:
var $btn = 0;
$(".login-btn").hover(
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(".login-content").show();
$(this).addClass('hovered');
},
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$btn = $(this);
$(this).data('hoverTimeoutId', setTimeout(function () {
$btn.removeClass('hovered'); // change here
$(".login-content").hide();
} ,500));
});
Instead of using the .hover() which always triggers a mouseout event, you might want to give .mouseenter.() a try.
In one event you can clear active states and apply it to the current one.
var initVideos = function () {
var divs = $("ul li a");
// bind your hover event to the divs
divs.mouseenter(function () {
flashembed("videoArea", $(this).prop("href"));
divs.removeClass("active");
$(this).addClass("active");
});
};
// once all is loaded
$(window).load(function () {
initVideos();
});
demo: http://jsfiddle.net/tive/Ff7Mq/
Approach 2:
var btn = $(".login-btn"),
content = $(".login-content"),
triggers = btn.add(content);
triggers.mouseenter(function() {
content.show();
triggers.addClass('hovered');
});
content.mouseleave(function(){
$(this).hide(500);
btn.removeClass('hovered');
});
demo: http://jsfiddle.net/tive/GkVN3/