Develop Reference

parsley.js does not work for ckeditor textarea

I wrote code for my form with parsley.js validator, however it works fine except CKEditor textareas. Where can be the problem? Here is screenshot
Here is my code:
<script type="text/javascript">
CKEDITOR.on('instanceReady', function(){
$.each( CKEDITOR.instances, function(instance) {
CKEDITOR.instances[instance].on("change",function(e) {
for ( instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
});
});
});
</script>
<h2 class="heading">Description</h2>
<div class="controls">
<textarea name="description" id="description" required="" data-parsley-errors-container="#description-errors" data-parsley-required-message="Это поле необходимо!"></textarea>
</div>
<div style="margin-bottom: 20px;" id="description-errors"></div>
<script>
CKEDITOR.replace('description');
</script>
<h2 class="heading">Purpose</h2>
<div class="controls">
<textarea name="purpose" id="purpose" required="" data-parsley-errors-container="#purpose-errors" data-parsley-required-message="Это поле необходимо!"></textarea>
<div style="margin-bottom: 20px;" id="purpose-errors"></div><br><br>
<button type="submit" name="submit">Submit</button>
</div>
<script>
CKEDITOR.replace('purpose');
</script>

Your issue is related to the required attribute. After, this line:
CKEDITOR.on('instanceReady', function () {
you need to add such an attribute again, for each text area, because lost during CKEDITOR init phase (i.e.: CKEDITOR.replace('purpose');).
For a specific textarea you can write:
$('#description').attr('required', '');
For all the textareas belonging to the form:
$('form textarea').attr('required', '');
From your comment:
When the error shows in other inputs and when I type something it removes automatically. But in textareas it does not leave
In order to solve this part, on CKEDITOR change event, you need to trigger parsley validation. The below line does the trick:
$('form').parsley().validate();
The updated code (jsfiddle here):
CKEDITOR.on('instanceReady', function () {
$('form textarea').attr('required', '');
$.each(CKEDITOR.instances, function (instance) {
CKEDITOR.instances[instance].on("change", function (e) {
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
$('form').parsley().validate();
}
});
});
});

It's always so much easier to answer questions if you provide a minimal working example...
ckeditor hides the <textarea> and fills it in via Javascript.
Maybe the issue is that the error container is in the wrong place.
It's also very possible that ckeditor doesn't trigger the input event (not very well known). If that's the case, the following code should resolve the issue:
$('textarea').on('change', function() { $(this).trigger('input') })
Please update if this works or not.

Not possible to change button text via jQuery

Probaby a very simple question for you jQuery wizards, but I don't manage to change the innerHTML of a button via jQuery. I have the following Squarespace page: https://hethuisvandelingerie.squarespace.com/badmode/BM001 .
What I want to do is to change the text in the "Add to cart" button from English to Dutch. The button has the following HTML structure:
<div class="sqs-add-to-cart-button-wrapper" id="yui_3_17_2_1_1487777852612_138" style="visibility: visible;">
<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button " data-collection-id="5890a2ff2e69cf43f9dad6c5" data-item-id="589f1443c0302664f13c7656" data-original-label="Add To Cart" id="yui_3_17_2_1_1487777852612_146">
<div class="sqs-add-to-cart-button-inner">Add To Cart</div>
</div>
</div>
I use the following jQuery script to change the text in the button. I added the first part of code to see if my jQuery (of which I've injected the link to the API elsewhere) works. A "Yeah" alert is given, so this is not the issue. However, the button text does not seem to change :(.
<script>
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
$(window).load(function() {
$(".sqs-add-to-cart-button-inner").text("Voeg toe aan mandje");
});
</script>
jQuery guru's, help me out please!
Kr,
BarrieO

Use $(document).ready() in jQuery.
$(document).ready(function() {
$(".sqs-add-to-cart-button-inner").text("Voeg toe aan mandje");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sqs-add-to-cart-button-wrapper" id="yui_3_17_2_1_1487777852612_138" style="visibility: visible;">
<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button " data-collection-id="5890a2ff2e69cf43f9dad6c5" data-item-id="589f1443c0302664f13c7656" data-original-label="Add To Cart" id="yui_3_17_2_1_1487777852612_146">
<div class="sqs-add-to-cart-button-inner">Add To Cart</div>
</div>
</div>

Get the hidden input when clicking on textbox

i need a little help about how to do it..
I have done lot of search but haven't find it.. So please if someone can help me out.
I have this little code here:-
<div id="whats-new-content">
<div class="newtextbox">
<textarea class="mytextbox" id="myuniquetextbox" cols="50" rows="10" style="height: 50px;"></textarea>
</div>
<div id="whats-new-options" style="display: none;">
<input type="submit" name="aw-whats-new-submit" id="aw-whats-new-submit" value="Submit">
</div>
</div>
As you can see i added style="display: none;" in the div where is situated the submit button.
I don't have lot of knowledge in jQuery or javascript but i need a simple javascript code that will change the "display:none" to "display:block" when someone click on the textbox..
Please i need your help, thank you very much...

Another way to do this is:
$(function () {
$('#myuniquetextbox').click(function(e) {
$('#whats-new-options').css('display', 'block');
});
});

Try this
$("#myuniquetextbox").on("focus",function(){
$("#whats-new-options").show();
})

Try below code
$("#mytextbox").focus(function() {
// this is when textarea is focused and button should show
$("#whats-new-options").show();
});
​
$("#mytextbox").blur(function() {
// this is when textarea is not focused and button should hide
$("#whats-new-options").hide();
});​

Try using bellow
<script>
$("#myuniquetextbox").click(function(){
$("#aw-whats-new-submit").slideToggle();
});
</script>

$("#aw-whats-new-submit").hide();
$("#myuniquetextbox").click(function() {
$("#aw-whats-new-submit").show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="whats-new-content">
<div class="newtextbox">
<textarea class="mytextbox" id="myuniquetextbox" cols="50" rows="10" style="height: 50px;"></textarea>
</div>
<div id="whats-new-options" >
<input type="submit" name="aw-whats-new-submit" id="aw-whats-new-submit" value="Submit">
</div>
</div>

you can also do this
$(function () {
$('#myuniquetextbox').on('click',function(e) {
$('#whats-new-options').css('display', 'block');
});
});
Check your code here

Javascript "close button" not working

Today I tried to make the simpliest close button in javaScript. It unfortunately does not work. This is how it look like:
<div id="popup_bg">
<div id="popup_window">
<span id="popup_close">
</span>
</div>
</div>
and the js code is:
<script type=”text/javascript”>
$("#popup_close").click(function() {
$("#popup_bg").fadeOut();
event.stopPropagation();
});
</script>
I'd also like to make it apply to any of those "popups", so I'd probably change my it to something like $(this).parent().parent().fadeOut(); - is it possible to do so?
Thanks for help guys! :)
#EDIT
As none of Your solutions work I'll place my code literally :D Maybe You'll find some mistakes that makes it faulty:
<?php if(isset(errors['user'])) : ?>
<script type="text/javascript">
$(function()
{
$("#popup_close").on('click', function() {
$("#popup_background").fadeOut();
//event.stopPropagation();
});
});
</script>
<div id="popup_background" >
<div class="popup_window">
<span class="title">
error
</span>
<span class="message"><?php echo errors['user']; ?>
</span>
<span id="popup_close" class="button">OK</span>
</div>
</div>
<?php endif; ?>
I hope that will help You spot any errors. It displays correctly, I click on my "OK" span, nothing happens :p I hate js :D

I saw your code, the jquery part of the code is working..
Check here: Jsfiddle -> http://jsfiddle.net/Zahinize/7YD4D/13/
You should rewrite your conditional If statement like this,
<? ini_set('error_reporting', E_ALL); ?>
<script type="text/javascript">
$(function()
{
$("#popup_close").on('click', function() {
$("#popup_background").fadeOut();
//event.stopPropagation();
});
});
</script>
<div id="popup_background" >
<div class="popup_window">
<span class="title">
error
</span>
<span class="message">
<?php
if(isset(errors['user'])){
echo errors['user'];
}
?>
</span>
<span id="popup_close" class="button">OK</span>
</div>
</div>
set error_reporting at that the top..
See more here: http://php.net/manual/en/function.error-reporting.php
Maybe this would help, but frankly i haven't seen error handling like this: error['user'] anywhere.. you should see error handling for writing better code ;)

IDs must unique, you should use classes instead:
<div class="popup_bg">
<div class="popup_window">
<span class="popup_close"></span>
</div>
</div>
Then for selecting the target parent of the clicked element you can use closest method:
$(function() {
$(".popup_close").click(function(event) {
$(this).closest(".popup_bg").fadeOut();
// event.stopPropagation();
});
});
Note that in your code event is undefined you should pass the event object to your handler.

Add document.ready and/or use .on function
<script type=”text/javascript”>
$(function(){
$("#popup_close").on('click', function() {
$("#popup_bg").fadeOut();
event.stopPropagation();
});
});
</script>
Also, ID's may not repeat in your document, use other selector like class

If there are more than one popup better to use class instead of id.
Example.
$(function()
{
$(".popup_close").on('click',(function()
{
$(this).parents("div.popup_bg").fadeOut();
});
});
And html
<div class = "popup_bg">
<div class = "popup_window">
<span class = "popup_close"></span>
</div>
</div>

You need some content in your span or set height and with. Then you will be able to click on it and it will work.
Avoid tricks with parent().parent() this may break if you change your div structure.
As others have said use the jquery document ready (read a tutorial) and use classes not ids if you intend to reuse the code (read a CSS tutorial)...

How to do this box in Javascript?

I'm trying to do the following sort of thing in Javascript, where you click on the down arrow and it expands downward and displays options (I'll have some input fields and checkboxes and text and stuff in there).
Can anyone please help me out or point me in the right direction, I've tried google searching but I have no idea what they're even called in the Javascript world. "Javascript expanding box", "javascript drop down box", "javascript expanding modal dialog", etc. Nothing seems to hit.
Here's the example:
http://imageshack.us/f/810/examplebe.jpg/
There will be a submit button in the top section (not in the expand section), which will submit the options in the drop down menu as well as the options in the section near the submit button.
Thanks!

Set your markup something like this:
<div class="expandingBox" id="expandingBox">
<div id="expandingBoxContent">
//Content here
</div>
</div>
Expand
and in your CSS, the expandingBox class should be set to:
.expandingBox
{
height: <your initial box height here>
overflow: hidden;
// other styling here
}
Then to get it to expand, you can do something like:
$('#expandButton').bind('click', function(){
var contentHeight = $('#expandingBoxContent').height();
$('#expandingBox').animate({ height: contentHeight }, 1000);
}

a little demo. it may help you
HTML:
<input id="login_button" type="button" value="∨" />
<form name-"myForm" id="login_form" style="height:150px">
<div id="toggle" style="width:150px; height:100px;position:absolute;top:30px;left:20px;background:#9BCDFF;display:none;padding:10px">
<label for="name">Name:</label>
<input type="text" name="name" />
<label for="password">Password:</label>
<input type="text" class="password" />
</div>
<input type="submit" id="#submit" value="Submit" style="position:absolute; top:150px"/>
</form>
JQUERY:
$('#login_button').click(function(e) {
$('#toggle').slideToggle(1200,
function() {});
});
$('#submit').click(function() {
$('form[name=myForm]').submit(function() {
alert('form submit');
});
});

$('#toggleBtn').click(function(){ $("#toggleBox").toggle();});

If you're using jQuery, I think you might want to look at the jQuery UI implementation of the collapsible accordion.

THere is an inbuilt jquery effect 'SlideDown'. Check it here: http://api.jquery.com/slideDown

It should not be really difficult. You can use jQuery animation effects for that.
Some code example, just to give you direction:
// html
<div id="some-container">Click me!</div>
<div id="some-container-to-show">Hey, I'm appeared on screen!</div>
// js
$(function () {
$("#some-container-to-show").hide();
$("#some-container").live("click", function () {
$("#some-container-to-show").slideDown();
});
});