So, I have an javascript like this:
$(document).on("turbolinks:load", function() {
$('#client_phone').mask('(00)00000-0000');
});
It works only for the first element, when I click on "add new fields", the mask doesn't apply. So I tried using cocoon callbacks, like this:
$(document).on('turbolinks:load', function() {
$('#phone_clients').on('cocoon:after-insert', function() {
$('#client_phone').mask('(00)00000-0000');
});
});
But it doesn't work, I have tested using alert('something') inside the callback and it has appeared. So I have no idea why the mask isn't applying.
Could you guys, please, help me?
Try the below:
$(document).on('turbolinks:load', function() {
$('#phone_clients').on('cocoon:after-insert', function(e, insertedItem) {
$(insertedItem).find('#client_phone').mask('(00)00000-0000');
});
});
We generate a collapsible content dynamically like this:
$('#'+object.TARGET).html(response).trigger('create');
The collapsible work very well
<div data-role="collapsible" id="ims-page-start-content-detail-vertrag">
<h2>Mieter</h2>
<p></p>
</div>
but if we want to use the expand-event with:
$("#ims-page-start-content-detail-vertrag").on( "collapsibleexpand", function( event, ui ) { alert("test"); } );
or
$("#ims-page-start-content-detail-vertrag").collapsible({
expand: function( event, ui ) { alert("test"); }
});
there is no answere! what we do wrong? Tanks a lot ;-)
we add this:
$(document).off('pageshow','#ims-page-start').on('pageshow','#ims-page-start',function(){
$('#ims-page-start-content-detail-vertrag').bind('expand', function () { alert('Expanded');
}).bind('collapse', function () {
alert('Collapsed');
});
});
but this still not working!
we think the problem is how to generate the collapible dynamically
You have two solutions to listen collapsibecollapse and collpsibleexpand events on dynamically created collapsibles.
The first and straight-forward one is to delegate event.
$(document).on("collapsibleexpand collapsiblecollapse", "[data-role=collapsible]", function (e) {
/* do something */
});
Demo
The second solution is to bind event while you are creating them dynamically.
$(document).on("pagecreate", "#pageID", function () {
$("parentDiv")
.append($('<div data-role="collapsible"><h3>Dynamic</h3><p>Content</p></div>')
.collapsible({
expand: function () {
/* Expanded - do something */
},
collapse: function () {
/* Collapsed - do something */
}
}));
});
Demo
I'm using backbone.js with jquery droppable.
The problem I'm having is that upon entering the .droppable function, the 'this' no longer refers to the backbone object. I've read Yehuda Katz article about understanding 'this', but I still don't understand how to 'solve' the problem.
http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/
I thought the way out of the issue would be to just bind the model changes event to trigger a method, but I need to pass a variable to the method, and I can't figure out how to do that.
here's an excerpt of my code. On the line MyApp.User.Trigger('new_class');, is there a way to add a variable?? How do I put that in the bind event??
initialize: function(){
user = MyApp.User;
MyApp.User.bind('new_class',this.save, this);
this.render();
},
render: function(){
$('li.empty').droppable({
hoverClass: "ui-state-active",
start: function(e){
$(this).click('unbind');
},
drop: function(event, ui){
var add_class_to_user = $(this).attr('data-id');
MyApp.User.Trigger('new_class');
}
})
},
save: function(class){
var add_class = new Myapp.Model.Class({
class_id: class,
user_id: user.id
});
add_class.save()
}
I'm not sure i understand what you are asking,
so i will answer both :
on the context of This:
and why don't you store reference this into a new variable?
...
render: function(){
// here we put this in a new variable myView.
var myView = this;
$('li.empty').droppable({
hoverClass: "ui-state-active",
start: function(e){
$(this).click('unbind');
// here you can use myView instead of this, if you want something from your view.
myView.model.set({'name', 'newname'});
},
drop: function(event, ui){
var add_class_to_user = $(this).attr('data-id');
MyApp.User.Trigger('new_class');
}
})
},
...
on the question of passing parameters to an event
...
render: function(){
$('li.empty').droppable({
hoverClass: "ui-state-active",
start: function(e){
$(this).click('unbind');
},
drop: function(event, ui){
var add_class_to_user = $(this).attr('data-id');
MyApp.User.Trigger('new_class', add_class_to_user);
}
})
},
...
in your user model you should of course do this: (or more likely in another view, you can bind to that event on the user model)
MyApp.User.bind('new_class', function(myparameter) {
alert('yay, my parameter is:' + myparameter);
$('#myElement').addClass(myparameter);
});
example in jsfiddle: can be found here....
http://jsfiddle.net/saelfaer/MWuHj/
I have shopping cart set up where the user can drag an item from the store shelf and place it in the shopping cart. This all works great. The next step of programming that I cannot resolve is how to remove the item from the cart with a click. There is this in the documentation but there is no example to call it.
$('.drag_box').bind('click', function() {
this.sortable( "destroy" );
});
Does nothing. Help please.
If you just want to remove the element, you can use
$('.drag_box').bind('click', function() {
$(this).remove();
});
Thank you - I have added this but it still moves the original DOM element, what I was ultimately looking to do was to leave the original there and add a different class to it so the user would know it was in the cart. Here is my code.
$(function() {
$("drag_box").sortable({
connectWith: 'li.empty_list',
opacity: 0.6,
handle: 'img',
forcePlaceholderSize: true,
clone:'helper',
revert:true
});
$( "li.empty_list" ).sortable({
stop: function(event, ui) {
$(ui.item).addClass("moved");
}
});
I am trying to get the ckeditor working. Obviously it doesn't make use of the textarea so on submit the form doesn't submit the text in the editor. Beceause I make use of polymorphic associations etc. I can't make a onsubmit function to get the value of the textarea (when the form is submitted) .
So I found this question: Using jQuery to grab the content from CKEditor's iframe
with some very good answers. The answers posted there keep the textarea up to date. That is very nice and just what I need! Unfortunately I can't get it to work.
Does somebody know why (for example) this doesn't work?
I have a textarea (rails but it just translates to a normal textarea):
<%= f.text_area :body, :id => 'ckeditor', :rows => 3 %>
And the following js:
if(CKEDITOR.instances.ckeditor ) {
CKEDITOR.remove(CKEDITOR.instances.ckeditor);
}
CKEDITOR.replace( 'ckeditor',
{
skin : 'kama',
toolbar :[['Styles', 'Format', '-', 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', 'Link']]});
CKEDITOR.instances["ckeditor"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);
//and paste event
this.document.on("paste", CK_jQ);
}
function CK_jQ()
{
CKEDITOR.instances.ckeditor.updateElement();
}
I get the following "error" in my firebug.
missing ) after argument list
[Break on this error] function CK_jQ()\n
Before submit do:
for(var instanceName in CKEDITOR.instances)
CKEDITOR.instances[instanceName].updateElement();
have you figured it out?
I'm using CKEditor version 3.6.1 with jQuery form submit handler. On submit the textarea is empty, which to me is not correct. However there is an easy workaround which you can use, presuming all your CKEditor textareas have the css class ckeditor.
$('textarea.ckeditor').each(function () {
var $textarea = $(this);
$textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
});
Execute the above before you do your submit handling ie. form validation.
Thanks #JohnDel for the info, and i use onchange to make it update every change.
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();
});
});
});
Combination of all of the above answers into one.
Create a new custom.js file and add this:
CKEDITOR.on('instanceReady', function(){
$.each( CKEDITOR.instances, function(instance) {
CKEDITOR.instances[instance].on("instanceReady", function() {
this.document.on("keyup", CK_jQ);
this.document.on("paste", CK_jQ);
this.document.on("keypress", CK_jQ);
this.document.on("blur", CK_jQ);
this.document.on("change", CK_jQ);
});
});
});
function CK_jQ() {
for ( var instance in CKEDITOR.instances ) { CKEDITOR.instances[instance].updateElement(); }
}
You don't have to worry about the name of the textarea, just add a class ckeditor in the textarea, the above and you are done.
ADD Function JavaScript for Update
function CKupdate() {
for (instance in CKEDITOR.instances)
CKEDITOR.instances[instance].updateElement();
}
It's work. Cool
Just Add
CKEDITOR.instances.textAreaClientId.on('blur', function(){CKEDITOR.instances. textAreaClientId.updateElement();});
where textAreaClientId is your instance name
Regards
CKEDITOR.instances["ckeditor"].on("instanceReady", function()
{
//set keyup event
this.document.on("keyup", CK_jQ);
//and paste event
this.document.on("paste", CK_jQ);
})
I just increase that to the response of T.J. and worked for me:
$("form").on("submit", function(e){
$('textarea.ckeditor').each(function () {
var $textarea = $(this);
$textarea.val(CKEDITOR.instances[$textarea.attr('name')].getData());
});
});
On load:
$(function () {
setTimeout(function () {
function CK_jQ(instance) {
return function () {
CKEDITOR.instances[instance].updateElement();
};
}
$.each(CKEDITOR.instances, function (instance) {
CKEDITOR.instances[instance].on("keyup", CK_jQ(instance));
CKEDITOR.instances[instance].on("paste", CK_jQ(instance));
CKEDITOR.instances[instance].on("keypress", CK_jQ(instance));
CKEDITOR.instances[instance].on("blur", CK_jQ(instance));
CKEDITOR.instances[instance].on("change", CK_jQ(instance));
});
}, 0 /* 0 => To run after all */);
});
There have been some API changes with the latest versions of CKEditor, so here's an answer for CKEditor 5:
let ckeditor;
// Create a CKEditor, and store its handle someplace that you may
// access later. In this example, we'll use the `ckeditor` variable:
ClassicEditor
.create(document.querySelector("textarea"), {})
.then(editor => { ckeditor = editor; });
// When your form submits, use the `updateSourceElement` method
// on the editor's handle:
document.querySelector("form").addEventListener("submit", function() {
ckeditor.updateSourceElement();
});
To my knowledge, CKEditor does this automatically when you submit a form, so this particular example shouldn't actually do anything. But it is useful when you need the content of the textarea to udpate without submitting the form that contains it.
All above answer are focusing on how to fix this error but I want to take the answer on what cause me this error
I had a
<textarea class="ckeditor" rows="6" name="Cms[description]"></textarea>
changed to
<textarea class="ckedit" rows="6" name="Cms[description]"></textarea>
I changed class attribute value to anything other than ckeditor and boom error gone.
Hope that help