I have the following JSFiddle example. How do I dispose of a KendoUI DropDownList?
http://jsfiddle.net/bryanb/bWRTm/1/
I have tried the following without luck:
supplier: <input id="suppliers1" class="suppliers" value="2" />
<br />
supplier: <input id="suppliers2" class="suppliers" value="2" />
<br />
<button id="dispose">Dispose</button>
js:
function comboboxDispose() {
$(".suppliers").each(function () {
var combobox = $(this).data("kendoComboBox"),
popup = combobox.popup,
element = popup.wrapper[0] ? popup.wrapper : popup.element;
//remove popup element;
element.remove();
//unwrap element
combobox.element.show().insertBefore(combobox.wrapper);
combobox.wrapper.remove();
combobox.element.removeData("kendoComboBox");
});
}
I figured this out. My selector was selecting the wrong elements after my kendoui combobox was initialized. Here is the fix:
function comboboxDispose() {
$("input[class='suppliers']").each(function () {
var combobox = $(this).data("kendoComboBox"),
popup = combobox.popup,
element = popup.wrapper[0] ? popup.wrapper : popup.element;
//remove popup element;
element.remove();
//unwrap element
combobox.element.show().insertBefore(combobox.wrapper);
combobox.wrapper.remove();
combobox.element.removeData("kendoComboBox");
});
}
Working Example:
http://jsfiddle.net/bryanb/bWRTm/2/
Related
I am using react-quill in my react application. I have the editor all set up and ready to use. I have added a custom-button in the toolbar. That custom-button basically allows to the user to insert "button" in the editor area. There is a popup component which asks user to enter button-name, button-text-color, button-background-color and button-link. Based on these parameters, ditto' button is added in the editor.
The popup component is toggled using state:
this.state = {
openPopup: false
}
const CustomButton = () => <>CTA</>
const CustomToolbar = () => (
<div id="toolbar">
<select className="ql-header" defaultValue={""} onChange={e => e.persist()}>
<option value="1" />
<option value="2" />
<option selected />
</select>
<button className="ql-bold" />
<button className="ql-italic" />
<button class="ql-script" value="sub"></button>
<button class="ql-script" value="super"></button>
<select className="ql-color">
<option value="red" />
<option value="green" />
<option value="blue" />
<option value="orange" />
<option value="violet" />
<option value="#d0d1d2" />
<option selected />
</select>
<button className="ql-insertCta">
<CustomButton />
</button>
</div>
);
this.modules = {
toolbar: {
container: "#toolbar",
handlers: {
insertCta: function () {
const cursorPosition = this.quill.getSelection().index
this.quill.insertEmbed(cursorPosition, 'span', 'user')
this.quill.setSelection(cursorPosition + 1)
}
},
},
clipboard: {
matchVisual: false,
}
};
const BlockEmbed = Quill.import('blots/block/embed');
let ctaTool = this.generateButton()
class CtaBlot extends BlockEmbed {
static create(value) {
let node = super.create(value);
node.innerHTML = ctaTool;
return node;
}
}
CtaBlot.blotName = 'span';
CtaBlot.tagName = 'span';
CtaBlot.className = 'cta-button'
Quill.register(CtaBlot);
<ReactQuill
theme={"snow"}
modules={this.modules}
formats={this.formats}
value={this.state.textEditorData}
onChange={this.onEditorChange}
placeholder={"Write page content here..."}
>
</ReactQuill>
insertCta function works as expected. How do i open the popop and then onClick of save button in the popup, the "insertCta" function is fired? Currently the "insertCta" function works if fired directly. I want the user to customise the button appearance from the popup.
Popup:
popup to configure cta
Editor:
editor with custom button in toolbar
CTA Button:
editor when cta button is added
Any help is greatly appreciated!
I'm using Durandal with the observable plugin enabled to utilize ES5 getters and setters. I've created a simple widget that takes a value and binds it to a text box:
Here's the widget's viewmodel.js:
define([], function () {
var ctor = function () {
this.activate = function (settings) {
this.value = settings.value;
}
};
return ctor;
});
And here's the widget's view.html:
<span>
This textbox is in the widget:
<br />
<input type="text" data-bind="value: value" />
</span>
When using the widget, if the value is passed in as a ko.observable, then everything works as expected. However, if I use the ES5 getter/setter method provided by the observable plugin, modifying the value in the widget does not cause the parent view model to be updated. Modifying the value in the parent view does update the widget though:
define(['durandal/app', 'knockout'], function (app, ko) {
var ctor = function () {
this.value = ko.observable('Test'); // This works as expected
this.value = 'Test'; // This does not work
};
return ctor;
});
Here's the parent view:
<section>
<h1>Widget Test</h1>
This textbox is not in the widget:
<br />
<input type="text" data-bind="value: value" />
<br /><br />
<div data-bind="widget: { kind: 'testWidget', value: value }"></div>
</section>
Am I doing something wrong that is preventing the value from being pushed back to the parent view model?
You will have to define/use a observable property to make it two-way binding so that the changes made in view will be reflected in your View Model.
this.value = ko.observable('Test'); works for your requirement.
How can I add a change event after initialization in a KendoUI autocomplete? I'm building in this way, but I don't know how to do this with the component already built.
<input id="autocomplete" />
<script>
$("#autocomplete").kendoAutoComplete({
change: function(e) {
var value = this.value();
}
});
</script>
See this link: http://docs.telerik.com/kendo-ui/api/javascript/ui/autocomplete#events-change
<input id="autocomplete" />
<script>
function autocomplete_change(e) {
var value = this.value();
// Use the value of the widget
}
$("#autocomplete").kendoAutoComplete();
var autocomplete = $("#autocomplete").data("kendoAutoComplete");
autocomplete.bind("change", autocomplete_change);
</script>
I am working with the jQuery TE plugin (http://jqueryte.com/). It does not seem to work with the jQuery Validation plugin.
A regular textarea works fine but if I want to transform it into a jqte WYSIWYG I lose that functionality.
In this example the Name and Bio fields are validated, but not the Resume field.
jsFiddle
Html:
<form id="frmExample">
<div><b>Name:</b></div>
<input name="txtName" id="txtName" class="required" />
<br />
<div><b>Bio:</b></div>
<textarea cols="40" rows="6" name="txtBio" id="txtBio" class="required"></textarea>
<br />
<div><b>Resume</b></div>
<textarea name="txtResume" class="required" id="txtResume"></textarea>
<br />
<br />
<input type="submit" value="Save" />
JS:
$("#txtResume").jqte();
$("#frmExample").validate();
I have detailed an example of this in a blog post: http://chadkuehn.com/jquery-te-validation/
When you place a jqte on a TEXTAREA tag it hides the original element. So in the validation plugin you must adjust the markup that's visible when highlighting and unhighlighting. You must also do some adjusting to the placement of the error label.
errorPlacement: function (error, element) {
var el = $(element).closest(".jqte");
if (el.length == 1) {
error.insertAfter(el);
} else {
error.insertAfter(element);
}
},
highlight: function (element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
var el = $(element).closest(".jqte");
if (el.length == 1) {
el.addClass(errorClass);
}
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
var el = $(element).closest(".jqte");
if (el.length == 1) {
el.removeClass(errorClass);
}
}
View a DEMO here.
Using ASP.NET MVC I would recommend this...
To have jQuery validation automatically with jqte, execute at startup:
$('.jqte_editor').change(function () {
if ($(this).parent().siblings('.textarea-editor').hasClass('.input-validation-error'))
$(this).parent().addClass('input-validation-error');
else
$(this).parent().removeClass('input-validation-error');
});
$('form').bind('submit', function () {
$('.textarea-editor.input-validation-error').parent().parent().addClass('input-validation-error');
$('.textarea-editor:not(.input-validation-error)').parent().parent().removeClass('input-validation-error');
});
And remember to put "textarea-editor" class in the textarea
I'm trying to use jquery to select some hidden fields to retrieve some values from a certain row in a a table to make an ajax call. The first variable (ebId) is retrieved fine, but all of the other ones don't ever get set. They're all null. I can't use the name of the hidden field because these hidden fields are dynamically created and would have the same same. So i'm trying to use a class. Any idea why the way that I'm selecting the last 3 variables (_product,_applicantType,_ssn) isn't working?
Here's the JQuery and the pertinent HTML
$('.submissionStatus').click(function () {
var _ebId = $(this).next('.ebId').val();
var _product = $(this).next('.product').val();
var _applicantType = $(this).next('.applicantType').val();
var _ssn = $(this).next('.ssn').val();
$.ajax({
type: 'GET',
data: { ebId: _ebId, product: _product, applicantType: _applicantType, ssn: _ssn },
url: '#Url.Action("GetSeverityErrors", "AppListing")',
success: function (data) {
alert('Call success')
$(this).next('.loaded').val(true);
},
error: function (xhr, status, error) {
alert('An Error Occured.');
}
});
});
<input type="hidden" class="ebId" value="#item.ElectedBenefitId" />
<input type="hidden" class="product" value="#item.Product" />
<input type="hidden" class="applicantType" value="#item.ApplicantType" />
<input type="hidden" class="ssn" value="#item.Ssn" />
A little more HTML insight:
<td align="left">
<a style="color:red;" class="submissionStatus" href="javascript: void(0)" title="SubmissionStatus">#item.SubmissionStatus.ToPrettyString()</a>
<input type="hidden" class="ebId" value="#item.ElectedBenefitId" />
<input type="hidden" class="product" value="#item.Product" />
<input type="hidden" class="applicantType" value="#item.ApplicantType" />
<input type="hidden" class="ssn" value="#item.Ssn" />
<input type="hidden" class="loaded" value="false" />
</td>
note that closest() selects closest parent element based on it's parameter, try this:
var _ebId = $(this).siblings('input.ebId').val();
var _product = $(this).siblings('input.product').val();
var _applicantType = $(this).siblings('input.applicantType').val();
var _ssn = $(this).siblings('input.ssn').val();
$('.submissionStatus').click(function () {
var storThis = this;
var _ebId = $(storThis).next('.ebId').val();
var _product = $(storThis).next('.product').val();
var _applicantType = $(storThis).closest('.applicantType').val();
var _ssn = $(storThis).closest('.ssn').val();