I am trying to develop an iphone application using sencha framework .I need to show a list of items in a list.Each cell in the list holds a button also.If the user clicks on a button in a particular index, then a popover needs to be displayer near to the button .I am using the following code to do this
itemTpl : '<div class="div1"><label class = "tag-name-hdr"> {tagnamehdr} </label> <label class = "tag-name-value" style="width:55px;"> value </label> <input type="text" class ="tag-name-text" name="lname" /> <label class = "unit-name" > unit </label> <select class = "unit-name_dropdown" > <option>mg/dr</option> <option>gm/dr</option> <option>m/dr</option> </select> <input type="image" id="popupbtn" class="template_popup_button" src="Images/arrow_more_orange.png" > </div>',
listeners : {
//itemtap : function(list, index, item, e, popupbtn) {
itemtap : function(list, index, item, evt) {
if(evt.getTarget('.template_popup_button')) {
alert(item);
alert(index);
showOverlay(item, evt, index);
}
}
}
Now my issue is that the popover is showing for the selected cell.I need to show the popover near to the clicked button.Is there any way to get the clicked button object to show the overlay/popover near to that.Now I am passing clicked item cell object as parameter to "showOverlay",i need to pass clicked button object
Thanks in advance..
The evt variable holds information about the event. You could check if evt.target is a button (or the button you want to act upon).
Note that if all you want is a single button per cell, you could use the onItemDisclosure config option, that will add a button for you with a handler.
Related
I have a view with a list of objects as its model
#model List<Users>
Inside that view, I have a form and button to submit the form in ASP.NET Core MVC:
<input class="btn btn-success ml-2" style=" width: 100px;"
type="submit" value="#localizer["Save"]" />
I need another button to cancel form submission and redirect to another method but I need to pass the list of Users with redirection at cancel button
I tried
<a asp-controller="User" asp-action="cancel" asp-route-ids="#Model.Select(x => x.id);">Cancel</a>
but it didn't work, the list is empty
If you use asp-route-somekey to set the query, your target list name was recognized as value of the key "Ids",you could see the result as below:
If you do want to pass list to the query,you could try:
<a asp-controller="User" asp-action="Cancel" asp-all-route-data="#(new Dictionary<string, string> { { "Ids[0]", "1" },{ "Ids[1]", "2" } })">Cancel</a>
The result:
However the length of url is limited, it may cause some errors
Issue: How to select multiple paper-cards and know which ones is selected on user long press/tap on the card.
Description:
I have dynamically generated paper-cards and I render them on the page using template Dom-repeat. At present I have included checkboxes on each paper-card so that the user can select those checkbox associated with the paper-card. That way the user on the screen can select multiple cards on which I can action the next functionality.
I guess the better user experience will be that the user be able to tap or click on the paper-card and be able to hold his finger/mouse for say .5sec and be able to select that card rather than checkbox style selection.
If I am able to get a working code snippet of how a multiple paper-card selection is used then I will be able to provide a better UX for the app.
Current Code Snippet:
(here I am using a paper-icon-button to get the user selected paper-card element).
<template is="dom-repeat" items="{{itemsList}}" as="item">
<paper-card style="float:center; width: 95%" class$="
{{_computeCardColorTran(item.type)}}" data-index$="{{item._id}}">
<paper-icon-button icon="icons:arrow-drop-down" style="color:
grey;" id$="bttn#{{item._id}}" item="[[item]]" on-
tap="doSomeDiffAction">
</paper-icon-button>
<iron-image class="pad"
src="../images/image1"
preload
sizing="contain"
style="" >
</iron-image>
</paper-card>
</template>
What I wish to have (something like below) -->
<template is="dom-repeat" items="{{itemsList}}" as="item">
<paper-card style="float:center; width: 95%" class$="
{{_computeCardColorTran(item.type)}}" data-index$="{{item._id}}"
something-like-user-pressed-longed="
callFunctionUserPressedForLong"
>
<paper-icon-button icon="icons:arrow-drop-down" style="color:
grey;" id$="bttn#{{item._id}}" item="[[item]]" on-
tap="doSomeDiffAction">
</paper-icon-button>
<iron-image class="pad"
src="../images/image1"
preload
sizing="contain"
style="" >
</iron-image>
</paper-card>
</template>
And in script javascript function in dom-module I can extract the paper-card selected
function callFunctionUserPressedForLong(e){
var id = e.model.item._id;
console.log('User pressed for long time on the paper-card = '+ id);
}
function doSomeDiffAction(e){
var id = e.model.item._id;
console.log('Not a long press event. User taped or clicked paper card button. Do different action e.g. open popup. = '+
id);
}
Thanks
You have to use on-down and on-up events from Polymer and watch time diff between these two events yourself.
In example below, on-down and on-up event functions are the same for both components (paper-card and paper-icon-button). Inside the on-down function (_onDown), the current time is saved to variable. Inside on-up method (_onUp) is detection for tap/click on button (if time diff between on-down and on-up is <0.5s and event target is the element with id=bttn#{{item._id}} and long-press somewhere inside paper-card (including paper-icon-button).
_onDown(e) {
this.startTime = Date.now()
}
_onUp(e) {
let id = e.model.item._id;
//stopPropagation because this is otherwise called twice - from paper-card and from paper-icon-button
e.stopPropagation()
let id = "1"
if (Date.now() - this.startTime > 500) {
console.log(`long press somewhere inside paper-card :: id=${id}`);
} else if (e.target.id == `bttn#${id}`) {
console.log(`Not a long press event. User taped or clicked paper card button :: id=${id}`);
}
}
<paper-card on-down="_onDown" on-up="_onUp">
<paper-icon-button on-down="_onDown" on-up="_onUp">Tap me</paper-icon-button>
</paper-card>
I would like to have two buttons in my view (called Create), one that submits the form and takes the user back to home page if they are finished and one that submits the form but reloads the rating page to be able to add additional ratings.
Here is the problem that I have right now-
Currently I have one button that has an action result in my controller:
public ActionResult Create(Rating rating)
{
if (ModelState.IsValid)
{
db.Ratings.Add(rating);
db.SaveChanges();
return RedirectToAction("Index");
}
**Additional code that is irrelevant here
}
The problem that I am faced with is that this ActionResult has a Redirect in it to the homepage so when I submit my other button and use this same ActionResult class it is being redirected to the homepage. I am using the javascript onclick event in the view to redirect to the Ratings page when the button is clicked and the form is submitted but if I use this same Action Result class for both buttons it redirects the button I want to keep me on the page to the index page.
How do I create two Action Result classes from the same view, one for each submit button?
Well, how do you determine what the user wants to do?
Both buttons submit the form, so they may as well still use the same action. But you need to differentiate somehow. You can do that with the buttons.
Let's say you have these two buttons:
<input type="submit" name="redirect" value="true" />
<input type="submit" name="redirect" value="false" />
Then you can bind that in your action method:
public ActionResult Create(Rating rating, bool redirect)
{
// other logic
if (redirect)
return RedirectToAction("Index");
else
return View(rating);
}
If you are ever going to have more than two possible options then you might use a string instead of a boolean. Something like:
<input type="submit" name="action" value="redirect" />
<input type="submit" name="action" value="reload" />
And then in the controller:
public ActionResult Create(Rating rating, string action)
{
// other logic
if (action.Equals("redirect"))
return RedirectToAction("Index");
else if (action.Equals("reload"))
return View(rating);
else if //...
//... and so on
}
The point is that the client-side code needs to tell the server-side code what to do somehow. Including that on the form submission itself makes the form submission self-describing and allows the server-side code to handle it easily.
Example of how it use
Html, inside form:
<button type="submit" name="TaskSubmitAction" value="ActionReject" class="btn btn-danger pull-left">Reject</button>
<button type="submit" name="TaskSubmitAction" value="ActionSubmit" class="btn btn-success">Accept</button>
Controller:
public ActionResult TaskSubmit(int? id, string TaskSubmitAction)
{
switch (TaskSubmitAction)
{
case "ActionSubmit":
break;
case "ActionReject":
break;
default: throw new Exception();
}
In your html give both buttons the same 'name' attribute but assign two different values.
<button name="submitBtn" value="valueX"> Button 1 </button>
<button name="submitBtn" value="valueY"> Button 2 </button>
In your server side code get the value of the input button and based on this value carry out different actions
String choice = request.getParamter("submitBtn");
if(choice.equals("valueX"))
//do something
else if(choice.equals("valueY"))
//do something else
I am trying to create a simple HTML Metro App for Windows 8. I want to display a list view, and based on the clicked item display different content on the screen. It sounds trivial, right?
But it doesn't work! Here is my code:
<div id="frameListViewTemplate" data-win-control="WinJS.Binding.Template">
<img data-win-bind="src: picture" class="thumbnail" />
</div>
<div id="basicListView" data-win-control="WinJS.UI.ListView"
data-win-options="{itemDataSource : DataExample.itemList.dataSource, itemTemplate: select('#frameListViewTemplate'),onselectionchanged : handler}">
</div>
Than in the defult.js
var myListView = document.getElementById("basicListView").winControl;
myListView.addEventListener("selectionchanged", handler);
And the handler:
function handler() {
console.log("Inside the handler : ");
}
handler.supportedForProcessing = true;
So the handler is never called. My questions are: How can I add an event listener and its handler to the listview control.
How can I recognize which element on the list view was clicked.
P.S.
The listview is displayed properly in my app.
Thank you for help,
J
To get the item that is "clicked", you need to use itemInvoked. Selection changed would happen when the user cross slides on the item to select it, rather than taping/clicking to "invoke" it.
http://msdn.microsoft.com/en-us/library/windows/apps/br211827.aspx has some basic details.
I am trying to pass the value in a text box as a query parameter in a dojo data grid and would like to get clarified on two questions listed below. The dojo grid initiates a call to the server with the query params to initiate a search and bring back results (that is diplayed on the data grid)
Is it possible to reload the gird based on the value in the text by invoking refresh (dijit.byId("mygrid").refresh
If yes, how can I pass the value of the text box as a query parameter to the data grid.
Listed below is my relevant code
function reload(){
dijit.byId("mygrid").refresh;
}
<div class="test">
<input id="searchParam" >
<button dojoType="dijit.form.Button" type="submit" onclick=reload()>
Search
</button>
</div>
<div dojoType="dojox.grid.DataGrid"
id="mygrid"
jsid="mygrid"
store="dojox.data.JsonRestStore"
target="<c:url value='members' />">
query="{
searchCriteria: ? TODO How to pass value of text box here?,
}"
rowsPerPage="1000"
autoWidth="true"
autoHeight="true"
selectionMode="single"
selectable="true"
errorMessage="Error loading data"
noDataMessage="<span class='dojoxGridNoData'>No members found.</span>">
</div>
You should be able do something like the following:
function reload() {
var val = dojo.byId('searchParam').attr('value');
dijit.byId("mygrid").setQuery({ propName: val });
}
You will need to properly build the query { propName: val }.