Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to clone a div without its value. Everything I've tried so far copies the value as well.
Here is my jQuery function
$('#add_more').click(function(){
$('#div_to_clone).clone().insertBefore('#add_more').find('input').val('');
});
This seems to be working fine for me:
$('#add_more').click(function() {
$('#div_to_clone').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="div_to_clone">
<input type="text" />
</div>
Add more
Well, I recommend you changing your id to a class since the value of id attribute should be unique throughout the page. You might be getting the issue in some browser due to duplicate id.
$('#add_more').click(function() {
$('.div_to_clone:first').clone().insertBefore('#add_more').find('input').val('');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="div_to_clone">
<input type="text" />
</div>
Add more
Assuming that your html code is similar to this.
<div class="ContainerDiv">
<div id=ClonethisDiv><input class="InputTxtBox" type="text" /></div>
</div>
clone
Now,
$("body").on("click", "a", function() {
$("#ClonethisDiv").clone().appendTo(".ContainerDiv").find(".InputTxtBox").val("");
});
Hence on click, anchor tag u will able to get a copy of Div with Id='ClonethisDiv' and appended to the container Div.
Here while cloning(copy) input element with a class '.InputTxtBox', will be emptied and get copied. No worry! TextBox Values which already appended to container Div doesnot change.
Hope this will help you.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
I don't know if this will be a duplicate, but I've tried multiple scripts (not just in jQuery, but also in Javascript) to try to get the job done. Here's the HTML:
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>
And jQuery:
$('#togglebutton').click(function() {
$('text').toggle('slow');
});
Click me to try the Fiddle
I hope you may be able to find a solution. Thanks :D
use #test instead of test to select an id attribute in jquery
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>
Because you're selecting an ID, $('text') should be $('#text')
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="text">
I will disappear!
</p>
<button id="togglebutton">
Go!
</button>
You're missing the # sign for the text attribute.
$('#togglebutton').click(function() {
$('#text').toggle('slow');
});
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I am trying to display the data of a div tag on a href click, the id is dynamically made. But the div tag is not responding. The sequence of the code is as below. The file is the .tpl file.
function editPickUpAddress(divId)
{
("#pickupAddressForm_"+divId).show();
}
<a href style="float:right;margin-top:-20px;margin-right:100px;" onclick="editPickUpAddress({$item.profile_id});">Edit</a>
<div id="pickupAddressForm_{$item.profile_id}" style="display:none">
//some content to display
</div>
After cleaning up your snippet and including jQuery, the code works as intended. Also note the href="#" which prevents the anchor tag from navigating to another page.
function editPickUpAddress(divId) {
$("#pickupAddressForm_" + divId).show();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Edit
<div id="pickupAddressForm_1" style="display:none">
//some content to display
</div>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 6 years ago.
Improve this question
I have the following in HTML code:
<section id="main-content">
<header>
<h1 id="page-title">Why Are There No Arab Democracies?</h1>
</header>
To retrieve the contents of page-title, I've tried to use, among others, the following:
document.getElementById("page-title")[0].InnerText
document.getElementsByTagName("h1")[0].getElementById("page-title")[0].InnerText
Each time I get an error.
[0] is used when you are grabbing multiple elements & you want to choose the first element from the list.
Eg: If your page has multiple <p> and you do a getElementByTagName('p') then you need to use [0] to access first element in the list of all captured elements.
<p>Hello</p><p>hi</p>
then
alert(document.getElementsByTagName("P")[0].innerHTML); ## this alerts "Hello"
Answer to your question:
alert(document.getElementById('page-title').innerHTML);
<section id="main-content">
<header>
<h1 id="page-title">Why Are There No Arab Democracies?</h1>
</header>
</section>
Use document.getElementById(); like this instead. You also should use .textContent to find the text of the element.
The reason you do not have to use [0] when finding elements by id is because getElementById returns one element because there should only be one element in your HTML with a named id.
alert(document.getElementById("page-title").textContent);
<section id="main-content">
<header>
<h1 id="page-title">Why Are There No Arab Democracies?</h1>
</header>
</section>
document.getElementById("page-title").innerText
you're only grabbing one element, so no need for the [0]
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Closed 6 years ago.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Improve this question
I've tried working with this but I think it is a problem with the jquery, my cloud9 thing says that '$ is not defined'
Here is my code: https://jsfiddle.net/qLuvsy9y/6/
Another example: http://jsfiddle.net/5udtC/6913/
<div class="wanted"> <!-- Toggle Lowercase -->
<label class="input-toggle">
<input type="checkbox" id="isAgeSelected" checked>
<span></span>
</label>
</div>
<p> Upper Lower Case Mix</p>
<div class="hide">
<div id="txtAge" style="display:none">
<div class="wanted"> <!-- Toggle Uppercase -->
<label class="input-toggle">
<input type="checkbox" id="uppercase" checked>
<span id="randomString"></span>
</label>
<p id="test1">Uppercase</p>
</div>
Jquery
$('#isAgeSelected').change(function() {
$("#hide").toggle(this.checked);
});
if you cloud9 "thing" is saying $ is not defined then you are either not including the jquery library in your document or not wrapping your code in a document ready statement and the browser is trying to execute code too early.
you need to include the jquery library: either from a local file - such as:
<script src="js/jquery-2.1.1.js"></script>
or from a CDN - such as:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and then you need to wrap the jquery in a document ready statement to ensure that the library has loaded before tying to execute jquery commands:
$(document).ready(function(){
$('#isAgeSelected').change(function() {
$("#hide").toggle(this.checked);
});
});
and then you have a div with a class of "hide", but you are attempting to modify an element with an ID of "hide" in your code. These need to be the same:
$("#hide").toggle(this.checked);
should be
$(".hide").toggle(this.checked);
or change the div to be:
<div id="hide">
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I have following html structure
<a id="myBtn" class="ui-link">
<span class="number"> </span>
<span class="button "> </span>
</a>
I want dynamically to insert some content into <span class="number">
var content = 99;
$('number').html(content);
but nothing change.
So what I need to do insert value into span that resulted node looks like this
<span class="number">99</span>
You are not using . to get class selector. Use $('.number') instead of $('number')
$('.number').html(content);
OR
$('.number').text(content);
insert text using class
var content = 99;
$('.number').html(content);
Try this:
$('.number').html(content);
You are referring to a wrong element. You can also do this:
$('.number').text(content);