Integrate iCheck plugin with dynamic radio buttons and knockout js - dynamic

I have a list of radio buttons that are loading dynamically,
I've already searched in a couple of blogs and similar questions like Integrate iCheck plugin with knockout js
My problem is that these examples are not adding the name of the inputs dynamically using also knockout.
Here is my code of the input
<input type="radio" data-bind="name:$parentContext.$data.id, value:value,iCheckRadio: radioCheckedValue,click:activate" />
Any advice, please.

Related

integration of ck editor in vue js

I am trying to integrate ckeditor with vue js in my application. Everything is working fine but when i click on submit button, all the data is saved in database and all fields are empty.
but in this case , i am not able to edit the ck-editor if i refresh or change the dom and again come to same page then working fine.
I think it needs to re-binding of ckeditor but I am not sure how we can do it.
I followed this link -> https://vuejsexamples.com/ckeditor-using-for-vue-js-2/
to integrate the ck-editor and also using js file of ckeditor on index page.
I assume that the Form which you are using is submitted by the browser - native html behaviour. To avoid that, the input field with type submit should look like (both #submit.prevent so as #click.prevent):
<form #submit.prevent="">
<input type="text" />
<input type="submit" value="ok" #click.prevent="" />
</form>

Angular2 v4.0.2 and radio FormControls

I'm just curious if anyone else has had any issues with FormControl's and radio buttons. We recently updated to Angular2 v4 and radio controls which were working before have stopped. Given the below HTML and an associated FormGroup (not shown), the radio buttons can both be selected. I really hope I'm just overlooking something simple but was curious if anyone else has experienced similar behavior.
<input type="radio" formControlName="fcAdjustmentType" value="amount"/> <label>Amount</label>
<input type="radio" formControlName="fcAdjustmentType" value="percentage"/> <label>Percentage</label>
And before it's mentioned, the "name" attribute on the element is optional according to Angular:
Blockquote When using radio buttons in a reactive form, radio buttons in the same group should have the same formControlName. You can also add a name attribute, but it's optional.

Issues detecting textboxes that get generated via a template

I am trying to record UI tests for an Aurelia App. I am using Telerik Test Studio and it has issues detecting the textboxes that get generated via a template.
If I use straight HTML in the template e.g.
<input type="text" name="firstname">
That is easily detected and recorded and playback of the test can enter info into that field
In a template if I have textboxes resembling
<textbox name="patientLastName" size="small" editing.bind="editing" if.bind="!demographics.lastName.hidden" required.bind="demographics.lastName.required" label.bind="demographics.lastName.name" value.bind="patient.details.lastName"></textbox>
The template works but I get html resembling
<input class="form-control au-target" type="text" value.bind="value" disabled.bind="!editing" au-target-id="143">
This doesn't appear to be outputting any html attributes/properties that Test Studio can latch onto. How would I alter a textbox so that it is detectable by Test Studio?
Could it be that Telerik Test Studio inspects the page too early and that it cannot find elements that are dynamically added? Replace if.bind by show.bind to see if it works.

What is the advantage of using Tag Helpers in ASP.NET Core MVC

I just come across a good write up for a new ASP.NET Core feature called Tag helpers.
From there, I understood that one can replace the following code:
#model MyProject.Models.Product
#using (Html.BeginForm())
{
<div>
#Html.LabelFor(m => p.Name, "Name:")
#Html.TextBoxFor(m => p.Name)
</div>
<input type="submit" value="Create" />
}
with:
#model MyProject.Models.Product
#addtaghelper "Microsoft.AspNet.Mvc.TagHelpers"
<form asp-controller="Products" asp-action="Create" method="post">
<div>
<label asp-for="Name">Name:</label>
<input asp-for="Name" />
</div>
<input type="submit" value="Save" />
</form>
There's some new syntax such as asp-controller, asp-for, etc. But what does it do? And what's the advantage of this new approach?
The most important improvement I've seen so far is the control it guarantees over your HTML elements. While convenient, the Html helpers used by MVC create problems when you try to do things they weren't built for.
A simple example can be seen when using the TextBox in MVC5:
#Html.TextBoxFor(m => p.Name)
The resulting HTML markup looks like:
<input class="form-control" id="Name" name="Name" type="text" value="">
Nice and simple. But what if you want to add a placeholder attribute? What if you want to use bootstrap's validation states? What if you have some 3rd party super cool javascript library which needs custom attributes. None of these things were possible in the initial release of MVC5. Though they were eventually added via update in the form of htmlAttributes. Even now adding custom attributes is kludgey at best.
#Html.TextBoxFor(m => p.Name,
new {#class="form-control has-error", placeholder="Enter Name",
superCoolFeature="Do something cool"})
While you could argue this is still less code that straight HTML, it is no longer a significant advantage. Worse, this solution still doesn't cover dashes in attributes which are fairly common. If you need them you are stuck with a workaround such as ActionLink htmlAttributes
I've gone down the route of fixing these deficiencies with custom editors, and tried building my own TextBox controls. It became obvious pretty quickly that replacing the included TextBox templates would require a lot of work. Worse, your templates have to have knowledge of any extensions you are adding to use them.
It seems like the inclusion of Bootstrap and other 3rd party tools into MVC have made it more obvious that the current design has problems with extending HTML which need to be fixed. Hopefully the tag helpers implementation is complete enough that we can avoid them in the future.
Not to mention, your Web Designers will have real HTML tags to edit that they recognize to re-design your pages. Designers shouldn't have to be coders and there's enough for these sharp folks to keep up with, studying the moving targets of HTML5 and CSS3 specs.
A few things come to mind:
As #ChrisWalter points out, these tag helpers give HTML tags an Open/Closed quality. Rather than just letting you write extension methods for common HTML patterns, you can extend an HTML element. This lets you pick-and-mix multiple extensions per component, rather than having to choose between them.
HTML Helpers tend to not work super well for elements that need to have inner HTML provided as an argument. They came up with a clever pattern so you can say:
#using (Html.BeginForm(...)){
{
<input ... />
}
But there's nothing about BeginForm() that would force you to put it in a using statement, and there's nothing to prevent you from using incorrect HTML structure. (<input> technically isn't allowed to be directly inside a <form> tag.)
This gives us a really easy transitional stepping stone into the Web Components world of HTML5. A component that you write today for jQuery or Bootstrap to pick up and enhance may make more sense as an Angular 2 or Polymer component in a few years. Using HTML syntax makes it possible to write your HTML the way you want it to look when it's a web component, and have it automatically translated into the structure it has to take on for now (or for specific browsers, later).
Accepted answer is correct but just a correction.
Html Helpers cover dashes in attributes by use of underscore. for example if you want html like
my-attr=value
then you can use html helpers like
#Html.TextBoxFor(m=>m.id,
new { my_attr = value })
then it will convert accordingly.
I know the original question asks about advantages but for the sake of completeness I have to mention one disadvantage:
With tag-helpers enabled you cannot inject C# code inside tag attributes.
I.e. this code will break:
<!-- this won't work -->
<input class="#GetMyClass()">
<!-- this won't work too -->
<input type="checkbox" #(condition ? "checked" : "") >
To work around this problem you can use custom tag helpers or just disable tag helpers altogether like described in this answer: https://stackoverflow.com/a/65281018/56621
P.S. My humble opinion that can be safely ignored: tag helpers are "magic". And "magic" is always bad in programming. If something looks like an HTML tag, walks like a tag and quacks like a tag - then it should probably be an HTML tag. Without me knowning "oh, it's not *really* a tag".
From building a basic web app from the ground up in .NET 7/Razor pages, I haven't encountered a single instance where a tag helper has an advantage over simply coding the HTML. I don't come from an MVC background so maybe that is where the advantage lies but as seen before...Microsoft has released yet another version of wheel-reinvention that instead of making things easier for some simply adds more confusion to others.

Different Ways of creating Buttons in DOJO Framework

Hi , i found these two ways for creating Button in DOJO Framework
<input id="cb" dojotype="dijit.form.Button" name="developer" type="Button" />
<button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</button>
Please tell me if there is any difference between these two ways of creating buttons in DOJO ??
From Dojo's dijit.form.Button documentation, the difference is in the html tag underlying dojo's widget. Here <button> vs. <input type="button" />. Which to use? there is an interesting discussion about html button vs html input with type=button.
The main difference is that the second choice lets you write html content between tags.