In my listview template I want to use some databound elements. For example I have next template:
<script type="text/x-kendo-tmpl" id="phoneView">
<div style="width:301px">
<span style="width:100px" data-role="tooltip" data-position="top" data-bind="val: tooltips.phoneNumber"><input type="text" data-bind="value: number" /></span>
<span style="width:45px" data-role="tooltip" data-position="top" data-bind="val: tooltips.phoneExt"><input type="text" data-bind="value: ext" /></span>
<span data-role="tooltip" data-position="top" data-bind="val: tooltips.removePhone"><a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span> Delete</a></span>
</div>
</script>
for listview
<div data-role="listview" id="phones"
data-template="phoneView"
data-bind="source: phones"></div>
when I bound data to form this listview shows rows with empty textboxes without data for each row in phones source and no tooltips.
But if I start editing some row by (for example) next code:
var listView = $("#phones").data("kendoListView");
listView.edit(listView.element.children().first());
Then edited row works perfectly.
So my question is - Is this possible to use MVVM data binding inside "view" list view templates in this case?
There is no binding called "val" hence the problem. There should even be an exception thrown. The following should work though:
<script type="text/x-kendo-tmpl" id="phoneView">
<div style="width:301px">
<span data-role="tooltip" data-filter="input"><input type="text" data-bind="value: number, attr: {title:tooltips.phone}" /></span>
<span data-role="tooltip" data-filter="input">
<input type="text" data-bind="value: ext,attr:{title:tooltips.ext}" />
</span>
<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span> Delete</a>
</div>
</script>
Here is a live demo: http://trykendoui.telerik.com/#korchev/IGIJ
Related
here is the website http://www.checker.freeproxy.ru/checker/
am trying to fill in the textbox using webbrowser how ever the textbox in webbrowser does not have any id at all here is the html source to the textbox.
<p class="lead">paste proxies you'd like to check below (100 max per time)</p>
<form method="post" action="/checker/" id="checker-form">
<fieldset>
<textarea rows="3"></textarea>
</fieldset>
<p id="checker-form-toolbar">
<button type="submit" class="btn btn-primary btn-block" data-checking-text="Checking proxies...">Check proxies</button>
</p>
i even tried
wb.Document.getElementById("textarea").focus
wb.Document.getElementById("textarea").innerText = Text4.Text
it dont work
I would like to put check this checkbox with selenium in ruby programing.
but i can`t do put check. how should I do?
Now, I make below code.
# code
element = #driver.find_element(:xpath, '//*
[#id="lookCheck10"]/div[1]/div[2]/div[1]/label')
#driver.execute_script("arguments[0].click();", element);
# html
<div class="e-select-box p-look-bike__type-box">
<div class="e-title">
<input type="hidden" name="data[Reserve][types][10]"
id="lookCheck10_" value="0"/><input type="checkbox"
name="data[Reserve][types][10]" id="lookCheck10" value="1"
checked="checked"/> <label
for="lookCheck10">BIKE</label>
</div>
<div class="e-media">
<div class="e-media__body p-look-bike__type-detail">
<p>this is good for family</p>
</div>
<div class="e-media__image p-look-bike__type-image">
<img src="/images/reserve/img_biketype_10.jpg" alt="bike">
</div>
</div>
</div>
I am assuming you want to select a checkbox with label 'BIKE'. For that, use below code-
element = #driver.find_element(:xpath, '//*[#id="lookCheck10"]')
#driver.execute_script("arguments[0].click();", element);
I'm running into a problem with a Kendo validator. Three fields are set up for validation. Tabbing through them, the first name and last name fields show the expected message, but after tabbing through the from date field, the first name and last name messages get replaced with the from date message. Then, upon calling the validate() method, the errors array is empty even though validation fails. Also, if the save button is clicked without tabbing through the fields, the errors for the fields are not displayed at all.
Another strange thing is that if the spans for the messages are removed, all messages appear next to the first name field - they aren't displayed next to the corresponding input.
Any insight as to get this working properly would be appreciated.
the Script and HTML:
$(document).ready(function() {
$("#fn").kendoMaskedTextBox();
$("#ln").kendoMaskedTextBox();
$("#from").kendoDatePicker({
format: "MM/dd/yyyy"
});
$("#thru").kendoDatePicker({
format: "MM/dd/yyyy"
});
$("#btnSave").kendoButton({
icon: "tick",
click: function() {
if (!vld.validate())
alert(vld.errors.length);
}
});
var vld = $("#myForm").kendoValidator().data('kendoValidator');
})
<div id="myForm">
<p>
<label for="fn" class="myLabel">First Name:</label>
<input id="fn" required validationMessage="{0} Required" />
<span class="k-invalid-msg" data-for="fn"></span>
</p>
<p>
<label for="ln" class="myLabel">Last Name:</label>
<input id="ln" required validationMessage="{0} Required" />
<span class="k-invalid-msg" data-for="ln"></span>
</p>
<p>
<label for="from" class="myLabel">Period:</label>
<input id="from" required validationMessage="From date is required" />
<span> - </span>
<input id="thru" />
<span class="k-invalid-msg" data-for="from"></span>
</p>
<p>
<label class="myLabel"></label>
<button id="btnSave" class="btn">Save</button>
</p>
</div>
jsFiddle link: http://jsfiddle.net/artrfkmw/1/
Okay, it seems a/the trick to make this work is to set the values of the data-for attributes of the message spans to the name attribute of the input tag, not the id tag. So in the above example, adding name tags to the input elements is the quick fix:
<div id="myForm">
<p>
<label for="fn" class="myLabel">First Name:</label>
<input id="fn" name="fn" required validationMessage="{0} Required" />
<span class="k-invalid-msg" data-for="fn"></span>
</p>
<p>
<label for="ln" class="myLabel">Last Name:</label>
<input id="ln" name="ln" required validationMessage="{0} Required" />
<span class="k-invalid-msg" data-for="ln"></span>
</p>
<p>
<label for="from" name="from" class="myLabel">Period:</label>
<input id="from" required validationMessage="From date is required" />
<span> - </span>
<input id="thru" />
<span class="k-invalid-msg" data-for="from"></span>
</p>
<p>
<label class="myLabel"></label>
<button id="btnSave" class="btn" >Save</button>
</p>
</div>
and how can I trasmit data between popup and page that have called popup?
I would like to do a ajax form for user registration inside popup "reveal" in zurb foundation.
Do you think is possible?
This answer might be a little late, but you can absolutely put a form into the reveal popup. For instance, if you wanted a login dialog to show up when they click a login button:
At the bottom of your HTML (after all the rows), create the content for the popup:
<div id="login-modal" class="reveal-modal" style="width: 400px; background: black; color: white;">
<h2>Login</h2>
<form id="login-form" class="six">
<div class="row">
<label for="username">Username</label>
<input type="text" name="username" />
<label for="password">Password</label>
<input type="password" name="password" />
</div>
<div class="row">
<div class="right" style="margin-top: 20px;">
<button type="reset" class="button radius alert">Reset</button>
<button type="submit" class="button radius">Login</button>
</div>
</div>
</form>
<a class="close-reveal-modal">×</a>
</div>
Then you can display it using one of their methods. The new foundation 3.0 let you display it super easy like:
<a href="#"
data-reveal-id="login-modal"
data-animation="fadeAndPop"
data-animationspeed="300"
data-closeonbackgroundclick="true"
data-dismissmodalclass="close-reveal-modal">Login</a>
Hope that helps!
try this in app.js.
Then use reveal class on any anchor
$('a.reveal').click(function(event) {
event.preventDefault();
var $div = $('<div>').addClass('reveal-modal').appendTo('body'),
$this = $(this);
$div.empty().html('<p align="center"><img src="application/public/loading.gif" /></p>').append('<a class="close-reveal-modal">×</a>').reveal();
$.get($this.attr('href'), function(data) {
return $div.empty().html(data).append('<a class="close-reveal-modal">×</a>').reveal();
});
});
I am using MVC3 and displaying my data in a webgrid. I would like to display loading indicator (loading image) displayed when I filter/search. What is the best approach?
My search filter (code):
#using (Html.BeginForm())
{
<fieldset id="fieldset1" class="coolfieldset">
<legend>Search for Towers Watson Subscribers/Contacts</legend>
<div class="div-table">
<div class="div-table-row">
<div class="div-table-col">Reg Date:</div>
<div class="div-table-col"><input id="regDateFrom" class="datepicker" name="regDateFrom" value="#regDateFrom" type="text" /> to <input id="regDateEnd" class="datepicker" value="#regDateEnd" name="regDateEnd" type="text" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col">Profile Mod Date:</div>
<div class="div-table-col"><input type="text" id="profileModDateFrom" class="datepicker" value="#profileModDateFrom" name="profileModDateFrom" /> to <input id="profileModDateEnd" class="datepicker" value="#profileModDateEnd" name="profileModDateEnd" type="text" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col">Last Name:</div>
<div class="div-table-col"><input type="text" id="lastName" name="lastName" value="#lastName" /></div>
</div>
<div class="div-table-row">
<div class="div-table-col"><input id="search" name="search" type="submit" value="Search" /></div>
<div class="div-table-col"></div>
</div>
</div>
</fieldset>
}
{#Html.Partial("List_Ajax", Model)}
http://www.ajaxload.info/ lets you create a nice loading gif. Create an image, and place it in a div as below. Then bind the search button with jQuery to display the hidden div when clicked.
Place the following div where you would like the loading icon to appear.
<div id="loadingDiv" style="display:none"><img src="loading.gif"></div>
Then this in your Javascript file
$(document).ready(){
$('#search').click(function(){
$('#loadingDiv').show();
});
});
Then when you're done loading, simply:
function SomeCallBackEvent(){
$('#loadingDiv').hide();
};