I am building a dynamic user control (ascx) which contains a placeholder. Inside the placeholder, there will be n tables. Inside each table, in one of the cells i have the link button as below.
HyperLink lnkButton = new HyperLink();
lnkButton.ID = "lnkButton_" + ID.ToString();
lnkButton.Text = tstText;
lnkButton.NavigateUrl = "javascript:JS_Click();";
I have to call a JS function on the link button click (no postback).
In the JS function, i have to get the id of the control that invoked that JS function. In this case, it will be link button. I am writing the below code in the JS Function:
var ctrl = event.srcElement.id;
but i am getting 'Object Required' error in javaScript.
Few other things: This user control will be loaded in default.aspx page and the JS Function i am writing in default.aspx.
I am not sure why this is not working. I am using IE6/7, VS 2005. Is there any other function or way available to get the srcElement.id. Please help.
Try passing this along when you invoke the method
lnkButton.NavigateUrl = "javascript:JS_Click(this);";
then you can write this in your JS_Click event
function JS_Click(obj)
{
alert("Now I have my object " + obj.id);
}
Another option would be to use jQuery and wire up to the click event on your link buttons.
Add a CssClass attribute to the LinkButton's you are creating:
HyperLink lnkButton = new HyperLink();
lnkButton.ID = "lnkButton_" + ID.ToString();
lnkButton.Text = tstText;
lnkButton.CssClass = "linkButton";
Then write the follwoing JS/ JQuery in your ASPX page:
$(document).ready(function()
{
$('.linkButton', '#userControlID').click(function(e)
{
alert('You clicked linkbutton with ID ' + e.target.id);
});
});
In the above example each link button has class="linkButton" and they are contained within your usercontrol with ID="userControlID".
Related
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 have a gridView with search and filtering options, it is listing document from SharePoint Library, when i click on the Document name i added a Modal popup to display Documents properties page, if i update Document's title for example and select save, the item is updated but the gridview is still showing the old title, i need to press Search again in order to refresh the values.
the code i use for model popup is:
<script type="text/javascript">
function openModal(url) {
var options = SP.UI.$create_DialogOptions();
options.url = url;
options.dialogReturnValueCallback = Function.createDelegate(null, CloseCallback);
SP.UI.ModalDialog.showModalDialog(options);
}
// Dialog callback
function CloseCallback(result, target) {
if (result === SP.UI.DialogResult.OK) {
SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
}
}
</script>
what should i do to refresh and bid gridview data when the popup is closed?
on the click of save button, make a serverside call to rebind the gridview. i.e
$(document).ready(function(){
$('id_of_save_button').click(function(){
//ajax call of serverside method to rebind the grid.
});
});
However with asp.net these things become little easy if you use modalPopupExtender that ships with asp.net
Hi for handling sharepoint save event using javascript u can use this function
function PreSaveAction()
{
// write your gride view data bind code
}
I have created a jquery slider usercontrol in asp.net using jquery UI slider. The user control have some javascript functions to set the value of the slider when the textbox value changes in the main page. Everything works fine if I have only usercontrol. But if I have multiple user controls, I am not sure how to namespace the javascript so that it calls the function inside the specific user control.
Thanks,
Sridhar.
I would suggest object orienting your code - something like this (Obviously this is only pseudocode...)
function Slider(parentElement, id){
var element = ... // get / create your element here
// attach appropriate event listeners here...
element.onclick = function(){
//event handling code...
}
this.setValue = function(value){
// set value of element
}
this.getValue = function(){
//get value of element
}
}
var sliderA = new Slider(document.getElementById('anElement'));
var sliderB = new Slider(document.getElementById('anotherElement'));
I have an asp.net aspx page and on that page I have a hidden input field with and id of paneIndex. However, when I load the page, the alert shows index 1 which is correct on the first load, but if I open up pane 3 for example, the alert shows 1 still. Am I doing something wrong?
In a Custom.js file, I have the following code:
$(document).ready(function() {
$("#accordion").accordion({
active: 1,
collapsible: true,
autoHeight: false,
change: function(event, ui) {
var activeIndex = $("#accordion").accordion('option', 'active');
$("#paneIndex").val(activeIndex);
//alert(activeIndex);
}
});
});
In my server side button click, I have the following code:
string activeIndex = Request.Form["paneIndex"];
string script = string.Format(#"<script type=""text/javascript"">var paneIndex =
{0};</script>", activeIndex);
if(!ClientScript.IsStartupScriptRegistered("JSScript"))
ClientScript.RegisterStartupScript(this.GetType(),"JSScript", script);
I have just tested the jquery script locally here and it works fine for me without form submission / postback.
Therefore I assume your issue is related to the form submission / activeIndex variable not being set correctly.
If you use asp.net, do you need to submit the form instead of using postbacks?
I always try to do a postback to the server if possible instead of form submission.
If you use Visual Studio you could also try to set a breakpoint on the server-side code and investigate the Request.Forms collection contains the correct variables after submission.
The scenario...I have a list of dynamic hyperlink controls on an ajax panel that link directly to a WORD doc located on a share. Clicking any link opens WORD client side (I set the file association to do that so the IE browser doesn't try to open it instead).
LinkButtons won't work because it doesn't do a direct link to the doc from the browser and I don't want server automation or activex, since I want each client to open the doc using their own box as if they had simply clicked on the document itself.
But I need to change an image in an image control once they've clicked on the hyperlink. In other words, I need the link to sit on top of a control that does cause a postback so I can get at the posting controls ID and do my thing. I'm also trying to avoid client side scripting though I'm sure there may be a convoluted way to do that.
Here is the code in the loop that creates the dynamic link. I started with just the hyperlink control, then this code is messing with adding a hyperlink to a label, that's why it's showing as it is:
Label lblWordLink = new Label();
HyperLink hrefLetter = new HyperLink();
hrefLetter.Text = items.letterName;
hrefLetter.NavigateUrl = folderForPackageLetters + items.letterName + wordDocExtension;
hrefLetter.ID = "standardLettersHref_" + items.letterName;
lblWordLink.Text = "<a href='" + hrefLetter.NavigateUrl.ToString() + "'>" + items.letterName + "</a>" ;
tRow.Cells[1].Controls.Add(lblWordLink);
I'm looking for a way to let the link open the doc and at the same time postback. Is there a way to layer the link control on top of another control such that the link just links and the control beneath causes a postback?
32U
Fixed: the answer gave the clue. On the server, during dynamic control creation I did:
HyperLink hrefLetter = new HyperLink();
hrefLetter.ID = "standardLettersHref_" + items.letterName;
hrefLetter.Text = items.letterName;
hrefLetter.NavigateUrl = folderForPackageLetters + items.letterName + wordDocExtension;
hrefLetter.Attributes.Add("OnClick", "letterHrefClick('" + items.letterName + wordDocExtension + "')");
tRow.Cells[1].Controls.Add(hrefLetter);
then client side I pushed a value into a hidden control inside the ajax panel when the hyperlink control was clicked and forced submit:
function letterHrefClick(link) {
//alert(link);
form1.hdnLetterClick.value = link;
form1.submit();
}
After the submit, back on server side, I got the value in the Page_Load event:
string x = hdnLetterClick.Value;
nice!
update...
An even better way to do this... in the javascript postback use:
__doPostBack("hdnLetterClick", "somevalue");
then in the codebehind in the Page_Init you can do (not for button or imgbutton):
string postbackControlID = Request.Params.Get("__EVENTTARGET");
string postbackArgument = Request.Params.Get"__EVENTARGUMENT");
to get at what you need. This is better if dealing with dynamic controls so you can control state during control recreation.
If you give your link an onclick attribute, those javascript actions should also be executed when the link is selected.