Develop Reference

asp.net pass value from javascript to control on a modal popup

Ok, I changed the title because I can't get anywhere with previous approach, so I'm returning to the original question: how can I pass a variable obtained through javascript to a textbox on a modal popup?
I already tried to place a hidden field and even a textbox on the parent page, inside or outside an update panel, but when I click on the linkbutton that opens the modal popup their values are resetted to default.
I already searched and tried many different ways but I can't succeed.
I have a table in a repeater and I need to know the cells selected by the user: start and ending cell of the selection. I accomplish that with this javascript:
$(function () {
var mouse_down = false;
var row, col; // starting row and column
var $tr;
$("#tblPersonale td")
.mousedown(function () {
$("#col_to").html('?');
mouse_down = true;
// clear last selection for a fresh start
$(".highlighted").removeClass("highlighted");
$(this).addClass("highlighted");
$tr = $(this).parent();
row = $tr.parent().find("tr").index($(this).parent());
col = $tr.find("td").index($(this));
$("#row").html(row);
$("#col_fr").html(col - 1);
return false; // prevent text selection
})
.mouseover(function () {
if (mouse_down) {
$("#col_to").html('?');
if ($tr[0] === $(this).parent()[0]) {
var col2 = $(this).parent().find("td").index($(this)); // current column
var col1 = col;
if (col > col2) { col1 = col2; col2 = col; }
$("#col_fr").html(col1-1);
$("#col_to").html(col2 - 1);
// clear all selection to avoid extra cells selected
$(".highlighted").removeClass("highlighted");
// then select cells from col to col2
for (var i = col1; i <= col2; i++) {
if (col1>1){
$tr[0].cells[i].className = "highlighted";}
}
}
}
})
.bind("selectstart", function () {
return false; // prevent text selction in IE
})
$(document)
.mouseup(function () {
mouse_down = false;
});
});
So, when user selects one or more cells I have the start/end value in here:
<span id="col_fr" runat="server" enableviewstate="true">?</span>
<span id="col_to" runat="server" enableviewstate="true">?</span>
Then, when user click a linkbutton I want to use these values to write a text in a textbox on the modal popup that shows. As I said, I can't make it work, anything I tried the result is that the values are lost when popup shows, even if I assign values to global variables before showing the popup.
This is my linkbutton:
<asp:LinkButton runat="server" ID="lnkAddDip" OnClick="lnkAddDip_Click">
The idea behind the old question was to pass the values to the url as parameters and then in the page load use them, but then the table selection doesn't work anymore because at every selection the page refresh because of the url change.
Please anyone, I'm totally lost and not for lack of trying!
OLD QUESTION
asp.net pass a control value as parameter in onclientclick
I found similar questions but no one answer to my problem (or at least, I can't make anything working).
I want to concatenate to the url of the active page some parameters like Home.aspx?col_fr=2 where instead of the fixed "2" I want to pass the value of a hidden field. How can I achive that?
This is my current code:
<asp:hiddenfield runat="server" id="hdnColonnaDa" EnableViewState="true" />
<asp:LinkButton runat="server" ID="lnkAddDip" OnClick="lnkAddDip_Click" OnClientClick="window.location='Home.aspx?col_fr=2';return false;">
Thanks

It just have to move the parameter code o a javascript function like
function getURL(){
var param1 = someField.value/*get field value*/;
var url= "Home.aspx?col_fr="+ param1;
window.location= url;
return false;
}
Html
<asp:LinkButton runat="server" ID="lnkAddDip" OnClick="lnkAddDip_Click" OnClientClick="getURL()">

Don't use UpdatePanel or Modal popup server side. You can use a Thickbox or similar jquery plugin to open the popoup.
Popup can be an inpage div or another page. In case of page, you can easily pass parameters in the url, in case of inpage div, you can get hidden field values.
You can find jquery overlay as Thickbox: just add css and js to your site, the right class on the link and fix the url to open.
Solution using another page
Imagine to use Colorbox (http://www.jacklmoore.com/colorbox/):
PRE
Suppose you have your variable values in some hidden field in your page
TODO
include jquery in your page
Download and include css and js for colorbox
In your page add a html tag with on click event
Add a script section in your page
function openLink()
{
var hiddenValue= $("#col_fr").text(); // or .html()
var urlToOpen = "yourpage.aspx?ids=" + hiddenValue;
$.colorbox({
iframe: true,
width: "75%",
height: "75%",
href: urlToOpen
});
}
Then in Yourpage.aspx you can use url parameter "ids".
Code is not tested!

Finally I did what I want by tuning the original javascript function.
I added 3 hiddenfield on the page and then I add this bit
var hdncol_fr = document.getElementById("hdncol_fr").value;
var hdncol_to = document.getElementById("hdncol_to").value;
var hdnrow = document.getElementById("hdnrow").value;
if (hdncol_fr = '?'){
document.getElementById("hdncol_fr").value = col - 1;
document.getElementById("hdncol_to").value = col2 - 1;
document.getElementById("hdnrow").value = row;
}
This way the hidden fields values are set only when user actively select some cells, when there is a postback event the javascript function returns '?' for the 3 values, so with the added code the hidden field maintains the previous values until user select something else.

How to hide a list element on linkbutton click within an asp listview control using JavaScript

I have a asp:listview control that is populating data from a databound data table in the code behind to create a dynamic list. With that list I have a linkbutton that I wish to bind to a JavaScript function to hide the corresponding li element if clicked. Here is my HTML:
<asp:ListView ID="lstAIInsureds" runat="server">
<LayoutTemplate>
<ul class="collection">
<asp:PlaceHolder ID="itemPlaceholder" runat="server" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li class="collection-item" id="liRemoveAI">
<div>
<%#Eval("Response").ToString().Replace("|",", ")%>
<asp:LinkButton ID="lbRemoveAI" class="material-icons" ClientIDMode="Static" OnClientClick="return RemoveAI();" runat="server">remove_circle</asp:LinkButton>
</div>
</li>
</ItemTemplate>
<EmptyDataTemplate>
<p>Nothing here.</p>
</EmptyDataTemplate>
</asp:ListView>
and my code behind is being bound like so:
this.lstAIInsureds.DataSource = dt;
this.lstAIInsureds.DataBind();
Here is my current JS, but of course has gaps in the for loop which is what I need to accomplish:
function RemoveAI() {
var olsRemoveAI = document.getElementById("liRemoveAI"); //this is the ls that is to be hidden
var obtRemoveAI = document.getElementById("lbRemoveAI"); //this is the linkbutton that is clicked to hide the parent ls element
for (i = 0; i < olsRemoveAI.???.length; i++) {
//if this button is contained in the parent li, mark the li as hidden:
olsRemoveAI.style.visibility = "hidden";
olsRemoveAI.style.display = "none";
//else:
olsRemoveAI.style.visibility = "visible";
olsRemoveAI.style.display = "block";
}
return false;
}
is this do-able? Assistance is greatly appreciated!

Since the element lbRemoveAI is running at "server", you need to see the HTML output of your page and get the final client ID, then update your javascript with that element ID.

Get the parent element:
var buttonParent = document.getElementById("lbRemoveAI").parentElement;
Of course, this will return the div and not the li. It looks like you could simply remove the div and change some of your CSS, or you could use .parentElement twice.
Read this, it's about .parentElement.
Then, you can use:
buttonParent.style.display = 'none';
Or, with jquery:
$(buttonParent).hide();
UPDATE:
here's the jQuery that will work. You should really be using a class, not an ID for the buttons. Using (this) will reference the exact button that was clicked. You probably don't want jQuery, but I don't know how to do it with plain JS off the top of my head. It should be easy to figure out how to change it if you can't use jQuery.
var obtRemoveAI = document.getElementById("lbRemoveAI");
$(obtRemoveAI).click(function() {
$(this).parentElement.hide()
});

Div element hide and show

I have a hidden div element.
<div class= "CTL" id="CTL" runat="server" style="display:none">
<p class ="divider">
CTL
</p>
<asp:Button ID="CTL_button" runat="server" Text="View CTL"
onclick="CTL_button_Click" />
</div>
I am trying to make the div element appear or stay hidden based on an SQL value returned on page Load:-
window.onload= function show_CTL() {
if("<%=_CurrentUser.IsCTL%>" == "True"){
document.getElementById('CTL').style.display ="block";
}
else{
// document.getElementById('CTL').style.display ="none";
}
But the div element remains shown regardless of value returned...
It seems like only the true part of the loop gets executed...

Use display:none to hide the div in first place
<div class= "CTL" id="CTL" style="display:none" runat="server">
<p class ="divider">
CTL
</p>
<asp:Button ID="CTL_button" runat="server" Text="View CTL"
onclick="CTL_button_Click" />
</div>
then you can show it with
document.getElementById('CTL').style.display ="block";

Cast the condition to a Boolean in JavaScript you can do it like this:
window.onload = function show_CTL() {
var el = document.getElementById('CTL');
if(Boolean("<%=_CurrentUser.IsCTL%>") && el){
el.style.display = "block";
}
else{
el.style.display = "none";
}
}
If the Boolean object has no initial value, or if the passed value is one of the following:
0
-0
null
""
false
undefined
NaN
the object is set to false. For any other value it is set to true (even with the string "false")!
Now I wonder, why not simply add the condition inside the visible attribute?
<div class="CTL" id="CTL" runat="server" visible=<%=_CurrentUser.IsCTL%>></div>
No JavaScript needed this way.

ASP.NET is changing the IDs, thats why you have to take the clientID of your element.
document.getElementById("<%= CTL.ClientID %>").style.display = "block";

visible and display are 2 different css property,
you set visible first, but later you change display,
you should change visible, not display,
of cause you can use display instead of visible in the first place.

Label won't show when label hidden via page load

The desired effect is that on page load the label does not display but when the user clicks the check box the label displays. This small code sample is just a sample to illustrate the issue. The code will always return an object reference exception from javascript when the Visible property of the label is set to false. If that line is commented out, it will execute correctly with no object reference exceptions but the label should be hidden at page load. This application does use master pages which is why were are passing the ClientIDs to the javascript Toggle function.
protected void Page_Load(object sender, EventArgs e)
{
this.chkSelect.Attributes.Add("onClick", "Toggle('" + this.lblAdd.ClientID + "', '" + this.chkSelect.ClientID + "')");
this.lblAdd.Visible = false;
}
<script type="text/javascript">
function Toggle(lblAdd, chk) {
var ctrlAdd = document.getElementById(lblAdd);
var ctrlChk = document.getElementById(chk);
if (ctrlChk.checked == true) {
ctrlAdd.style.display = 'inline';
}
else {
ctrlAdd.style.display = 'none';
}
}
</script>
<asp:Label ID="lblAdd" runat="server" Text="Add" Font-Size="8pt" ForeColor="Blue"> </asp:Label>
<asp:CheckBox ID="chkSelect" runat="server" Text="Check Box1" /><br />
How can we hide that label in Page_Load so we don't get object reference errors from Internet Explorer?
Thanks...

the Visible property does not render the HTML if set to false, that's why you get a null reference (in other words, ASP.NET's Visible is nothing to do with the display CSS property - it actually toggles whether an element is rendered in the HTML code or not.). Instead assign a CSS class on page load that defines display: none, then remove that class on click with javascript

What is the Javascript to find if a control is in the active RadPageView?

I have one Telerik RadGrid inside of a RadPageView, and another RadGrid inside of another RadPageView. Both are part of the same RadMultiPage control. I am writing a Javascript function to resize the RadGrids to fill the remaining space in the window. How do I determine which RadGrid is the visible one in the active RadPageView?
This might give you a clearer idea of what I mean:
<script type="text/javascript">
function resizeElements(sender, EventArgs) {
var m_grid = sender;
if(m_grid) {
m_grid.GridDataDiv.style.height = right_pane_height - padding + "px";
}
}
</script>
<div id="right_pane">
<telerik:RadMultiPage runat="server" >
<telerik:RadPageView runat="server">
<telerik:RadGrid runat="server" >
<ClientSettings>
<ClientEvents OnGridCreated="resizeElements" />
</ClientSettings>
</telerik:RadGrid>
</telerik:RadPageView>
<telerik:RadPageView runat="server">
<telerik:RadGrid runat="server" >
<ClientSettings>
<ClientEvents OnGridCreated="resizeElements" />
</ClientSettings>
</telerik:RadGrid>
</telerik:RadPageView>
</telerik:RadMultiPage>
</div>

I do not use Telerik, however, a generic approach would be to have a look at the classes of your elements in Firebug/Chrome F12 view/similar and then use JQuery to find the "div:visible" inside your RadMultiPage (give this an ID or a Class if you can in ASP.NET). Inside of this you will find your grid.
Your JQuery might look something like this:
$('#myMultiPageID > div:visible > .classOfRadGrid').each(function() {
resizeElements(this, myEventArgsVariable);
});

I realized that it is not necessary to know which RadGrid is visible in order to resize it. I simply resize both of them. The only catch is that I need to make sure that the RadGrid and it's GridDataDiv element exist, because they might not exist when the RadPageView they are on is not visible.
if( m_grid && m_grid.GridDataDiv ) {
m_grid.GridDataDiv.style.height = right_pane_height - padding + "px";
}
if( m_grid2 && m_grid2.GridDataDiv ) {
m_grid2.GridDataDiv.style.height = right_pane_height - padding + "px";
}