Create a protoType page. Add a textInput widget ('textInput1').
$$('textInput1').getValue() generates an error in Chrome:
cannot read property 'getValue()' of undefined.
I am getting the same issue with setValue.
Is there a syntax or method that may avoid this?
getValue() and setValue() have been replaced on v2 widgets with .value()
Related
I'm trying to wrap a TexField ui to a new custom component so that I can add extra functionalities and reuse the component within the project. I want it to still have the v-model binding so I implemented the following:
:text="text"
and
#textChange="(update)=>{$emit('textChange', update.value)}"
Wherein "text" is its prop named and exposed exactly as a normal TextField prop.
The pattern should work on web but I don't know if it's possible on nativescript vue component. Please have a look at the code I made in playground: https://play.nativescript.org/?template=play-vue&id=Ikap1R&v=1
It's not working. Please help if you know the solution.
Thanks
There is nothing you have to do specifically for {N}, if you know how it works with Vue.js, you got it.
All you have to do is, use a value prop for input value and emit input event on change.
Updated Playground
We have used angular custom directive to generate a custom html tag called .The corresponding style sheet file for this tag is student.scss and its content is
student-result {/* Sonarqube is reporting critical issue at this line saying
"Remove the usage of the unknown "student-result" type selector" */
.student-result-top {
position :absolute;
height :300px;
}
}
Can anybody suggest any way to resolve the issue or any plugin which will make sonarqube to recognize these custom HTML tags?
Geo j's approach of using a class selector instead of an element selector is good. Instead of editing every html source file to add the class, you can use #HostBinding to give every instance of the component the same class by default:
#HostBinding('class.student-result') hasStudentResultClass = true;
Instead of using the angular selector directly inside your scss file give an id or class to it and apply required style.
<student-result class="student-result"></student-result>
Now in your scss access the same selector as .student-result instead of student-result. This might help I believe.
Please see jsfiddle for example, blank out First Name field to have validation tooltip show. In a normal form the validation tooltip positions correctly to the right of each element. But in the popup editor for the grid it still trying to position the tooltip below the element as if it where editing inline. I have tried <span class="k-invalid-msg" data-for="FirstName"></span>but it doesn't change anything. Is there a setting I am missing to get this working in popupeditor? I guess I could manually modify the .k-tooltip but I am hoping for something more built in that handles the positioning correctly, because I am not very good at css.
As you've discovered, the error template for the grid is different to that provided by the kendo validator when applied to standard inputs.
Unfortunately, the validator that is created internally by the grid does not pass along any errorTemplate that you might define in the options object and by the time the "edit" event fires, the validator has already been created and the error template compiled, hence why setting the errorTemplate in the manner you describe does not work. Really, I think the Kendo grid should respect any user defined errorTemplate option but until it does we have to hack a little bit.
The key is to define a custom template and to apply it in the edit event, but instead of using the options object, set the private instance directly. Not ideal, but it works:
edit: function (e) {
e.sender.editable.validatable._errorTemplate =
kendo.template($('#tooltip-template').html());
}
See this updated fiddle for an example of what I think you might be looking to achieve.
http://jsfiddle.net/nukefusion/eQ2j7/10/
(I would post this as a comment but not enough reputation yet...)
I'm successfully using nukefusion's solution. I, too, fought with the syntax error from jQuery for a long time and discovered through debugging that how you define the template is important. In particular, it appears that the template has to be written on a single line without any formatting, as in:
<script id="tooltip-template" type="text/x-kendo-template"><span class="k-widget k-tooltip k-tooltip-validation"><span class="k-icon k-warning"></span>#=message#</span></script>
If you try to make it "pretty" and format the html in the template, you get the syntax error. I don't know where the real bug is, as this sort of thing shouldn't cause an error. But it does and I stopped worrying about it once I got it to work correctly.
I am working on a simple CMS project, and i have run into a wall. And then after a lot of hours, blew it up.
For some reason my buttons inside #Ajax.BeginForm were not activating the postback. Neither full postback nor ajax. I have referenced the scripts, and tried to debug jQery, examined every character in the Controllers, Views, References and Models to no avail.
There were no errors or exceptions thrown.
Controller action:
[HttpPost]
public ActionResult Delete(int ID,int page=1)
{
//some code...
//...work, work, work...
}
View segment:
#using (Ajax.BeginForm("Delete", "Client", new { page = Model.CurrentPageIndex }, ao))
{
#Html.Hidden("clientID", item.ClientID)
<input type="submit" value="BriĊĦi" name="brisi" />
}
Error:
The parameters dictionary contains a null entry for parameter 'ID' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Delete(Int32, Int32)' in 'Info3CRM.WebUI.Controllers.ClientController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.
Parameter name: parameters
Finally i have decided to disable jQuery and Ajax and do normal postback. Then the exception was thrown. I was trying to call the Action in controller without all the necessary parameters.
My question to all is: How to catch such an exception if jQuery and ajax are enabled?
You could see this error in some kind of client side debugging tool.
For example, Fiddler would show you the response that came back from the server - and you can use Fiddler's WebView tab to see the HTML response. The HTML response in this case would show you the ASP.NET yellow error screen.
In addition to Fiddler, you could also use browser debugging tools that come built into IE,, Chrome or Opera - or download Firebug for FireFox. Each tool has a network tab which will show you all the ajax requests and their responses.
Your problem is that the action you are POSTing to expects to find a parameter named ID, while there is no such parameter being POSTed. If you change the name of the hidden input to match the name of the parameter it should all work fine.
So, change
#Html.Hidden("clientID", item.ClientID)
to
#Html.Hidden("ID", item.ClientID)
I found the following answer when looking for code to navigate the editors text area elements.. The code works, the onlyu problem is i dont understand why..
var documentWrapper = editorname.document; //replace by your CKEDitor instance ID
var documentNode = documentWrapper.$; // or documentWrapper['$'] ;
The answer was got from the folloing stackOverflow link :
ckeditor scrollIntoView to a div element within the editor
In particular could someone explain to me the syntax documentWrapper.$;
Ive no idea what this means??
Thanks
#oggiemc
The "$" represents the actual DOM object that the CKEDITOR class object is pointing to.
In this case you're working with the "CKEDITOR.dom.document" class. Find the documentaion here:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.dom.document.html
Your object named "documentWrapper" is a CKEDITOR object. It would have any properties described in the CKEDITOR API docs for that class object. You would also use CKEDITOR methods on it.
When you work with "documentWrapper.$", you're working with a DOM object that's described in the Document Object Model Specifications. See Specs here:
http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/
This object will have the properties described for this object type in the DOM specs. You wouldn't use CKEDITOR methods on this object, you would use the methods described in the DOM specs for this object type.
So the "$" is a generic representaion of whichever DOM object (document, head, body, div, span, p, etc.) the CKEDITOR class object is pointing to.
documentWrapper.someFunction(); would use a CKEDITOR method on a CKEDITOR class object.
documentWrapper.$.someFunction(); would use a DOM method on a DOM object.
Joe
Difference between editor passed as argument to plugins/dialogs and editor returned by getParentEditor().
They would usually be the same object. But if you have multiple editor instances on one page, you need to use getParentEditor to make sure you're working with the correct editor instance.
Especially if multiple editors are sharing one toobar: How Do I Get Multiple CKEditor Instances to Share the Same Toolbar?
http://docs.cksource.com/CKEditor_3.x/Howto/Shared_Toolbar
You can take a look at the code for dialog radio buttons in the CKEditor directory:
ckeditor\_source\plugins\forms\dialogs\radio.js
Or on the docs site:
http://docs.cksource.com/ckeditor_api/symbols/src/plugins_forms_dialogs_radio.js.html
When the plugin is loaded it uses the active editor instance to load the text for the title and labels because they will be the same for all the instances sharing the toolbar:
ckeditor_source\plugins\forms\dialogs\radio.js(5):
CKEDITOR.dialog.add( 'radio', function( editor )
(42) label : editor.lang.checkboxAndRadio.radioTitle,
(43) title : editor.lang.checkboxAndRadio.radioTitle,
But for the methods used in the dialog, it uses getParentEditor(), so that the actions will be performed on the correct editor instance:
ckeditor_source\plugins\forms\dialogs\radio.js(30):
editor = this.getParentEditor();
(22) onOk : function() ........ editor = this.getParentEditor();
Joe