How can I check if a div is focused the same way that I can check if an input is focused in Firefox? See snippet.
$('.element').on('focus', function(e) {
if( $('.element').is(':focus') ) console.log('Focused!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" class="element">Click here</div>
<input type="text" class="element" value="Click here" />
This seems to do it. Anyone has a better solution?
$('.element').on('focus', function(e) {
if( $(document.activeElement).is('.element') ) console.log('Focused!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" class="element">Click here</div>
<input type="text" class="element" value="Click here" />
Tested in firefox
$('.element').on('focus', function(e) {
console.log('Focused!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contenteditable="true" class="element">Click here</div>
<input type="text" class="element" value="Click here" />
Related
When I click submit and try to get the text from the textarea, I am getting blank. I don't know why.
function textSubmit() {
var text = $("#noise").val();
console.log(text);
console.log("here");
var htmlText = $(text);
console.log(htmlText);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<form>
<input type="text" id="Title" placeholder="Text Title">
<br>
<br>
<textarea id="noise" name="noise" class="widgEditor nothing"></textarea>
<input type="button" value="Submit" onclick="textSubmit()" />
</form>
</div>
</div>
Any ideas why? I can't figure it out
im using the following text editor http://www.themaninblue.com/experiment/widgEditor/
i ended up using another text editor, https://github.com/tovic/rich-text-editor
thank you for the help.
You're lacking .text() in your code. Take a look:
function textSubmit() {
var text = $("#noise").val();
console.log(text);
console.log("here");
var htmlText = $(text).text();
console.log(htmlText);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="col-lg-12">
<form>
<input type="text" id="Title" placeholder="Text Title">
<br>
<br>
<textarea id="noise" name="noise" class="widgEditor nothing"><strong>sajdhas</strong></textarea>
<input type="button" value="Submit" onclick="textSubmit()" />
</form>
</div>
</div>
Im trying it with laravel. On button click I need to display the same div .
My code:
<h6>Other features </h6>
<div id="add1">
<input type="text" name="selprice" />
<input type="submit" value="+" id="add">
</div>
This is my html code.Here,when I click the button**(ie.,+)** it should show up the same div(ie add1).
Script code:
<script type="text/javascript">
$(document).ready(function () {
$("#add").click(function () {
$("#add1").show();
});
});
</script>
This is what I have tried.
if you are cloning div use class instead of id.
use this context to get the click element
use append to add the cloned div to container
$(document).ready(function() {
$(document).on("click",".add",function() {
$("#container").append($(this).parent(".add1").clone());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" class="add">
</div>
</div>
Update
$(document).ready(function() {
$(document).on("click", ".add", function() {
var clone = '<div class="add1"><input type="text" name="selprice" /><input type="submit" value="+" class="add"></div>';
$("#container").append(clone);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id=container>
<div class="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" class="add">
</div>
</div>
Here you go with the solution https://jsfiddle.net/nuu4ofwu/2/
var cnt = 1;
$(document).on('click', 'input[type=submit]', function(){
cnt++;
var div = $(this).parent().clone();
$('body').append(div);
$('div:last-child').attr('id', 'add' + cnt);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="add1">
<h6>Other features </h6>
<input type="text" name="selprice" />
<input type="submit" value="+" id="add" />
</div>
You should define another div as a template:
HTML:
<div id="template" style="display:none;">
<div id="add_2">
<h6>Other features</h6>
<input type="text" name="selprice" />
<input type="submit" value="+" id="add_button_number"></div>
</div>
</div>
Javascript:
<script>
$('#add').click(function(){
var str = $('#add_2').html();
$('#add1').after(str);
})
</script>
I have this code and i want to alert the value of "first div" when i click the button on the first object and "second div" when i click the button on the 2nd object. .
How will i do it ? thanks :)
$(document).ready(function(e) {
$('.clickme').click(function() {
var selected = $(this).closest('.rel-wrap').find('.my-div').text;
alert(selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="main-wrapper">
<div class="rel-wrap">
<input type="button" class="clickme" value="click me">
<div class="my-div">
first div
</div>
</div>
<div class="rel-wrap">
<input type="button" class="clickme" value="click me">
<div class="my-div">
second div
</div>
</div>
To get innerText of an element you need to use text() method, not the property
You can use next(), no need of traversing to the parent to get the interested element
Demo
$(document).ready(function(e) {
$('.clickme').click(function() {
var selected = $(this).next('.my-div').text();
alert(selected);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="main-wrapper">
<div class="rel-wrap">
<input type="button" class="clickme" value="click me">
<div class="my-div">
first div
</div>
</div>
<div class="rel-wrap">
<input type="button" class="clickme" value="click me">
<div class="my-div">
second div
</div>
</div>
</div>
I don't know how should I make a question to ask all of you , but I will try to explain. My question is that I would like to show element with which I have hidden in CSS , in my code there are same class container and result class
My expectation when I focus on the text 1 it should be shown only result of text 1 and text 2 will not make an action.
$('.examples').focus(function() {
$('div.example').show();
$(document).bind('focusin.example click.example',function(e) {
if ($(e.target).closest('.example, .examples').length) return;
$(document).unbind('.example');
$('div.example').fadeOut('medium');
});
});
$('div.example').hide();
.example{
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<p>
<label for="example">Text 1:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>reuslt</p>
</div>
</p>
<br />
<label for="example">Text2:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>result</p>
</div>
You html has a div in a p element which is not value, so use div instead of p as the container, then you need to show the next div.example of the focused input so
$('.examples').focus(function() {
$(this).next('div.example').show();
$(document).bind('focusin.example click.example',function(e) {
if ($(e.target).closest('.example, .examples').length) return;
$(document).unbind('.example');
$('div.example').fadeOut('medium');
});
});
$('div.example').hide();
.example{
background: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div>
<label for="example">Text 1:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>reuslt</p>
</div>
</div>
<br />
<label for="example">Text2:</label>
<input class="examples" name="example" type="text" maxlength="100" />
<div class="example">
<p>result</p>
</div>
I am stuck with the function which have to do if input has class 'inerror' then div next to it should appear, but when I am running the function it is displaying all the div. Is there is solution for it without using each function. here is my code
<head>
<script type="text/javascript">
$(function(){
if($('input').hasClass('inerror')){
$('input', this).next().show();
}
})
</script>
<style>
.inerror{border:solid 1px #F00}
.error{ display:none}
</style>
</head>
<body>
<input type="button" value="submit" />
<div class="error">error</div> <br />
<input type="button" value="submit" />
<div class="error">error</div> <br />
<input type="button" class="inerror" value="submit"/>
<div class="error">error</div> <br />
<input type="button" value="submit"/>
<div class="error">error</div> <br />
</body>
$('input', this).next().show()
This matches the next sibling of all <input> elements, regardless of the check before it.
Try this instead:
$("input.inerror").next().show();