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">
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 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.
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);
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
This should be super simple. The first code block works, but when I wrap it in a function and attempt to call the function, it doesn't work.
This Works:
$(document).ready(function() {
$("#groups-image").hide();
$("#quiz-image").hide();
$("#members-image").hide();
});
This Doesn't Work:
$(document).ready(function() {
function hideatstart() {
$("#groups-image").hide();
$("#quiz-image").hide();
$("#members-image").hide();
}
hideatstart();
});
UPDATE: After looking at the accepted answer, I was able to get working code. It involved not having any spaces between the lines of code, which would allow p tags to be inserted. Best practice would be to remove the JQuery to a separate script, which I will do. The following code works:
$(document).ready(function() {
function hideatstart(){
$("#groups-image").hide();
$("#quiz-image").hide();
$("#members-image").hide();
}
hideatstart();
});
I inspected the HTML on your live site and found that your snippet is outputted like this:
<div class="art-postcontent">
<!-- article-content -->
<!-- [snipped] -->
<p><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><br />
<script type="text/javascript">
$(document).ready(function() {</p>
<p> function hideatstart() {</p>
<p> $("#groups-image").hide();
$("#quiz-image").hide();
$("#members-image").hide();
}</p>
<p> hideatstart();
});
</script></p>
<!-- [snipped] -->
</div>
As you can see, WordPress's wpautop filter wrapped your lines inside paragraphs.
If you need to inject a script somewhere, you better do it with a plugin or a theme function and not by pasting the code in a WordPress post or widget. All regular WordPress content types are escaped to prevent such possibly malicious injections. It seems like you're using a custom art post type, which normally gets a similar treatment. There are ways to prevent the content from being escaped, but you should seriously consider moving your script code somewhere else.