Please refer to JSFiddle for a working demonstration of this problem.
In Firefox (latest version, 24), if I use jQuery UI's .show("slide", { direction: "right" }) to display a kendoEditor, the editor does not contain the value I set it with, and it is not editable. If I use the plain old .show() from jQuery, then everything works fine. It also works fine in Chrome 30 and IE 10. Why does .show("slide") break the editor in Firefox, and are there any workarounds for this problem?
Html for this example:
<button id="btn1" type="button">Button 1</button>
<button id="btn2" type="button">Button 2</button>
<div id="div">
<textarea data-role="editor" data-bind="value: TheValue"></textarea>
<button id="hide" type="button">Hide</button>
</div>
This is the JS code that does not work:
$(document).ready(function () {
var model;
function bindDiv(value) {
model = kendo.observable({ TheValue: value });
kendo.bind($('#div'), model);
$('#div').show("slide", { direction: "right" });
//$('#div').show();
}
$('#div').hide();
$('#btn1').click(function () { bindDiv('hello'); });
$('#btn2').click(function () { bindDiv('goodbye'); });
$('#hide').click(function () {
console.log(model.get('TheValue'));
$('#div').hide("slide", { direction: "right" });
//$('#div').hide();
});
});
Clicking btn1 should result in the editor being display with the text "hello", and then clicking "Hide" should display the edited text in the console.
If you replace those two "slide" lines with the plain commented-out versions, then it works fine (but doesn't look as cool).
Does anyone know why this doesn't work, or what I can do about it?
Update:
Before the animation plays, everything is OK - the body of the editor's iframe has the correct content and is marked with the contenteditable attribute. After the animation completes, the body of the iframe is wiped clean - no content, no attributes. I'm still trying to figure out why and what to do about it.
If you upgrade your KenoUI version to the latest Q2 2013 (version 2013.2.716) then the Kendo Editor has a new method called: refresh which
refresh
Reinitializes the editing area iframe. Should be used after
moving the editor in the DOM.
So it does exactly what you need, because the animation moves the editor iframe you need to call refresh when it finishes:
$('#div').show("slide", { direction: "right" }, function () {
var editor = $("#editor").data("kendoEditor");
editor.refresh();
});
To make this work you also need to change your view and give an id to you textarea:
<div id="div">
<textarea id="editor" data-role="editor" data-bind="value: TheValue">
</textarea>
</div>
Demo JSFiddle.
Ok, so, when slideeffect is occured, the iframe don't appear correctly...
The solution I find is to rebind the editor, in the end of slideeffect.
But need to destroy it in hiding, else, some conflicts come.
jsfiddle : http://jsfiddle.net/xzftW/18/
code :
$(document).ready(function () {
function bindDiv(value) {
kendo.bind($('#div'), '');
$('#div').show("slide", { direction: "right" }, function(){
resetme();
kendo.bind($('#div'), kendo.observable({ TheValue: value }));
$('#hide').click(function() {hideme() } );
});
}
$('#div').hide();
$('#btn1').click(function () { bindDiv('hello'); });
$('#btn2').click(function () { bindDiv('goodbye'); });
});
function hideme()
{
$('#div').hide("slide", { direction: "right" }, function(){
resetme();
});
}
function resetme()
{
$('#div').html('<textarea data-role="editor" data-bind="value: TheValue"></textarea><button id="hide" type="button">Hide</button>');
}
"slide" is a jquery-ui effect - as opposed to jQuery "basic" effects.
All jquery-ui effects work as follows : they wrap the selected nodes inside a node, animate the wrapper, then unwrap the content.
I don't know how Kendo reacts to this.
jQuery "basic" effects, on the other hand, leave the DOM be and modify the element's css porperties.
You can try to replace your effect with a call to .animate(), or, as others have suggested, try to rebind or refresh your Kendo observers.
Related
I am using this plugin https://danielupshaw.com/jquery-star-rating/
I want to reset my form. But how can I reset these stars??
$("#btn-reset").on('click', function() {
//some other inputs reset
$('#starrating').star_rating.remove();
$('#starrating').star_rating.reload();
}
Please help on how to reset these stars to zero or null.
Here is the full code.
$("#btn-reset").on('click', function() {
$('#starrating').star_rating.reload();
});
jQuery(function($) {
$('#starrating').star_rating({
click: function(clicked_rating, event) {
event.preventDefault();
$('input[name=\'rating\']').val(clicked_rating);
this.rating(clicked_rating);
}
});
});
I don't know if this is the best approach, since I'm not familiar with this library...
But I achieved a reset like this:
$(document).ready(function(){
$('.rating').star_rating();
$("#resetStars").on("click",function(){
$(".rating").remove();
$('.star-rating').replaceWith("<span class='rating'>0/10 stars</span>");
$(".rating").text("0/10").star_rating();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://danielupshaw.com/jquery-star-rating/jquery.star-rating.js"></script>
<h1>This is a good script!</h1>
<span class="rating">9.5/10 stars</span><br>
<br>
<br>
<button id="resetStars">Reset stars</button>
I'm not familiar with the plugin, but looking at the link you provided, can't you just update the text inside of the element to reflect an empty or zero rating? Something like:
$("#btn-reset").on('click', function() {
$('#starrating').text('0/5').star_rating();
}
It looks like all you need to do is set the content to 0. Then re initialize the method.
$("#starrating").html("0");
$("#starrating").star_rating();
You could try something like this; an attempt to set default blank stars on initial page load, or Click.
$(document).ready(function() {
$('i').addClass('fa-star-o');
});
Then refresh page to rest:
$( ".reset" ).click(function() {
location.reload();
});
If you don't want to refresh page, you could try:
$( ".reset" ).click(function() {
$('i').addClass('fa-star-o');
});
You may have to re-initiate your click feature on the star with similar jQuery to re add the appropriate Class when needed.
If this doesn't help or work; could you create a https://jsfiddle.net/ to fully replicate your issue; and then we could solve it. If it were me; I'd find a better plugin to use or just write it from scratch at that point.
A bit another approach by re-rendering your rating stars from scratch using custom renderRating function.
HTML:
<div class="rating-stars"></div>
<button class="reset-rating">Reset rating</button>
JS:
var defaultRating = "0/5";
renderRating("3/5");
function renderRating(rating) {
var ratingEl = $('<span />').addClass('rating');
var ratingStr = rating || defaultRating;
ratingEl.text(ratingStr);
$('.rating-stars').html(ratingEl);
ratingEl.star_rating();
}
$('.reset-rating').on('click', function() {
renderRating();
})
Preview on JSFiddle
This should reset it to 0:
$('#starrating').star_rating('rating', 0);
Here's the format to call the public methods:
$('#starrating').star_rating('method_name');
Should your click event be inside the document ready? If it is outside document ready, that can sometimes cause issue. I hope this helps :)
I am developing a multi chained dropdown system using jQuery.
My demo here works great: https://jsfiddle.net/m27pnyo3/
However, when I want to nest each select menu in a <div> element, I am having problems. I believe these problems stem from my use of $(this).parent()).
See this revised Demo with <div> elements around each <select> - you can see it breaks :(
Can someone explain what I change in my jQuery below to resolve this?
$(function() {
$(".series").each(function() {
$(this).chained($(".mark", $(this).parent()));
});
$(".model").each(function() {
$(this).chained($(".series", $(this).parent()));
});
$(".engine").each(function() {
$(this).chained([
$(".series", $(this).parent()),
$(".model", $(this).parent())
]);
});
});
If you change you javascript it works:
$(function() {
$(".series").each(function() {
$(this).chained($(".mark", $(this).parent().parent()));
});
$(".model").each(function() {
$(this).chained($(".series", $(this).parent().parent()));
});
$(".engine").each(function() {
$(this).chained([
$(".series", $(this).parent().parent()),
$(".model", $(this).parent().parent())
]);
});
});
Just add another .parent()
this.parent().parent()
Now you have added a div as parent and this should get it to original destination.
I've got this code
$(".test_init").click( function(){
var win = $(this).next(".test_wrap").find(".test_drop");
if ($(win).html().length)
$(win).empty().hide("fast");
else {
$(win).load("URL");
}
});
Which returns me some html form without close button
I wish to add close button using such method without adding it in every-single function
$('*[class*="_drop"]').change(function() {
$(this).append($('<a />', {
class: 'close-drop',
click: function(e) {
e.preventDefault();
alert("test");
}})
);
});
But nothing happens - i can't understand why close button doesn't appends
<div class="test_wrap relative">
<div class="test_drop absolute"></div>
</div>
Example: http://jsfiddle.net/fppfyey7/10/
Your problem is with your CSS, not with your JS. The button is appended but you are hidding it with your style.
For example in this fiddle I append a button with your JS code and your CSS:
Fiddle 1
Now, in this one, I just remove your absolute and relative classes:
Fiddle 2
My solution (isn't good enough, still works)
$('*[class*="_drop"]').ajaxStop(function() {
$(this).prepend('<a onclick="$(this).parent().empty().hide(\'fast\');" class="close-drop"></a>');
});
If here will be better solution, will mark it as answear!
I am using polymer's iron-autogrow-textarea. I was able to set the autofocus attribute and its working perfectly fine.
But when I try to set the focus back to textarea it doesn't seem to work.
I have tried
autoTextArea.focus();
It didn't work
setTimeout(function() {
$('#autoTextArea')[0].focus();
}, 1000);
This didn't work
setTimeout(function() {
$('#autoTextArea')[0].setAttribute('autofocus', true);
}, 1000);
This obviously didn't work as autofocus only works on ready().
I have also tried to access the textArea inside the autogrow-textarea and even that didn't seem to be working.
Is there a way this can be done?
Thanks in advance.
Here is the code snippet where I am using it.
'click #chatEnter': function(e, template) {
var chatArea = $('#chatArea')[0];
var chatTextArea = $('#chatTextArea')[0];
if(chatTextArea.bindValue)
{
var chatNode = document.createElement('chat-message');
chatNode.setAttribute('color', '#ff00ff');
chatNode.setAttribute('avatar', '/src/someimage.jpg');
chatNode.setAttribute('username', 'SomeName1');
chatNode.setAttribute('text', chatTextArea.bindValue);
chatNode.setAttribute('status',"MyStatus");
chatNode.setAttribute('timestamp',"2015-07-12 12:00:00 AM");
chatArea.appendChild(chatNode);
chatTextArea.bindValue = "";
setTimeout(function() {
$('#chatTextArea')[0].setAttribute('autofocus', true);//.focus();
}, 1000);
}
Here is the HTML where I am using it.
<section main layout vertical id="chat">
<paper-material id="chatArea" elevation="1" animated style="overflow-y:scroll">
</paper-material>
<span layout horizontal>
<paper-toolbar class="medium">
<div>
<iron-autogrow-textarea label="Enter message here" autocomplete="true" autofocus="true" maxRows=5 name="Text Area" id="chatTextArea">
<textarea id="chatText" max-rows="5" ></textarea>
</iron-autogrow-textarea>
</div>
<paper-icon-button raised icon="send" id="chatEnter"></paper-icon-button>
<iron-a11y-keys keys="ctrl+enter" on-keys-pressed="[[enterKeyHandler]]"></iron-a11y-keys>
</paper-toolbar>
</span>
</section>
You don't need to put a textarea tag inside iron-autogrow-textarea. The iron component is providing one. You can then access that inner textarea via .textarea and call focus on it.
Here's a small working example.
<body>
<iron-autogrow-textarea rows="5"></iron-autogrow-textarea>
<button>Focus!</button>
<script>
var button = document.querySelector('button');
button.addEventListener("click", function(){
console.log(document.querySelector('iron-autogrow-textarea'));
var area = document.querySelector('iron-autogrow-textarea');
area.textarea.focus();
});
</script>
</body>
Had a very similar problem - when I navigated the page, the focus didn't return to the paper-textarea the second time I visited. After some looking at the DOM I came to the following solution:
//focus textarea
setTimeout(() => {
//first working solution, line after that a bit more general
// this.$.idOfPaperTextarea.shadowRoot.querySelector('paper-input-container').querySelector('#input-1').shadowRoot.querySelector('#textarea').focus();
this.$.idOfPaperTextarea.shadowRoot.querySelector('iron-autogrow-textarea').shadowRoot.querySelector('textarea').focus();
}, 0);
I guess the problem is that you have to get through the shadowRoots to access the textarea.
I found here on Stackoverflow similar topics but not the same.
I am using jquery Minicolors on my project: https://github.com/claviska/jquery-miniColors/
Everything work fine, but I need to do easy thing - I need to get actual color value and write it to the HTML document. So for example I need to do this:
<p><script>document.write(actualColor);</script></p>
Simply just write the actual color code anywhere in static HTML. I am very bad in JS and I didnt find some working solution.
My minicolors code look like this:
<script>
$(document).ready( function() {
$('.color-picker-1').each( function() {
$(this).minicolors({
defaultValue: $(this).attr('data-defaultValue') || '',
inline: $(this).attr('data-inline') === 'true',
});
});
});
</script>
And I use just this input for picking color:
<input type="text" id="inline" class="color-picker-1" data-inline="true" value="#4fc8db">
What can I do? I guess solution is very easy.
On change of the color, re-assign the value to the input element so that it contains new value. Then you can use that value. If you want, you can create another hidden input element to store the color values as well.
'change' event gets triggered when color value is changed. This is where all DOM manipulation should go into.
$("#inline").minicolors({
change: function(hex, opacity) {
$("#inline").val(hex);
}
});
On your code:
<script>
$(document).ready( function() {
$('.color-picker-1').each( function() {
$(this).minicolors({
defaultValue: $(this).attr('data-defaultValue') || '',
inline: $(this).attr('data-inline') === 'true',
change: function(hex, opacity) {
$(this).val(hex);
}
});
});
});
</script>