I have implemented a Kendo DropDownlist as below:
<kendo-dropdownlist v-if="PaymentTypeList != null"
name='PayType'
class="form-control"
v-model="vModel.PayType"
:data-text-field="'Text'"
:data-value-field="'Id'"
:auto-bind="true"
:data-source="PaymentTypeList">
</kendo-dropdownlist>
I have to render only one div below according the value selected on the dropdown list.
<div v-if="vModel.PayType == PaymentTypes.Cash">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<label>Pay Code
<span class="text-red">*</span>
</label>
<input type="text" class="form-control" id="PayCode" name="PayCode" autocomplete="off" v-model="vModel.PayCode">
</div>
</div>
</div>
</div>
<div v-else>
<kendo-dropdownlist v-model="dropdownlistValue"
:data-source="dataSourceArray"
:data-text-field="'text'"
:data-value-field="'value'">
</kendo-dropdownlist>
</div>
But the first div is never shown whatever is the condition either false or true.
When i try with the v-show it works.
How should i make this code able to work on v-if.
The plunker implementation is here on the link
https://plnkr.co/edit/Xbhm67KjnpovOWNBy2O2?p=preview
Edited: According to vue js
v-if is also lazy: if the condition is false on initial render, it will not do anything - the conditional block won’t be rendered until the condition becomes true for the first time.
But in my case when the initial condition is true the first div is rendered, and after that the first division is never rendered whatever will be the condition either true or false.
I suggest you solve this issue by using v-show. v-if is "better" suited for (not) rendering the DOM at all opposed to v-show that is just manipulating display of DOM (hidden/shown).
Forked your Plunker to this one: https://plnkr.co/edit/PjOhBbuTO6czxvQQ10da?p=preview (had to introduce "empty" select value).
Hope it helps...
Related
What I am trying to do set object user variable attribute based on click.
`
<form class="container" th:action="#{/processSignup}" method="post"
th:object="${user}">
<div class="switch">
<div class="MenteeSignUp" onclick="tab1();" th:onclick="*{}" >Mentee</div>
<div class="MentorSignUp" onclick="tab2();" th:value="MENTOR" th:field="*{userRole}">Mentor</div>
</div>
`
Trying to add different role-based what user click which either mentor or mentee which you can see from the screenshot.
I am kind of new to thyme leaf, so I tried to have th:onClick and then tried to assign it but it didn't work
form
The code you have there doesn't really make sense. <div />s do not have a value attribute, and the expression in a th:onclick must be valid javascript (instead you have a blank selection variable expressions: th:onclick="*{}"). Maybe you're looking for something like this?
<form class="container" th:action="#{/processSignup}" method="post" th:object="${user}">
<input type="hidden" th:field="*{userRole}" id="userRole" />
<div class="switch">
<div class="MenteeSignUp" onclick="document.getElementById('userRole').value = 'MENTEE';">Mentee</div>
<div class="MentorSignUp" onclick="document.getElementById('userRole').value = 'MENTOR';">Mentor</div>
</div>
<div class="bli-category">
<div class="row ng-scope" ng-repeat="placementtrack by $index">
<div class="col-sm-12">
<div class="col-sm-1 bli-category-checkbox">
<input class="bli-check-box ng-valid" type="checkbox" ng-click="addPlacement" ng-checked="checkedPlacementIndex" ng-model="selectedPlacement">
</div>
<div class="col-sm-8 bli-category-content">
<div class="ng-binding" ng-bind="placement.placementName">page_details</div>
</div>
</div>
</div>
I need to select the checkbox in class='bli-check-box ng-valid' for the text in class='ng-binding'
When I try to get the xpath like
//input[#class='bli-check-box ng-valid']
it selects all the 4-5 checkboxes
To select the checkbox in class='bli-check-box ng-valid' with respect to the text in class='ng-binding' i.e. page_details you can use the following xpath :
//div[#class='bli-category']//div[#class='ng-binding' and contains(.,'page_details')]//preceding::input[#class='bli-check-box ng-valid']
Note : As the element is an Angular element you have to induce wait for the element to be clickable before attempting to click.
//div[text='page_detials' and class='ng-binding']/../preceding-sibling::div//input[class='bli-check-box ng-valid']
The above xpath starts with finding the node which has the custom text that you know. It then traverses to its parent and then its previous sibling which in your case houses your required input node. So after traversing to the div you select its child which is your required input node.
I have a list of similar looking DIVs without any Div ID, except one has a check box checked and others doesn't. What i need is to find the value from a child tag only if a radio button is selected.
Below is a simpler version of my code.
<div class = "XYZ">
<input type="radio" checked>
<input type="hidden" value="This is a great thing 1">
</div>
<div class = "XYZ">
<input type="radio">
<input type="hidden" value="This is a great thing 2">
</div>
Result needed is
This is a great thing 1
Unfortunately the source code cannot be changed.
Your xpath should look for a div that contains the checked input and to get the value for the one that has value attribute.
First selector returns the input, the second returns the value.
//div[.//input[#checked]]/input[#value]
//div[.//input[#checked]]/input/#value
As an alternative you can use the following sibling:
//input[#checked]/following-sibling::input
If you want to also use the class of the parent div:
//div[#class='XYZ']/input[#checked]/following-sibling::input
I recently started using Google's new method of Recaptcha - their new Invisible Recaptcha. I realized that the implementation of this version was a little different, as you attach the recaptcha attributes directly to your submit button which then calls google's recaptcha api and begins the verification process. I have all of that working fine, but the one major issue that I am having is with the "Protected by recaptcha" badge positioning.
Upon adding the recaptcha configuration to my submit button, I start seeing the badge on the right of my screen. According to other sites, this badge is supposed to just be a square recaptcha logo until it is hovered and then it is supposed to slide out to be the large rectangle that I am seeing initially on my site.
Here is an image of what I am seeing on my site after implementing the invisible recaptcha.
Here is the submit button code containing the recaptcha attributes:
<button class="btn btn-primary btn-block g-recaptcha" data-sitekey="key"
data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>
Note: The other data-badge options such as inline and bottomleft cause the same positioning issues.
The code of of the form containing the button:
<form action="processjoin.php" method="post" id="signupform" style="padding-top:10px;padding-bottom:10px;max-width:50%;">
<h2 class="sr-only">Login Form</h2>
<div></div>
<div class="illustration"><i class="icon ion-ios-pulse-strong"></i>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<input type="text" name="name" placeholder="Your Name" class="form-control" id="name" />
</div>
<div class="form-group">
<input type="text" name="username" placeholder="Username" class="form-control" id="username" />
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<input type="email" name="email" placeholder="Email" class="form-control" id="email" />
</div>
<div class="form-group">
<input type="password" name="password" placeholder="Password" class="form-control" id="password" />
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block g-recaptcha" data-sitekey="6LfdMhkUAAAAAHl-LXZm_gPP1g-UX0aWt8sMR4uW" data-callback="submitsecure" data-badge="bottomright" type="submit">Get Started</button>
</div>
<a href="#" class="forgot">
<div></div>Already have an account? Sign in.</a>
</div>
</form>
I am experiencing two issues with this recaptcha badge:
The badge is glitched outside of its bounding box/border type thing
It also isn't positioned partially off-screen until hovered, like it is supposed to be. I am seeing the full rectangle before I interact with it in any way with my mouse. I should be seeing the square logo until I hover over it, and it slides out to be the full rectangle.
Basically, I need to figure out how to position this properly so that it slides in from off-screen like it is supposed to, and is contained properly inside of its border.
Google Chrome Developer tools tell me that these are the current attributes of the badge div, generated when the window is loaded:
I really appreciate any help that you can provide! If I'm incorrect in thinking that the badge is required, please correct me and I'll force its removal with CSS, however, I'm afraid that this may mess up the captcha verification process and violate Google's policy.
This might help: https://developers.google.com/recaptcha/docs/invisible#config
You can set data-badge="inline" to allow you to control the CSS.
After lots of trial and error, I figured out that the recaptcha badge was positioning to its containing element rather than to the body, and it was also inheriting its line-height from its containing element.
Since I was not directly able to remove the badge from its containing element and move it to the body, I solved the issue with JQuery and a slight CSS change.
JQuery: Appened the badge to the body rather than its containing element (the form)
In order to do this, I had to ensure that the badge had already been fully loaded into the site. Google makes this difficult, but I was able to do it by using jQuery.initialize by timpler.
Once I had the initialize.min.js running on my page, I simply used this code:
jQuery(document).ready(function() {
$('.grecaptcha-badge').appendTo("body"); //fix recaptcha positioning to body
});
$.initialize(".grecaptcha-badge", function() {
$(this).appendTo("body"); //fix recaptcha positioning to body, even if it loads after the page
});
CSS: Added a change to the line-height to position the badge properly with its container
.grecaptcha-badge {
line-height:50px !important;
}
This was a tough one to figure out, but in the end it simply came down to the badge inheriting a few too many attributes from its parent. I hope this helps someone in the future!
You can add captcha in a div element at any place on the page
<div class="g-recaptcha"
data-sitekey="your_site_key"
data-callback="onSubmit"
data-size="invisible">
</div>
When you submit the form the following javascript should be called to start captcha validation
grecaptcha.execute();
The onSubmit function (specified in data-callback tag attribute) will be called on successful captcha validation. There you get the recaptcha token that can be injected as hidden field to your form for backend validation.
function onSubmit(recaptchaToken) {
// inject token as hidden form field and submit form
}
What is the proper way to edit items in a listview when using Kendo UI Mobile & MVVM?
I don't get the expected results when using the following:
HTML
<div id="itemsView"
data-role="view"
data-model="vm">
<ul data-role="listview" data-bind="source: items"
data-template="itemsTemplate">
</ul>
<script id="itemsTemplate" type="text/x-kendo-template">
<li>
#=Name#
</li>
</script>
<input type="text" data-bind="value: newValue" />
<button data-role="button" data-bind="click: update">update</button>
</div>
JavaScript
var vm = kendo.observable({
items: [{
Name: "Item1"}],
newValue: '',
update: function(e) {
var item = this.get("items")[0];
item.set("Name", this.get("newValue"));
//adding the follwoing line makes it work as expected
kendo.bind($('#itemsView'), vm);
}
});
kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide"});
I expect the listview to reflect the change to the Name property of that item. Instead, a new item is added to the listview. Examining the array reveals that there is no additional item, and that the change was made. (re)Binding the view to the view-model updates the list to reflect the change. Re-Binding after a change like this doesn't seem to make any sense.
Here is the jsfiddle:
http://jsfiddle.net/5aCYp/2/
Not sure if I understand your question properly: but this is how I did something similar with Kendo Web UI, I expect mobile is not so different from Web UI from API perspective.
$element.kendoListView({
dataSource: list,
template: idt,
editTemplate: iet,
autoBind: true
});
The way I bind the listview is different, but I guess you can get similar results with your method as well.
I pass two templates to the list view, one for displaying and one for editing.
Display template contains a button (or any element) with css class k-edit to which kendo will automatically bind the listview edit action.
display template:
<div class="item">
# if (city) { #
#: city #<br />
# } #
# if (postCode) { #
#: postCode #<br />
# } #
<div class="btn">
<span class="k-icon k-edit"></span>Edit
<span class="k-icon k-delete"></span>Delete
</div>
</div>
Edit template
<div class="item editable">
<div>City</div>
<div>
<input type="text" data-bind="value: city" name="city" required="required" validationmessage="*" />
<span data-for="city" class="k-invalid-msg"></span>
</div>
<div>Post Code</div>
<div>
<input type="text" data-bind="value: postCode" name="postCode" required="required" validationmessage="*" />
<span data-for="postCode" class="k-invalid-msg"></span>
</div>
<div class="btn">
<span class="k-icon k-update"></span>Save
<span class="k-icon k-cancel"></span>Cancel
</div>
</div>
Clicking that element will put the current element on edit mode using the editTemplate.
Then on the editTemplate there is another button with k-update class, again to which kendo will automatically bind and call the save method on the data source.
Hopefully this will give you more ideas on how to solve your issue.
The problem was caused by the <li> in the template. The widget already supplies the <li> so the additional <li> messes up the rendering. This question was answered by Petyo in the kendo ui forums