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>;
Related
I have the following example:
https://codepen.io/baidoc/pen/LYVvOZq
jQuery(function ($) {
$(".box").click(function() {
$(".box").removeClass("active");
$(this).addClass("active");
$(".boxContent").removeClass("show-content");
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
});
});
2 Boxes, by default deactivated (hidden), and only once clicked, the content will be shown.
What I'm trying to do: when I click again on the box, it should hide the box (display:none)
I've tried with toggle function, but somehow it doesn't seem to work. What alternative do I have?
What about this?
jQuery(function ($) {
$(".box").click(function() {
var currentActive = $(this).hasClass("active");
$(".boxContent").removeClass("show-content");
$(".box").removeClass("active");
if (!currentActive){
$(this).addClass("active");
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
}
});
});
Try this below :
jQuery(function ($) {
$(".box").click(function() {
$(".box").removeClass("active");
$(this).addClass("active");
if($(".boxContent").hasClass("show-content")){
$(".boxContent").removeClass("show-content");
}else{
var target = $(this).attr("target");
$(".boxContent_" + target).addClass("show-content");
};
});
});
I have modal and drop down input..
when Drop Down click text in button drop-down has append text into text field..
if input first time success, no problem, but..
if modal close and open modal again, when drop down click, value in input field double..
JS:
$("#test").on("click", 'td', function() {
var usr = $(this).text();
$("#s").val(function() {
return this.value + usr;
});
});
$("#test").on("click", 'td', function() {
var usr = $(this).text();
if($("#s").val()){
$("#s").reset();
}
$("#s").val(function() {
return this.value + usr;
});
});
Here is the fiddle for changing the label's value by clicking on it.
But i don't want to do it while i click on the edit (href)
I just want to click on the name and change it to textbox and while i take the mouse outside it should change back to label
How can i do this ?
Here's the jquery code i have
$(document).ready(function() {
$('a.edit').click(function () {
var dad = $(this).parent().parent();
dad.find('label').hide();
dad.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
});
How about something like this. Demo
$(document).ready(function() {
$('.control-label').click(function () {
$(this).hide();
$(this).siblings('.edit-input').show();
});
$('.edit-input').focusout(function() {
$(this).hide();
$(this).siblings('.control-label').text($(this).val()).show();
});
});
You could try it with this modified version of the fiddle:
$(document).ready(function() {
$('.control-label').click(function () {
$(this).hide();
var dad = $(this).parent();
dad.find('input[type="text"]').show().focus();
});
$('input[type=text]').focusout(function() {
var dad = $(this).parent();
$(this).hide();
dad.find('label').text(this.value).show();
});
});
It doesn´t set the default value that was in the label before though.
Just change the target of your click function from:
$('a.edit').click(function () {
to
$('.text-info').click(function () {
You could also add a hover function if you want the input to be hidden on mouseout rather than when clicking outside. For example:
$('input[type=text]').hover(function () {
}, function () {
var dad = $(this).parent();
$(this).hide();
dad.find('label').show();
});
Here your adjusted fiddle.
I have written a script that is supposed to render text (later a partial view) inside a div on click. I detect if div is visible or not and if not, I add text on click and make the div visible. This part works perfectly. When clicked and the div is visible I want to remove what has been added so that it wont multiply if I click it multiple times.
I get both alert - so detection of div visibility works but the text is not removed and it multiplies if I click it many times.
Here is my code - can you tell me what i am doing wrong?
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(this).next(".content");
if (content.is(":hidden")) {
content.append("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.next("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>
You probably want to use .find() instead of .next() when removing.
Use .html() instead of .append()
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(this).next(".content");
if (content.is(":hidden")) {
content.html("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.find("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>
Edit : - use .find() instead of .next() as render-object is child of content and not sibling
use .find instead of .next and use .html instead of .append
<script language="javascript">
$(document).ready(function () {
$(".content").hide();
$(".heading").click(function () {
var id = $(this).attr("id");
var content = $(".content");
if (content.is(":hidden")) {
content.html("<p id='render-object'>Testing rendering on click</p>");
alert('Content is opening');
}
else if (content.is(":visible")) {
content.find("#render-object").remove();
alert('Content is closing');
}
content.slideToggle(100);
});
});
</script>
I have index page it should show my div with id myajaxdiv how to hide it when a user click n every where in the page? this code will hide it even in index page without any click.
$(document).click(function() {
$("#myajaxdiv").css({'display':'none'});
});
my div is empty and with ajax I will make it full
html:
<div class="well sidebar-nav">
<div id="myajaxdiv" >
</div>
and in ready function I have ajax:
$.ajax({
type:'POST',
url:'news.php',
success:function(data){
var query ='';
var mycontent = 'تازه ها<hr/>';
$('.queryForm').hide(300);
$('.message').html('');
for(i=0;i<data.length;i++) {
query = data[i];
mycontent += '<ul class="starred-queries"><li class="question">' + query.ques + '</li>';
mycontent += '<li class="answer">' + query.answer + '</ul>';
}
$('#myajaxdiv, .well #myajaxdiv').html(mycontent);
}
});
To hide the div when an element is clicked, you could do the following (ie. for class button):
$('.button').click(function() {
$('#myajaxdiv').hide();
});
$(document).ready(function() {
$('.button').click(function() {
$("#myajaxdiv").css('display','none');
}) });
Try this:
$(".button").click(function(){
$("#myajaxdiv").hide();
})