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.
Related
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
I'm using Semantic UI 2.1 and I have a problem. I have three slider checkboxes in my page. They all have the same class and I can initialize them all at once. They each contain a data-* attribute that I need to send to the server with AJAX calls.
Here's the problem:
After the first time an AJAX call is finished, the events for checkbox no longer work. I know that the events are bound to the DOM and with the change of DOM they won't update but is there any way around it?
Here's a very simple version of my page:
<html>
<body id="body">
<!-- First Element -->
<div class="ui fitted slider checkbox comment">
<input data-status="0" type="checkbox"> <label></label>
</div>
<!-- Second Element -->
<div class="ui fitted slider checkbox comment">
<input data-status="2" type="checkbox"> <label></label>
</div>
<!-- Third Element -->
<div class="ui fitted slider checkbox comment">
<input data-status="3" type="checkbox"> <label></label>
</div>
<button class="button-action">Do Stuff</button>
</body>
<script>
$('.checkbox.comment').checkbox().checkbox({
onChecked: function () {
// This is only called before ajax reload, after ajax, it just won't
console.log("onChecked called");
},
onUnchecked: function () {
// This too is only called before ajax reload
console.log("onUnchecked called");
}
});
$(document).delegate('.button-action', 'click', function () {
$.ajax({
// Noraml ajax parameters
})
.done(function (data) {
if (data.success) {
// Reload
$('#body').load(document.URL + ' #body');
}
});
});
</script>
<html>
You can try to put your checkbox event listener inside a function and call that function each time it reload your page or when you make changes in the document DOM. I've attached a sample code below for reference.
function Checkbox_eventlistener(){
$('.checkbox.comment').checkbox().checkbox({
onChecked: function () {
// This is only called before ajax reload, after ajax, it just won't
console.log("onChecked called");
},
onUnchecked: function () {
// This too is only called before ajax reload
console.log("onUnchecked called");
}
});
}
$(document).delegate('.button-action', 'click', function () {
$.ajax({
// Noraml ajax parameters
})
.done(function (data) {
if (data.success) {
// Reload
$('#body').load(document.URL + ' #body');
Checkbox_eventlistener();
}
});
});
$(function(){
Checkbox_eventlistener();
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<!-- First Element -->
<div class="ui fitted slider checkbox comment">
<input data-status="0" type="checkbox"> <label></label>
</div>
<!-- Second Element -->
<div class="ui fitted slider checkbox comment">
<input data-status="2" type="checkbox"> <label></label>
</div>
<!-- Third Element -->
<div class="ui fitted slider checkbox comment">
<input data-status="3" type="checkbox"> <label></label>
</div>
<button class="button-action">Do Stuff</button>
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('');
}
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');
I have this code:
<div class="item">
<div class="hidden">44</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
<script type="text/javascript">
$(document).ready(function () {
$('#btnAddCommentForAnswer').click(function () {
alert(XXX);
});
});
</script>
</div>
<div class="item">
<div class="hidden">12</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
<script type="text/javascript">
$(document).ready(function () {
$('#btnAddCommentForAnswer').click(function () {
alert(XXX)
});
});
</script>
</div>
what code should I put at XXX to get the content of the div with class=hidden when i press the button at the same div with class=item?
If you click the first button you should get 44, and for clicking the second button you get 12.
id's are meant to be unique; you may wish to consider changing the id to a class.
With that in place, you could use a script like the following to achieve what you want:
$(document).ready(function() {
$('.btnAddCommentForAnswer').click(function() {
alert($(this).siblings('.hidden').text());
});
});
Here's a JSFiddle example: JSFiddle
Also, you don't need to have two script tags in your script! This one script wrapped in <script> tags is all that is necessary :)
Haven't tried but this should work:
$(this).closest('div').text()
You need not repeat the javascript code multiple times. Also, you cannot use id in jquery as the buttons have same id.
Here is the jsfiddle http://jsfiddle.net/t8XJZ/ which might solve your problem.
maybe this is more useful for you...
jquery:
$(document).ready(function () {
$('.item').each(function(){
$(this).find("#btnAddCommentForAnswer").click(function () {
alert($(this).prev(".hidden").text())
});
});
});
html:
<div class="item">
<div class="hidden">44</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
</div>
<div class="item">
<div class="hidden">12</div>
<input type="submit" id="btnAddCommentForAnswer" value="Add Comment" />
</div>