Sorry for this question, but today I feel short of ideas. What I need is a good way to implement confirmation of requests in spring mvc. suppose I have
#RequestMapping(params = "action=deleteitem")
public ModelAndView deleteItem(#RequestParam(value = "id") int id){
...
}
I'd like something that I could re-use, like a confirmation page with a parametric message, that then recalls this. I can think of 100 of ways, but none seems clean and elegant. So I'd like a word from who has more experience than me.
I'm using something like below using jQuery overlay and defined modalyesno jsp tag.
Delete button - in rev attribute i provide delete action, that will be requested as user confirm deletion (clicks yes). One <t:modalyesno /> component may work for many Delete buttons.
<a href="#" class="modalInput" rev="deleteitem.html?id=123" rel="#yesno" >Delete</a>
<t:modalyesno id="yesno">
Deleting item. Are You sure ?
</t:modalyesno>
modalyesno.tag:
<%# tag description="Confirmation Dialog" pageEncoding="UTF-8"%>
<%# attribute name="id" required="true" type="java.lang.String" %>
<!-- confirm modal dialog -->
<div class="modal" id="${id}">
<div style="text-align: center;">
<div>
<jsp:doBody/>
</div>
<div class="buttons">
<a class="close" href="#"><span>No</span></a>
<a class="close yes" href="#"><span>Yes</span></a>
</div>
</div>
</div>
jQuery:
$(document).ready(function(){
$(".modalInput").overlay({
mask: {
color: '#aaa',
loadSpeed: 'fast',
opacity: 0.5
},
speed: 'fast',
closeOnClick: true
});
$('.modalInput').click(function(){
var modal = $(this).attr('rel');
var action = $(this).attr('rev');
/* set action on yes button */
$(modal).find('.yes').eq(0).attr('href', action);
});
});
Related
I am using syncfusion grid in blazor.
Here is my Razor :
<div class="card-outer p-0">
<div class="grid-table">
<EjsGrid DataSource="#ManufacturedCoupons" AllowPaging="true">
<GridPageSettings PageCount="5" PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Field=#nameof(Coupon.MaterialIdType) HeaderText="#CommonResource.MaterialID" Width="130" TextAlign="TextAlign.Center"></GridColumn>
<GridColumn Field=#nameof(Coupon.MaterialId) HeaderText="#CommonResource.MaterialID" Width="130" TextAlign="TextAlign.Center"></GridColumn>
<GridColumn Field=#nameof(Coupon.LotNo) HeaderText="#CommonResource.LotNo" Width="100" TextAlign="TextAlign.Center"></GridColumn>
<GridColumn Field=#nameof(Coupon.ArrivalDate) HeaderText="#CommonResource.DeliveryDate" TextAlign="TextAlign.Center" Width="150"></GridColumn>
<GridColumn HeaderText="#CommonResource.Action" TextAlign="TextAlign.Center" Width="120">
<Template>
#{
<div class="actions">
<img src="images/export.svg" alt="#CommonResource.SendToStock" #onclick="SendToStockClicked()">
</div>
}
</Template>
</GridColumn>
</GridColumns>
</EjsGrid>
</div>
</div>
this is my method in code behind file :
protected void SendToStockClicked(Coupon coupon)
{
}
I want to pass selected row data in this method on action button clicked.
How can I achive that ?
I'm not acquainted with syncfusion... I only know blazor. What I know from Blazor is that if you want to call a method and pass it a value you should use a lambda expression. Let's say that you have in your grid an object named MyCoupon of type Coupon, and you want to pass it to a local method called SendToStockClicked...This is how you call SendToStockClicked:
#onclick="#(() => SendToStockClicked(MyCoupon))"
Incidentally, this "javascript:void(0);" is JavaScript, and you shouldn't use JavaScript in Blazor...
Hope this helps...
EDIT
You are half right. It indeed help me so I am marking it true but still I have to do some fixes which I am putting it here.
<Template>
#{
var couponData = (context as Coupon);
<div class="actions">
<a href="javascript:void(0);"
title="#CommonResource.SendToStock"
#onclick="(()=> SendToStockClicked(couponData))">
<img src="images/export.svg"
alt="#CommonResource.SendToStock">
</a>
</div>
}
</Template>
Here I have to take couponData to send my custom method object.
I'm new to aurelia. I'm looking to find the best method for adding classes on click events.
I simply want to click approve or request information, and then add a class to the corresponding "contact card". This class would change the background color.
I know it's probably simple, but I thought I'd look here for the best method.
Here's an image to what I've got:
Apologies for the wait, work has been a bit busy.
This is my first time posting on S.O., so I apologize for any expectations I'm not meeting.
<div class="col-sm-4">
<button class="btn btn-success col-sm-12" click.delegate="goodBoi()">
approve contact
</button>
</div>
<div class="col-sm-4">
<button class="btn btn col-sm-12" click.delegate="requestContact()">
request information
</button>
</div>
</div>
the element to be changed is named "list-group-item", containing the
contact's details(code shown above).
<template>
<div class="contact-list">
<ul class="list-group">
<li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}">
<a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)">
<h4>${contact.firstName} ${contact.lastName}</h4>
<p>${contact.company}</p>
<p>${contact.email}</p>
<h6>${contact.approval}</h6>
</a>
<a route-href="route: contacts; params.bind: {id:contact.id}">
<p>${contact.phoneNumber}</p>
</a>
</li>
</ul>
</div>
goodBoi() {
let result = confirm("Are you sure you want to confirm this contact?");
if (result === true) {
var standingShell = document.getElementsByClassName("list-group-item");
//im hoping here I would add a class to the new variable//
this.contact.approval = 'approved';
this.save();
}
}
//confirms contact, changing color of approved contact//
//same thing here, just plan to give it a different color//
requestContact() {
let contactRequestText = "request sent to contact";
this.routeConfig.navModel.setTitle(this.contact.approval = contactRequestText);
this.ea.publish(new ContactUpdated(this.contact));
}
There are many ways to set a CSS-class using Aurelia. Following I prepared an example gist:
Template:
<template>
<h1>${message}</h1>
<div class="form-group ${clicked ? 'red' : 'blue'}" style="width: 100px; height: 100px;">
</div>
<div class="form-group">
<button click.delegate="save()">
Click me
</button>
</div>
</template>
And the code class:
#autoinject
export class App {
#bindable clicked = false;
save(){
this.clicked = true;
}
}
https://gist.run/?id=425993b04a977466fa685758389aa2b4
But there are other, cleaner ways:
using ref in a custom element.
custom attributes.
Include jQuery for using e.g. $('#myelement').addClass()
I am using the Semantic UI search for the title property of my data object. data has other fields and I want to access them when an object is selected. For example, I want to put the value from the uuid property in a hidden input.
Is there a Semantic UI way of doing this? - I couldn't figure it out from the documentation (I know I can go and search through all data.title's for the selected one, but ... there probably is another way).
$('.ui.search').search({
source: data,
searchFields: [
'title'
]
,onSelect : function(event){
//...some other code
$("#tags").append('<input type="hidden" value="'+ value_from_my_uuid_field +'"');
}
});
<div class="ui search">
<div class="ui icon input">
<i class="search icon"></i>
<input class="prompt" type="text" placeholder="Search subjects...">
</div>
<div class="results"></div>
</div>
Thank you.
The search widget has an onSelect callback you can register (docs) When your user selects a suggestion from the search response, your callback will be called with the selection:
$searchWidget.search({
onSelect: function(result) {
// do something with result.id or whatever
}
});
I had a similar problem (but with ajax source data) and I finally ended up adding hidden content-tags to the results (on server side) like <div style='display:none;' class='id'>12345</div>.
And in the onSelect-callback I search the result (with jquery) for this content:
onSelect : function(event){
var $result = $(this);
var id = $result.find(".id").html();
...
// Return 'default' triggers the default select behaviour of the search module.
return "default";
}
HTH
Semantic UI actually provides a way of accessing any of the object's properties.
I used both dropdown and search classes, as shown in the docs with hidden input values for the properties.
<template name="search_drop">
<div class="ui floating dropdown labeled search icon button">
<i class="search icon"></i>
<span class="text">Search subjects...</span>
<div class="menu">
{{#each subjects}}
<div class="item" data-id="{{this.id}}" data-value="{{this.value}}" data-child="{{this.haschildren}}">{{this.name}}
</div>
{{/each}}
</div>
</div>
</template>
subjects contains my objects with id, name, value, haschildren properties.
Template.search_drop.rendered = function(){
$(".dropdown").dropdown({
onChange: function(value, text, $choice){
console.log(value); //will output the equivalent of {{this.name}}
console.log($choice[0].attributes); //list of attributes
console.log($choice[0].attributes["data-id"].value); //the equivalent of {{this.id}}
}
});
}
I'll start by saying that I am working within the context of DotNetNuke7, which is essentially ASP.net based framework, and that i am fairly new to KO.
I am trying to have one ko viewmodel and have two foreach loops in it. Each loop renders an array which is part of the view model definition like so:
//We build two arrays: one for the users that are in the group
//and one for the users that are not in the group
var nonGroupMembers = $.map(initialData.NonGroupUsers, function (item) { return new Member(item); });
var groupMembers = $.map(initialData.GroupUsers, function (item) { return new Member(item); });
//The members we start with before we added new members
self.SearchTerm = ko.observable('');
self.CircleMembers = ko.observableArray(groupMembers);
self.NonCircleMembers = ko.observableArray(nonGroupMembers);
In the html context (or the asp user control) i placed the following code
<div id="socialDirectory" class="dnnForm dnnMemberDirectory">
<ul id="mdMemberList" class="mdMemberList dnnClear" style="display:none"
data-bind="foreach: { data: NonCircleMembers, afterRender: handleAfterRender },
css: { mdMemberListVisible : Visible }, visible: HasMembers()">
<li class="memberItem">
<div data-bind="visible: $parent.isEven($data)">
<%=MemberItemTemplate %>
</div>
<div data-bind="visible: !$parent.isEven($data)">
<%=MemberAlternateItemTemplate %>
</div>
</li>
</ul>
</div>
<div class="circleDirectory" id="circleDirectory" >
<ul id="cdMembersList" data-bind =" foreach: {data: CircleMembers, afterRender: handleAfterRender}">
<li class="memberItem">
<div class="mdMemberDetails">
<a href="" class="mdMemberImg" data-bind="attr: { title: DisplayName, href: ProfileUrl }">
<span><img data-bind="attr: { src: getProfilePicture(50,50), title: DisplayName }" /></span>
</a>
<ul class="MdMemberInfo">
<li class="mdDisplayName" >
<a href="" title="" class="mdMemberTitle"
data-bind="attr: { title: DisplayName, href: ProfileUrl },
event: { mouseover: $parent.showPopUp }">
<span data-bind="text: DisplayName"></span>
</a>
</li>
<li class="mdTitle"><p><span data-bind="text: Title"></span></p></li>
<li class="mdLocation"><p><span data-bind="text: Location()"></span></p></li>
</ul>
</div>
</li>
</ul>
</div>
Each one of the DIVs which contain the foreach binding loop in them works perfectly well without the other. For instance, the bottom div (id= cdMembersList) will work fine but when I add the upper div with the binding markups it will stop working. The same thing happens vise verse.
Does anybody have a clue why it might happen? Can i not have 2 loops in one view model?
looking forward to solving this mystery.
thanks,
David
Ok, I hate to say it but the answer is very simple as always. I didn't add to my view model the Visible property for
css: { mdMemberListVisible : Visible }
When I created a new script file I simply skipped this property. A few lessons:
You can run more than one loop in one view model.
Always check that you have all the properties defined in the view model.
Also, apparently it helps creating a question on this board since it makes you think clearly about the problem and revisit your actions. I had spent 2 hours chasing this problem before i posted my question, and then it took me 15 minutes to solve it after I posted it.
I have a grid with edit option ,and on edit button click i need to redirect to an edit page .
the requirement is to get this edit page as a popup with background (prev page) greyed out.
i tried modal popup, but the controls are on a separate page .
i tried modal popup with panel and a Iframe : this works..but thean another problem arises.i need to close the page on 'SAVE' or 'Cancel' butotn click .these controls would be on the edit page and not on the prev page .any help is appreciated .
Thanks
Rajat
i'll strongly suggest to use user control as it'll be more handy for you to manage and there is no point creating a whole page for it bcz modal popup uses ajax request and if you try to load the page in it then you have to do form post ... which doesn't go along either use ajax request or form post back ...
plus i was looking for the answer of ur question and i came across this article where it says:
You May use Modal Popup Extender to open some part of the page as
Popup. But there we don't have any property to open other html or aspx
page in Popup window.
http://wiki.asp.net/page.aspx/1378/open-different-page-using-ajax-modal-popup-extender-control/
and also found people asking same question as you did and the response they got is here
use Iframe or user control
Is there a way to open another page using ModalPopup Extender?
and i'll suggest to modify your design as it doesn't do any harm, instead it'll be much more helpful ...
hope this help ...
I've used the Modal Popup Control from the AJAX Control Toolkit several times with good success:
http://www.asp.net/ajax/ajaxcontroltoolkit/Samples/ModalPopup/ModalPopup.aspx
If you are using bootstrap Modal then you can add an iframe into the modal body and load the url of your page inside it.
<div class="modal fade" id="modalC" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Cantidad reservas mensuales</h4>
</div>
<div class="modal-body" id="content">
<iframe src="your new page url">
</div>
</div>
</div>
</div>
Just an idea but what about using the jquery "contents()" function?
You could set an interval to look for an element within the iframe from the parent page.
(You're using .net so you could make it appear upon postback on the iframe's page).
<%# Page Language="VB" AutoEventWireup="false" CodeFile="test.aspx.vb" Inherits="admin_test" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(function () {
var watchForClose = setInterval(function () {
if ($('#testIframe').contents().find('#closeModal').length > 0) {
clearInterval(watchForClose);
/* call function to close modal here..*/
alert('Close modal');
};
}, 100);
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<iframe id="testIframe" src="Default.aspx" width="300" height="300"></iframe>
</div>
</form>
</body>
</html>
The above is looking for an element within the iframe-page with an id of "closeModal". When that element appears you can make a call to the modal's close function, (just replace the alert with the call).
We can open an aspx as popup using IFrame as follows,
First take a button and provide onclick event as follows
<input id="btnSymbol" type="button" value="..." onclick="OpenMyPopUp()" runat="server"/>
Next In the page provide a "Div" tag with id as follows
<div id="MyDialog">
</div>
Then find below the two methods which take the present URL and opens a aspx page in a popup using IFRAME
function OpenMyPopUp(){openPopup('OpenPage.aspx', 530, 800, 'Page Title');}
The Four parameters are sent as follows URL,height,width,title
function openPopup(url, h, w, t) {
if (url != null && h != null && w != null && t != null) {
urlBase = location.href.substring(0, location.href.lastIndexOf("/") + 1);
url = urlBase + url;
$('#MyDialog').html('<iframe border=0 width="100%" height ="100%" src="' + url + '"> </iframe>');
$("#MyDialog").dialog({
title: t,
modal: true,
autoOpen: true,
height: h,
width: w,
resizable: false,
position: ['right-10', 'top+30'],
closeOnEscape: false,
dialogClass: "alert"
});
}}