Develop Reference

JS - Unable to bind dynamic element to existing radio button

$(document).ready(function () {
debugger;
$('#IsThisTheQuestion_0').on('click', onChangeIsFire);
$('#IsThisTheQuestion_1').on('click', onChangeIsFire);
onChangeIsFire();
});
function onChangeIsFire()
{
if ( $("#IsThisTheQuestion_0" ).is(":checked") ) { //YES
onChangeIsFireYes()
}
if ( $("#IsThisTheQuestion_1" ).is(":checked") ) { //NO
onChangeIsFireNo()
}
}
function onChangeIsFireYes()
{
showHideFormField ("NextQuestion", false)
//show text
$('#IsThisTheQuestion').append(`<div id="myText" class="inLineText" style="margin-top: 20px; font-weight: bold;"> <span>{{ snippets["MyFirstText"] }}</span></div>`);
$("#NextQuestion").on('click',onChangeNextQuestion);
onChangeNextQuestion();
}
function onChangeIsFireNo()
{
showHideFormField ("NextQuestion", true)
$("#NextQuestion").on('click',onChangeNextQuestion);
onChangeNextQuestion();
// show/hide message
$("#IsThisTheQuestion_1").on("click", "#myText", function (){
debugger;
$(this).remove();
});
}
Hi
I have a powerportal website so the code inside double curly braces is liquid code, which basically contains the text.
A div '#myText' is dynamically created when radio button: IsThisTheQuestion is set to Yes (#IsThisTheQuestion_0).
The dynamic div should be removed when radio button: IsThisTheQuestion is set to No (#IsThisTheQuestion_1)
since '#myText' is a dynamic element, I am trying to bind it to the 'No' radio button. But the code below doesnt work... The element is not being removed
$("#IsThisTheQuestion_1").on("click", "#myText", function (){
debugger;
$(this).remove();
});
As the element has a class, I have been able remove "#myText" using either of the statments below
But this time understandably they are only removed when I click on the text itself.
How can I remove the div/text when I click No?
Any suggestions?
Thanks
$(document).on('click', '.inLineText', function(){//works when clicked on the text
$(".inLineText").remove();
});
$('body').on('click', '.inLineText', function(){//works when clicked on the text
$(".inLineText").remove();
});
$(document).on('click', '.inLineText', function(){//works when clicked on the text
$(".inLineText").remove();
});
$('body').on('click', '.inLineText', function(){//works when clicked on the text
$(".inLineText").remove();
});

Show a Div first and then Submit on second click of button in a form

I have a form with multiple divs with same names (full-width). They all are on the same level. One of them is hidden (with a class hide). What I want is that if I select Submit, it should not submit, first hide all the brother divs of the hidden div (in this case full-width) and unhide the one with the class hide.
Now when I press again, it should just submit the Form.
JSFiddle is here:- http://jsfiddle.net/xmqvx/2/

Your code had a couple issues:
You used event.preventDefault but passed event in as e - should be e.preventDefault
Your ID selector targeted an ID that didnt exist (changed to #submit-this)
The working code:
$("#submit-this").click(function (e) {
e.preventDefault();
if ($(".full-width").hasClass("hide")) {
$(".full-width").hide();
$(".full-width.hide").removeClass("hide").show();
} else {
alert("Submitting");
$("#this-form").submit();
}
});
http://jsfiddle.net/xmqvx/4/

You could also take advantage of JavaScript's closures like so, to avoid having your behavior be dependent on your UI:
$(document).ready(function () {
var alreadyClicked = false;
$("#submit-this").click(function (e) {
e.preventDefault();
if (alreadyClicked) {
$('#this-form').submit();
} else {
$('.full-width').hide();
$('.hide').show();
alreadyClicked = true;
}
});
});

Click on a div with JavaScript

On a website, when I click "Tchat" (in the header), the box containing the "Live Chat" (in the bottom right) opens.
I tried with :
Tchat
-
function showChat() {
$('#belvg-feedback').click());
}
or :
function showChat() {
$('#belvg-feedback').css({"margin-bottom":"0"});
}
Can you tell me how to do ?

Try using "trigger" function provided by JQuery
Pseudo-code:
$("#belvg-feedback").trigger( "click" );
Handle the click event like this
$("#belvg-feedback").click(function() {
//Do whatever is needed here.
});

I assume that belvg-feedback is the id of div that you want to see.
You can use show() in Jquery: http://api.jquery.com/show/
Initially assigns this css at div: display: none;
At this point you can change the function this way:
function showChat() {
$('#belvg-feedback').show();
}
To do so hide instead:
$('#belvg-feedback').hide();

You can show and hide by this..
Show:
function showChat() {
$('#belvg-feedback').show();
}
Hide:
function Hide() {
$('#belvg-feedback').hide();
}

Toggling button text in jquery

I have an HTML button created and I want to toggle the text that is displayed in the button between two text using Javascript/JQuery. How do I do this?
Currently, I have:
<button onclick="showAll();" class="collapse-classes">
<span class="button-text">Show</span>
</button>
The button starts off by displaying "Show" and then switch to "Hide" when clicked and then switch to "Show" when clicked again and onward. I tried changing the value of the tag but it doesn't change the text displayed. Can anyone help with the script? thanks

Don't use onclick. Just bind an event handler.
Here's something you can work with:
$('.collapse-classes').click(function() {
var $this = $(this);
$this.toggleClass('show');
if ($this.hasClass('show')) {
$this.text('Show');
} else {
$this.text('Hide');
}
});

Following your DOM tree
$('.collapse-classes').click(function() {
var span = $(this).find('span');
if(span.text() == "Show"){
span.text("Hide");
} else {
span.text("Show");
}
});

fold div on click

I want to fold down the div onclick event and on another click want to fold up the div
my jquery is following
$(".fold_reply").click(function() {
if ($('.reply').css('display', 'none')) {
$(".reply").show("fold", {}, 500);
}
else {
$(".reply").hide("fold", {}, 500);
}
});​
and the div I want to fold is having display:none at the initial point
In My reply tag
< div class="reply" style="display:none; " > at the initial reply is not shown
so when I click then div is fold down but on other div it is not fold up
Please help me

$(".fold_reply").click(function() {
$(".reply").toggle(500)
}
Toggle will show or hide the element depending on its current state, eliminating your if block.
Check this fiddle out for an example:
http://jsfiddle.net/z9rGz/3/

yes #levib answer is short and correct one to use. Another alternative is that you can use slideUp() and slideDown() functions.
$(".fold_reply").click(function() {
if ($('.reply').css('display', 'none')) {
$(".reply").slideDown("slow");
}
else {
$(".reply").slideUp("fast");
}
});​

You should use the jquery .toggle or jquery UI .toggle method which does just that.
But the error in your logic is the $('.reply').css('display', 'none'). This sets the display to none. It does not check if it is none...
If you had to use that code you should change it to
if ( $('.reply').css('display') === 'none') )

Use the jQueryUI version of toggle() since you seem to be using a jQuery UI effect
.toggle( effect [, options ] [, duration ] [, complete ] )
Reference: http://api.jqueryui.com/toggle/
$(".fold_reply").click(function() {
$(".reply").toggle("fold", 500);
})

$(".fold_reply").click(function() {
var style=$('.reply').css('display');
if (style=='none') {
$(".reply").show(500);
}
else {
$(".reply").hide(500);
}
});​
<input type="button" class='fold_reply' value="button">
<div class='reply'>
text<br/>text<br/>text<br/>text<br/>text
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Working Demo