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>
Related
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" />
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 need specific jquery or js function to display onclick:
<div id="resultTab">
<input id="help_button" type="button" value="Full Info"/>
<div id="help">Table with data</div>
<input id="help_button" type="button" value="Full Info"/>
<div id="help">Table with data</div>
<input id="help_button" type="button" value="Full Info"/>
<div id="help">Table with data</div>
</div>
It can be repeated 50-100 times.
So when I click button it has to show only <div> which is written after that <button> not all <div>s
Note: all button and div's created by jquery so I can't give specific id to use in function.
Please help me to solve this problem. I'm totally stack, if its possible I want to display that <div> in the middle of page like popup window.
UPDATE: The function is working, but in this situation its not working, what can I do?
Don't use the same ID everywhere, ID need to be uniqe. I changed your ID's to Class
$('input.help_button').click(function () {
$(this).next(".help").toggle()
})
.help { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
$("button").on("click", function() {
$(this).next().show();
});
if you use toggle(), you can hide and show the div
$('input.help_button').click(function () {
$(this).next(".help").toggle()
})
.help { display: none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
<input class="help_button" type="button" value="Full Info">
<div class="help">Table with data</div>
You should not have the same ids attached to multiple elements. You can use next() to select he next element after the button and slideToggle() to show/hide the div:
$('input[type="button"]').on('click', function(){
$(this).next('.help').slideToggle();
});
.help{
display: none;
}
input[type='button']{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="resultTab">
<input id="help_button_1" type="button" value="Full Info">
<div id="help_1" class="help">Table with data</div>
<input id="help_button_2" type="button" value="Full Info">
<div id="help_2" class="help">Table with data</div>
<input id="help_button_3" type="button" value="Full Info">
<div id="help_3" class="help">Table with data</div>
</div>
I want to show and hide some div on click and I managed to achieve part of it (it shows divs and hide them when I click on corresponding buttons).
However, I don't know how to close all the already opened divs when I click on other buttons.
For example if I click on "add" button and it opens the corresponding div, and when I click on "edit" I want to open "edit" div and close "add" div.
My relevant HTML
<div id="controls">
<input type="button" class="addBtn" value="Add" id="add"/>
<input type="button" class="editBtn" value="Edit" id="edit"/>
<input type="button" class="viewBtn" value="View" id="view"/>
<input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
My JS:
$(document).ready(function(){
$("#add").click(function(){
$("#test1").slideToggle("fast");
});
$("#edit").click(function(){
$("#test2").slideToggle("fast");
});
$("#view").click(function(){
$("#test3").slideToggle("fast");
});
});
Thanks for suggestions and tips.
i guess this is the simplest thing you can do.. hope this helps you..
<div id="controls">
<input type="button" class="addBtn" value="Add" id="add"/>
<input type="button" class="editBtn" value="Edit" id="edit"/>
<input type="button" class="viewBtn" value="View" id="view"/>
<input type="button" class="deleteBtn" value="Delete" id="delete"/>
</div>
<div id="test1">test 1</div>
<div id="test2">test 2</div>
<div id="test3">test 3</div>
http://jsfiddle.net/alaskaz1864/VtLzB/1/
replace your jquery code with the following code
$(document).ready(function()
{
$("#add").click(function(){
$("#test1").show();
$("#test2,#test3").hide();
});
$("#edit").click(function(){
$("#test2").slideToggle("fast");
$("#test1,#test3").hide();
});
$("#view").click(function(){
$("#test3").slideToggle("fast");
$("#test1, #test2").hide();
});
});
You need to add a common class to those elements, to close them all before opening the required one. You can also put data attributes on the buttons to DRY up your code. Try this:
<div id="controls">
<input type="button" class="addBtn" data-rel="#test1" value="Add" id="add" />
<input type="button" class="editBtn" data-rel="#test2" value="Edit" id="edit" />
<input type="button" class="viewBtn" data-rel="#test3" value="View" id="view" />
<input type="button" class="deleteBtn" value="Delete" id="delete" />
</div>
<div id="test1" class="content">test 1</div>
<div id="test2" class="content">test 2</div>
<div id="test3" class="content">test 3</div>
$('#controls input').click(function() {
$('.content').slideUp('fast');
$($(this).data('rel')).slideDown('fast');
});
Example fiddle
Try to use attribute starts with selector to grab the similar elements, hide it after grabbing it then after that do your normal process,
$("#add").click(function(){
$('div[id^=test]').hide();
$("#test1").slideToggle("fast");
});
$("#edit").click(function(){
$('div[id^=test]').hide();
$("#test2").slideToggle("fast");
});
$("#view").click(function(){
$('div[id^=test]').hide();
$("#test3").slideToggle("fast");
});
DEMO
Even simpler,
$('[type=button]:not(#delete)').click(function(){
$('div[id^=test]').hide().eq($(this).index()).slideToggle("fast");
});
Special Note:
This code does not expect us to change the DOM structure by adding/hardcoding data-attribute.
DEMO
your jquery
$(document).ready(function(){
$("#add").click(function(){
$("div").not("#test1,#controls").hide();
$("#test1").slideToggle("fast");
});
$("#edit").click(function(){
$("div").not("#test2,#controls").hide();
$("#test2").slideToggle("fast");
});
$("#view").click(function(){
$("div").not("#test3,#controls").hide();
$("#test3").slideToggle("fast");
});
});
Demo
I am having quite a battle controlling tabs through a button click function. I want the user to go through tabs in order. Each tab has a different html form. So the buttons provide also a validation. But the main problem is the next & previous buttons are not functioning at all. How come the button is not changing tabs at all?
jQuery
<script type="text/javascript">
$(".nexttab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected + 1);
});
$(".backtab").click(function() {
var selected = $("#tabs").tabs("option", "selected");
$("#tabs").tabs("option", "selected", selected - 1);
});
</script>
HTML
<div id="convertThis">
<div id="tabs">
<div href="#a" rel="a" title="./images/icons/category1.png">Category 1</div>
<div href="#b" rel="b" title="./images/icons/category2.png">Category 2</div>
</div>
<div id="divs">
<div id="a">
<form action="" method="post">
CATEGORY 1 FORM CONTENT
<div class="tabController">
<div class="tabNext">
<input type="button" class="nexttab" value="Next >>" name="submit" id="submit" style="background: #EFEFEF; float:right;"/>
</div>
</div>
</form>
</div>
<div id="b">
<form action="" method="post" id="post2">
CATEGORY 2 FORM CONTENT
<div class="tabController">
<div class="tabBack">
<input type="button" class="backtab" value="<< Previous" name="submit2" id="submit2" style="background: #EFEFEF;"/>
</div>
<div class="tabNext">
<input type="button" class="nexttab" value="Next >>" name="submit" id="submit" style="background: #EFEFEF; float:right;"/>
</div>
</div>
</form>
</div>
</div>
</div>
Maybe because your buttons are of type "submit" and they force a refresh of the page? Try to change them to <input type="button" ... />
Also, get rid of the <a> tags around the buttons.
Use either a button <input type='button'> OR a link <a href='...'>text</a>, there's no point in having a link wrapping a button.