Make "if" dynamic in JSViews - javascript

I am trying to use JSViews to make a dynamic ui. I want to have radio buttons that hide/show different parts of the ui, and have the radio button be bound to my data.
Creating and binding the radio buttons works ok, but I am stuck on the next part. I tried using an {{if}} to show different parts of the ui based on the same value that is driving the radio buttons. It shows the correct ui based on the initial value, but when I change the radio button, the if doesn't evaluate with the new value.
Here is a jsfiddle that shows what I have so far.
The part that doesn't work the way I want is
template += '{{if dynamic}}';
template += 'dynamic';
template += '{{else}}';
template += 'static';
template += '{{/if}}';
template += "</div>";
Is it even possible to do what I want with jsviews? I am trying to get rid of a bunch of code that was handling all the clicks and hiding and showing manually.

Ok, so it seems it was a simple fix. It just isn't documented anywhere that I could find.
If I change
{{if dynamic}}
to
{^{if dynamic}}
then it magically becomes dynamic. See here.

That's correct.
Certainly it is documented (in quite a few places actually). Here are some of them:
http://www.jsviews.com/#jsviews - see: "And change {{if ...}} to {^{if ...}} and it too will be data-bound."
http://www.jsviews.com/#jsvplaying - see: "Any regular JsRender tag {{someTag ...}} - whether built-in or custom - can be data-linked by adding the ^: {^{someTag ...}}."
http://www.jsviews.com/#samples/editable/tags - see: "Data-linked tags: {^{for ...}}, {^{:...}}, etc."

Related

ng-repeat with ng-selected

