I'm looking for alternative ways of solving a problem. We're using ElFinder for browsing files, and we want to allow the user to change the access rights to a file element through the right-click context menu ("Change permissions"). The solution I have come up with so far is to load a server side ASP.NET usercontrol in a jQuery modal dialog window. This user control will contain the logic needed to add / remove user access to the selected element.
The jQuery Dialog script looks like this (slightly changed for readability), where DisplayItemAccessConfig() is the method that's called from the context menu:
<!-- access control script -->
<script type="text/javascript" charset="utf-8">
function DisplayItemAccessConfig() {
$.getJSON('AccessRights.ashx', function (data) {
var itemName = data["itemName"];
/* set new title (JUST FOR TESTING) */
$(dialog).dialog('option', 'title', itemName);
/* open modal dialog --> */
$(dialog).dialog('open');
});
}
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
},
open: function (type, data) {
$(this).parent().appendTo("form");
}
});
});
</script>
Challenge 1: find a way to reload the user control each time the jQuery popup is displayed - this is to retrieve the current access settings for the selected element. Now it loads when the page is first loaded, since it's just a div element containing an update panel with a placeholder for my usercontrol and visibility set to none. Anyone have any tips here?
Challenge 2: While I am trying to figure that one out I thought it could be worth while asking for other opinions. Is there a better way of solving this? Should I use a pure jQuery with HTML and call server side .ashx methods to retrieve data, instead of an ASP.NET usercontrol?
You can do this by creating a hidden button on inside the uploadpanel and then trigger it like this:
__doPostBack('<%= Button.ClientID %>','');
Personally I would drop the UpdatePanel and go for jQuery AJAX calls to update the content of the dialog window, but this depends on the complexity of your user control. Hard to say without seeing more of your code.
Related
I want to add a new navigation button in telerik radwizard(reference). Is there any way to do so in ASP.NET, I read all the documents shared by telerik but couldn't find a way to achieve it. Any help would be appreciated.
I also had a similar requirement, but was not able to find a out of the box solution to include a custom navigation button for the Telerik RadWizard.
Please in-cooperate the the below JavaScript, which would to add a custom button to the navigation button area:
<telerik:RadScriptManager runat="server"></telerik:RadScriptManager>
<script type="text/javascript">
/* NOTE: This code block is inserted at this location, but not in the main Script block within RadCodeClock at the begining of this page due to the the below error;
'JavaScript runtime error: '$telerik' is undefined'
In order to avoid such errors, move the script tag below the declaration of the ScriptManager.
*/
var $ = $telerik.$;
var oldInitializeEvents = Telerik.Web.UI.RadWizard.prototype._initializeEvents;
Telerik.Web.UI.RadWizard.prototype._initializeEvents = function () {
/*var myLi = $('<li>', { "class": "rwzLI rwzRight" }).appendTo('.rwzNav'); // Add the button adjacent to Next/ Previous*/
var myLi = $('<li>', { "class": "rwzLI" }).appendTo('.rwzNav'); // Add the button adjacent to Cancel/ Submit
var spanElement = $('<span>').addClass("rwzText").text("Save");
$("<button>", {
"id": "rwCustNavBtn_Save", "class": "rwzButton", "type": "button", click: function myfunction() {
CustNavBtn_Save_OnClick(); // Save the Grant
return false;
}
}).append(spanElement).appendTo(myLi);
oldInitializeEvents.call(this);
}
</script>
Note:
Ensure to include the above JavaScript tag below the declaration of the ScriptManager, to avoid runtime errors.
rwzRight CSS class determine the location of the custom button and make use it based on your requirement (refer the comments within the script tag)
Hope this is what you are after and Mark as Reply if so. Good luck!
Source: RadWziard navigation button templates/control
I want to capture which button is clicked in page load method of code behind file.
Button is user control button and It does not post back. Since it used by many other forms, I don't want to changes that button.
I tried this
Dim ButtonID As String = Request("btnRefresh.ID")
But it doesn't work.
Is it possible to know without touching in user control and using Javascript?
Thank you
As described here How to check whether ASP.NET button is clicked or not on page load:
The method: Request.Params.Get("__EVENTTARGET"); will work for
CheckBoxes, DropDownLists, LinkButtons, etc.. but this does not work
for Button controls such as Buttons and ImageButtons
But you have a workaround, first of all you have to define a hidden field in the Parent Page. In this field you will store which button inside the user control was clicked using javascript/jquery. And then in your Parent Page Page_Load method you just read the hiddenField.Value property:
JQuery
1) Add listener to every input type submit button:
$(document).ready(function () {
$("input[type=\"submit\"]").on("click", function () {
alert(this.name);
$("#hiddenField1").val(this.name);
});
});
2) [Better one] Add listener to some indentificable div inside the user control and delegate the event to child inputs like this:
$(document).ready(function () {
$("#someElementOfUserControl").on("click", "input[type=\"submit\"]", function () {
alert(this.name);
$("#hiddenField1").val(this.name);
});
});
Javascript
Since everything done with JQuery can be done with Javascript you can do the following (i will not write both samples, just one):
function handleClick(event) {
alert(event.target.name);
document.getElementById("hiddenField1").value = event.target.name;
}
var inputsInUC = document.getElementsByTagName('input');
for (i = 0; i < inputsInUC.length; i++) {
inputsInUC[i].addEventListener('click', handleClick, false);
}
Remember to define this javascript after all your html elements.
EDIT:
Also, for the completeness of the answer let me tell you that the proper way in case you can change the user control behaviour is to use events as described here How do i raise an event in a usercontrol and catch it in mainpage?
I am using jquery-ui modal with gridview to add/update records in an asp.net application. The user can click on the cross to close the modal? I want to clear the modal content (including any ViewState). So far I have used the following code:
$('#editData').dialog({
....
close: function () {
**// Here I want to clear the form**
}
You can just reset the form:
$('#formId').trigger("reset");
$('#editData').dialog({
....
close: function () {
// Here I want to clear the form
$('#formId').trigger("reset");
});
http://jsfiddle.net/pNALN/1/
You can also use document.forms["formId"].reset(); if you wanted to achieve it via JavasScript.
On my page I got the following user control:
<div class="editFormDialog" style="display: none; font-size: 12px;">
<mm:Form ID="editUC" ShowCreateButton="false" ShowEditButton="true" runat="server" />
</div>
This UC has a public property that takes a DataSet, and updates some fields in the UC.
So when I push a button on my page, it calls this property on the UC, and the UC gets updated with data from the DataSet.
So far so good. The problem arise when I want the UC to be a jQuery UI Dialog.
First I create the dialog:
$(document).ready(function() {
$('.editFormDialog').dialog({
autoOpen: false,
height: 700,
width: 780,
modal: true,
bgiframe: true,
title: 'Rediger',
open: function(type, data) {
$(this).parent().appendTo("form");
$(this).css('display', 'block');
}
});
});
And I wan't it to open on a button push (this is not an ASP.NET button, plain HTML):
$('#btnEdit').live('click', function() {
$('.editFormDialog').dialog('open');
});
The dialog opens, but the UC does not contain the correct data.
When the page loads, the UC is updated with default data. Then the user clicks a button, and the data changes but the UC isn't updated. It still contains the default data. Thats the problem.
Do you have any idea why?
Help will be much appreciated!
I found the solution for this issue. It turns out that when you append to the form, you need to make sure this snippet of code is inside jquery document ready:
$("#dialog1").parent().appendTo($("form:first"));
So the whole thing should look like this:
jQuery(document).ready(function() {
$("#<%=myFamilyGrid.ClientID %>").tablesorter({
sortList: [[0, 1]]
})
.tablesorterPager({ container: $("#pager") });
$("#dialog1").dialog({
modal: true,
height: 370,
width: "350px",
autoOpen: false,
bgiframe: false,
zIndex: 3999
});
$("#dialog1").parent().appendTo($("form:first"));
});
Hope this helps!
Exactly what happens when you "call the property" (I would assume you mean it's a method)? Does the page perform a postback? If that's the case, maybe the postback is getting blocked somehow when you mix jQuery into the scenario?
Since you are using Update Panels, how are you injecting the call to the javascript in the page? I ask, because there's only one way that work properly on partial postbacks: ScriptManager.RegisterStartupScript(). That allows javascript code to act as if the page was loaded. Of course any other onload javascript may be called too, which may result in the behavior you are seeing.
So,
make sure that your javascript is injected with the script manager.
make sure only the bits of javascript that you want to execute
after a partial postback are
executed
There is also the possibility of turning your UC in a ajax control with a web service to change the datasource. No more partial postbacks then, which usually improve the responsiveness of the page.
I have a LinkButton inside a data list. When I click on this LinkButton, I want to open a modal window and load another html page in it.
Can you guys please help me with this?
You should check out a jQuery plugin like Thickbox, which I've used to do exactly what you've described.
check ModalPopupExtender....It's a component of Ajax Control toolkit.
First download it from from CodePlex ....and when you add reference the *Binary.dll to your project...you can use it within your pages.
I have always been a big fan of YUI, they have great documentation and Examples showing how to set things up. [ i love jQuery too ].
Look at YUI's Container Objects. They have very slick skinable Modal Panels:
http://developer.yahoo.com/yui/container/panel/
Here is a simple example:
http://developer.yahoo.com/yui/examples/container/panel-loading.html
Server Side
button.Attributes.Add("click", "popModal");
Client Side
<script>
function popModal(e) {
// Initialize the temporary Panel to display while waiting for external content to load
var SavingPanel =
new YAHOO.widget.Panel("wait",
{ width: "240px",
fixedcenter: true,
close: false,
draggable: false,
zindex: 1000,
modal: true,
visible: true
}
);
SavingPanel.setHeader("Saving, please wait...");
SavingPanel.setBody('<img src="http://l.yimg.com/a/i/us/per/gr/gp/rel_interstitial_loading.gif" />');
SavingPanel.render(document.body);
}
</script>