How to get original HTML back after it was changed - javascript

I am trying to get the original heading text to display after it was changed by jQuery, without having to write in both the markup and in the script.
My html starts with:
<div class="headings">
<h1>Original Heading</h1>
</div>
Then after a user makes their selection, the heading is changed with jQuery:
$('#userSelection').on('click', function() {
$('.headings h1').html('<h1>New Heading</h1>');
});
Currently I have it set so if a user clicks the reset button, the heading is changed back to the original with jQuery:
$('#resetBtn').on('click', function() {
$('.headings h1').html('<h1>Original Heading</h1>');
});
Is there a way to get back to the original heading without having to write it out in jQuery, since it's already in the original HTML?

Only way to get it back is to refresh the page, or once again write it back with jQuery.

Your current method inserts another <h1> into the existing <h1> which may not be what you're after. This first snippet demonstrates that. The nested <h1>'s appears to be what causes the font-size to increase when clicking. Interesting...
$('#userSelection').on('click', function() {
$('.headings h1').html('<h1>New Heading</h1>');
});
$('#resetBtn').on('click', function() {
$('.headings h1').html('<h1>Original Heading</h1>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="headings">
<h1>Original Heading</h1>
</div>
<div>
<input type="button" id="userSelection" value="userSelection">
<input type="button" id="resetBtn" value="resetBtn">
</div>
The second snippet shows using .empty().append() which does not cause nested <h1>'s.
$('#userSelection').on('click', function() {
$('.headings').empty().append('<h1>New Heading</h1>');
});
$('#resetBtn').on('click', function() {
$('.headings').empty().append('<h1>Original Heading</h1>');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="headings">
<h1>Original Heading</h1>
</div>
<div>
<input type="button" id="userSelection" value="userSelection">
<input type="button" id="resetBtn" value="resetBtn">
</div>

$(document).ready(function() {
var tempBucket = '';//temporary bucket to save our original
//if use localstorage can be like this one
// var tempBucket = localStorage.getItem('original') ?? '';
$('#selectBtn').click(function(){
tempBucket = $('.headings h1').html();
//if using localstorage
//localStorage.setItem('original', $('.headings h1').html());
$('.headings h1').html('New Headings');
});
$('#resetBtn').click(function(){
$('.headings h1').html(tempBucket);
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="headings">
<h1>Original Heading</h1>
</div>
<button id="selectBtn">select</button>
<button id="resetBtn">reset</button>
Hopefully can answer your question

Related

update panel and modal windows

I have my mainpage.aspx and then my mainDetails.ascx
/*As well as this javascript:*/
$(document).ready(function() {
$("#modal-close").click(function() {
$("#modal-content, #modal-background, #modal-close").toggleClass("active");
});
$("#keywordSelection").click(function() {
alert('hit');
});
});
/*mainDetails.ascx is an `asp:UpdatePanel` this contains the following javascript:*/
function jsModal() {
$("#keywordSearch").click(function() {
//alert('hi');
$("#modal-content, #modal-background, #modal-close").toggleClass("active");
//$("#modal-content").$("divTestVal").append.html
var html = $("#modal-content").next("#divTestVal").html();
alert(html);
});
}
<!-- mainpage.aspx is a web form that contains the following:-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="modal-background"></div>
<div id="modal-content">
<input type="button" id="modal-close" value="Close Modal Window" />
<br />
<div id="divTestVal">
[Append Values Here!]
</div>
<br />
<input type="button" id="keywordSelection" value="Selector!" />
</div>
What I need is a way to populate and read the values from the modal. Right now the html variable is returning null.
How do a get the [Append Values Here!] value from the modal?
I found out a way of doing it.
in the mainDetail.ascx javascript I added the following:
$('#modal-content div').each(function (index) {
alert($(this).text());
$(this).html("updated text now");
});
Not only does this loop through each div in the modal window on the mainpage.aspx, but it also updates the text values in the div.

Clearing input text field value with Jquery

I seem to be able to hide the resource container using
resource.parent().parent().hide();
but I don't understand why the input value is not clearing with
resource.parent().siblings('.resource-value').children('input').val('');
when I use
resource.parent().siblings('.resource-value') I get the parent of the input value but adding .children('input').val('') on top of that does nothing or if I add .children('input:text').val('')
I have very similar code for something else which works just fine, looked at other questions and not sure what I'm missing.
function removeResource(resource) {
'use strict';
//hide resource on screen
resource.parent().parent().hide();
//set resource text value to ''
resource.parent().siblings('.resource-value').children('input').val('');
}
(function($) {
'use strict';
$(function() {
$('#resources').on('click', '.remove-resource', function(evt) {
// Stop the anchor's default behavior
evt.preventDefault();
// Remove the image, toggle the anchors
removeResource($(this));
});
});
})(jQuery);
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div id="resources">
<div class="resource">
<div class="resource-value">
<input type="text" name="resources[]" value="1" />
</div>
<p class="hide-if-no-js"><a title="remove resource" href="javascript:;" class="remove-resource">remove resource</a > </p>
<!-- .hide-if-no-js -->
</div>
<div class="resource">
<div class="resource-value">
<input type="text" name="resources[]" value="2"/>
</div>
<p class="hide-if-no-js"><a title="remove resourcee" href="javascript:;" class="remove-resource">remove resource</a> </p>
<!-- .hide-if-no-js -->
</div>
</div>
</body>
<html/>
Tried your code and worked fine for me in terms of the actual value of the field clearing, though in inspector the HTML element still has the value attribute showing.
You can use
.attr('value','')
to clear that too http://jsfiddle.net/bvtg93dm
You just have to change the value witch jquery to set "" (so, empty).
input.attr('value','')
Try to log your sibling element with
Try to change your removeResource function to
function removeResource(resource) {
'use strict';
//hide resource on screen
var parent = resource.parent().parent();
parent.hide();
// log your element
console.log(parent.find('.resource-value input'));
// make sure you are getting an element you need
console.log(parent.siblings('.resource-value').childer('input').get(0);
//set resource text value to ''
parent.find('.resource-value input').val('');
}

Add a button that closes the popup with popup.js

I'm having troubles creating an exit button for the following script.
I'm using popup.js from http://docs.toddish.co.uk/popup/.
It sais that in order to do it we should use popup.close() from inside the object. But there are no examples and I can't get it to work. Does anyone have an idea?
JSFiddle link = http://jsfiddle.net/andrewallen817/bedhhu1o/3/
Html:
<a href=#txt class="popup" >Click here</a>
<div id="txt" style="display:none">
<h1>This is a title</h1>
<p>this is some text</p>
<button>close</button>
</div>
JS
$(function(){
$('.popup').popup();
});
I fixed it for you by looking at the doc. JSfiddle
$(function () {
$('.popup').popup({
afterOpen: function () {
var popup = this;
$('button').click(function () {
popup.close();
});
}
});
});
You might want to specify which button you want to give the popup.close() or else every button will have it.

if jQuery element hasClass() change different element link text

I am using a jQuery function to add/remove a class to the clicked element, which works just fine. However when that element is clicked, I am trying to change the text of an HTML link and I cannot seem to get it working. The HTML link is located within the <span> element further down the page.
When <button id="people"> hasClass('user_view_active') the HTML link should display "People" when <button id="jobs"> hasClass('user_view_active') the HTML link should display "Jobs".
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function(){
$('button').each(function(){
$(this).removeClass('user_view_active');
});
$(this).addClass('user_view_active');
});
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").attr("href").text(text.replace('People'));
}else{
$('.title').find("a").attr("href").text(text.replace('Jobs'));
}
});
</script>
</head>
<body>
<div id="container">
<header>
<img src="images/header-name.png" width="200px" style="display: inline; margin-bottom: -10px;"/>
<button id="jobs" class="user_view">Jobs</button>
<button id="people" class="user_view_active user_view">People</button>
<div class="header_search_wrapper">
<form action="" method="POST">
<textarea class="header_search" name="app_search" placeholder="Search people, jobs, or companies" style="width: 430px;"></textarea>
<input type="submit" class="share_btn" value="Search">
</form>
</div>
</header>
<div id="main" role="main">
<!--! begin app content -->
<div class="right_sidebar">
<span class="right_title">Connection Suggestions</title>
</div>
<span class="title">Recent Updates >> People</span>
To replace the text within a link you can use the jQuery .text() function. This function can also get the text value and also set the text value - as is shown in the example below -
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
This code would have to be wrapped in the callback function of the click event to work -
$(document).ready(function() {
$('button').click(function(){
$('button').removeClass('user_view_active');
$(this).addClass('user_view_active');
if ($('#people').hasClass('user_view_active')){
$('.title').find("a").text('People');
}else{
$('.title').find("a").text('Jobs');
}
});
});
Now each time the button is clicked, you can check for the existence of the user_view_active class on the #people element.
Okeydokey ?
Are you sure those are the right tags ?
<span class="right_title">Connection Suggestions</title>
Are you sure an <a> element inside a <button> element is a good idea?
<button id="jobs" class="user_view">Jobs</button>
role="main" is'nt a valid attribute, but will probably work anyway.
This just seems easier:
$(document).ready(function() {
$('button').on('click', function(){
$('button').removeClass('user_view_active');;
$(this).addClass('user_view_active');
$("a", ".title").text(this.id);
});
});
FIDDLE
Try this way:
$('#people').toggleClass('user_view_active').html($('#people').hasClass('user_view_active')?'People':'Jobs');

Is there any way to clone hardcoded Element or Set of Elements using jquery in runtime?

I need to know how to clone hard coded elements in runtime?
I have a hard coded input field. In run time is it possible to read that element and make it multiple(append) by user request. Is that possible with jquery or javascript.
Thanks in advance.
Using jQuery clone:
<div class="smallBox">
I'm a small box
<div class="smallInnerBox">I'm a small small inner box</div>
</div>
$('.smallBox').clone().insertAfter(".smallBox");
<div class="smallBox">
I'm a small box
<div class="smallInnerBox">I'm a small small inner box</div>
</div>
<div class="smallBox">
I'm a small box
<div class="smallInnerBox">I'm a small small inner box</div>
</div>
If you're looking for something a little more comprehensive:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
<ul id='itemList'>
<li>
<input class='input' type="text" value="some text"/>
<a class='clone' href='Javascript:;'>Clone</a>
</li>
</ul>
<a id='allValues' href='Javascript:;'>Get Values</a>
<script>
$('a.clone').live('click', function() {
var clonedItem = $(this).parent().clone();
clonedItem.find('.input').attr('value', 'cloned');
$('#itemList').append(clonedItem);
});
$('#allValues').click(function(){
var values = [];
$('.input').each(function(i, text){
values[i] = $(text).val();
});
alert('Values are: ' + values.join(', '));
});
</script>
</body>
</html>
What do you mean by "hardcoded"? is this what you need?
$(document).ready(function () {
$("#something").click(function(){
$("#yourform").append($("#yourinputfield"))
});
})
<div id="divElement">Hello</div>
<button onclick="javascript:cloneElement()">Clone Me</button>
function cloneElement()
{
$("#divElement").clone().appendTo("#divElement");
}
Or: http://jsfiddle.net/UFcTk/

Categories