I am trying to figure out how to generate list of option elements using ng-repeat, but one of them to be marked as the selected option on load.
After googling, what I found is this base, which I modified by adding the selected property to the data objects
https://plnkr.co/edit/7g4MeAQnG4PzpnrebBGc?p=preview
However, it seems that ng-selected="option.selected == true" has no effect :(
Why? I also have the more complex example here: http://jsfiddle.net/ej5fx3kr/14/ which works, although I am not sure what is the difference, or what is the model here used for (note: changing the model name from "program" to anything, it still works... so not sure what is the purpose).
Bonus points: How do I debug code in AngularJS in directives? Like experiment in debug mode line by line to actually see what are the variable values in that particular scope, what is available to use, etc...
My ultimate goal in this question, is to load list of values via ajax on page load in the controller, IF there is a routeParam in the URL, find it in the list of loaded values, and add selected attribute, then set selected=true in the generated HTML on page load, otherwise not pre-select anything in the populated select box on the page load, so this is why its important for me to understand this on the simplest example before trying to plug this in.
Thanks!
The "Angular Way" to handle this is to use ng-options instead of ng-repeat, and then simply set the model equal to the default value on controller load.
For example:
<select ng-options="option.name for option in data.availableOptions"
ng-model="selectedItem"></select>
$scope.selectedItem=$scope.data.availableOptions[2];
For a more advanced case, where your ng-model might not be the object in the array, but a single property, you can use a modified version of ng-options:
<select ng-options="option.id as option.name for option in data.availableOptions"
ng-model="selectedId"></select>
$scope.selectedId = '2';
Here is a modified version of your plunker showing these different possibilities: https://plnkr.co/edit/xzYmXf8C3WuZaelwj5hO?p=preview
Using ng-selected = true inside ng-repeat would solve this .
However be sure of the data that you call in ng-repeat.For additional debugging and experiment line by line use chrome debugger .go to source tab and set break points on the js lines that you need to debug.This will let you debug line by line by pause and play . Hope this helps.Thanks

Javascript change the value of innerHTML or innerText not working

I am working on a form (which comes from the Laserfiche Forms application) and I am trying to change the text on a button that currently reads "Auto Fill" which is very non-descriptive since I have 5 of those buttons.
A little backstory: My code used to work and then all of a sudden one day it doesn't and creates an error where the user can only see the "Submit" button and the title of the form, but as soon as I comment out the below code the form works again but then I have those non-descriptive buttons again.
Is something wrong with my code?
document.getElementById("lookup1573").innerHTML = "Fill Section";
On button inspection, I see something a little odd:
<button id="lookup1573" class="autofill" type="button vo="d">Auto fill</button>
You had a typo in the html:
type="button vo="d"
This is the correct way:
<button id="lookup1573" class="autofill" type="button">Auto fill</button>
Here is the full example:
https://jsfiddle.net/o2er21v0/
That is not a typo but a customer parameter of Forms.
So here is the easy way to use these kind of things with forms:
Firstly, give all of your elements classes. Whilst outside of using Forms it is recommended to use ID's to reference your elements, doing that with Forms will give you more work, tenfold.
To note about Autofill buttons: they only appear on lookups that you have enabled them on (unless you are using an old version of Forms) and will appear next to the last element in your lookup (if that makes sense).
To change the name of your autofill buttons you are going to have to do so after the page has loaded.
Below is example code to do just that, assuming that the element that has the Autofill button you have given it a class of "vendorName".
The "vo" is actually very useful as you can use it to easily interact with your field content in conjunction with your classes. In the below example I am changing what is in the field without having to go into the code and work out what the number of the id is. This makes any code you make more portable as you can then implement it in other projects, projects where you ID numbers will be different. This is so flexible that it does not matter if the "vendorName" element is a normal text input, multi-line text area or a drop down menu as that same piece of code will work the same.
4:
$(function() {
$( ".vendorName .autofill").text( "Fill Section" );
});
5:
$( ".vendorName [vo]").val( "A New Vendor Name" );
Forms already uses the jQuery library so this will work just fine. Remember to give all of your elements a class (I usually name it the same as the variable). You can also give them multiple classes by separating the classes with a space.

C# ASP.MVC Get checkbox value using Html.EditFor and JavaScript

Just wondering, Imagine I have a checkbox like this:
<input type="checkbox" id="situationcontrol" name="situationcontrol">
I could check if this is checked or not by using this JavaScript code:
var situationcontrol = $("#situationcontrol").prop('checked');
Now I am wondering how this would work if you make a checkbox using #Html.EditorFor
Like this:
#Html.EditorFor(model =>Model.ServiceDeliveryMutableObjects.SituationControl)
I tried to change the same javascript code with the new generated ID
var situationcontrol = $("#ServiceDeliveryMutableObjects.SituationControl").prop('checked');
But that doesnt seems to work.
Any Idea how this would work?
Thanks
Edit: When I inspect element in browser when I use #Html.EditFor
EDIT
Didn't snap to that until you posted the rendered output. The . is not valid in HTML ids, so Razor uses underscores instead. So, the id you should be selecting is #ServiceDeliveryMutalObjects_SituationalControl, rather than #ServiceDeliveryMutalObjects.SituationalControl. Other than that, the rest of my original answer applies.
ORIGINAL
First, actually it's better to use:
$('#foo').is(':checked')
Now, as for using EditorFor, technically, this doesn't change anything. The id will obviously be based on the object graph, i.e. #ServiceDeliveryMutalObjects_SituationalControl, but nothing changes about the actual rendering of the HTML element. I emphasized "technically", here, because while that should be case, there's no default editor template that will actually render a checkbox input. The default is a text box, and a text box, obviously will not have a checked property. This can be corrected by either:
Use CheckBoxFor instead. That way, you're assured of getting an actual checkbox input.
Assuming this property is a boolean, you can create the view Views/Shared/EditorTemplates/Boolean.cshtml with something like:
#model bool?
#Html.CheckBox("", Model)
Then, EditorFor will use this template, and generate a checkbox input.
Finally, it may just be a typo in your question, but you want lowercase "model", not "Model", on the right side of your expression. In other words, it needs to match the left side of the lambda. I tend to avoid using model in these expressions, as not only is it more to type than needed, but you can easily get confused between "model" and "Model", especially with Intellisense's autocomplete. For example,
#Html.EditorFor(m => m.ServiceDeliveryMutableObjects.SituationControl)
You can change your code like this
Var situationcontrol = $("#ServiceDeliveryMutableObjects_SituationControl").prop('checked');
You need to remove .in Id of elements in mvc reazor view it's will convert '.' To '_' when we provide in elements name.

KendoUI Switch control with AngularJS

I am trying to use kendo UI's switch control (http://demos.telerik.com/kendo-ui/web/mobile/switch.html) with angularjs. I am having problem that the value is not being bound with model. I am using it like this:
<input type="checkbox" id="locked" kendo-mobile-switch on-label="Yes" off-label="No" ng-model="Model.IsLocked" checked="{{Model.IsLocked}}" data-role="switch">
Basically the variable in model keep the value received from db irrespective of the state on UI.
Second problem I am having is with on and off labels that it keeps on displaying default On and Off.
I opened an issue on the github site and a fix was applied. See this link:
"I pushed a fix, it should work now if you use k-ng-model. The plain ng-model is still broken."
https://github.com/kendo-labs/angular-kendo/issues/333
The second problem (the on/off labels) is because it should be:
k-on-label="'Yes'" k-off-label="'No'"
Note the string literals, otherwise it is interpreted as a variable.

Emberjs handlebars content binding edit field not working

I have an emberJS object, viewed by an editablefield view, in order to be able to edit it with bindings.
I modify the view in order to be able to replace links in the text.
My problem is that if I use the inside views (Zs.RealValue) render function, it won't refresh on each update, like the simple {{value}} would do, only if I erase the text and after erase the first change.
I have a simple example here:
Steps to do: double click on one of the edit fields, the edit box appears, try modify the value, you will see, that the simple view is being updated, but not the other text view.
http://jsfiddle.net/symunona/hCjEc/7/
The problem appears because you try to implement the render function yourself in RealValue. If you change RealValue to just this:
Zs.RealValue = Ember.View.extend({
template: Ember.Handlebars.compile("{{value}}")
});
then the example works.

Categories

Resources