window.opener.document.getElementById not working - asp.net

In my asp.net web app, I create a popup window with a button. When that button is clicked, I want to set the value of an asp:TextBox (id=TextBox1) contained in the parent window. However, it doesn't work like all the examples I've read indicate.
I've tried the following lines of code in my javascript onclick handler:
window.opener.document.getElementById('<%= TextBox1.ClientID %>').value = "abc";
window.opener.document.getElementById("TextBox1").value = "abc";
window.opener.document.getElementById("ctl00_ContentPlaceHolder1_TextBox1").value = "abc";
Only example 3 works. All the stuff I've read indicates that #1 is the preferred method, but I can't seem to make it work at all. Does anyone have any ideas what I'm doing wrong?
I've tried this in Firefox, Chrome and IE.
Thanks

you need to change a bit when calling your popup code , you have to pass your textbox client id and then you can set its value from popup page without any hard codding.
here is the way :
var txtNameClientObject = '<%= txtName.ClientID %>';
window.open('Child.aspx?txtName='+txtNameClientObject);
and then in popup page you can do it as
opener.document.getElementById('<%= Request["txtName"] %>').value = 'from child';
hope this will be helpful for you.
Thanks

Is this line of JavaScript contained in the markup for the popup window itself? If so, the server-side code for that won't be aware that TextBox1 exists on the server-side code for the parent window, and won't be able to determine its ClientID property. You either need to pass that client ID to the popup window somehow (querystring, cookie, session, whatever) or hard code it. Alternatively, you may be able to put this line of JavaScript in a function on your parent page, and then call something along the lines of window.opener.functionName().

Related

anchor target blank - how to always open in same popup window

I have a number of anchors in a page. I want that when the user clicks on an anchor it would open a blank window. I have used target='_blank' and that works correctly. However, I want that if the user clicks on another link in the original page, I would like that it uses the same popup that was opened for the first window. What I do not want is that the user ends up with like 10 popups as this would be a bit messy for the user.
Is this achievable please?
Any assistance would be greately appreciated.
target is deprecated since HTML 4.01, you can however use JS like this:
test
<script>
var clicky = document.getElementById("clicky");
clicky.onclick = function(){
window.open(clicky.href, "test");
return false;
}​
</script>
in the window.open, the first attribute is the URL the link should go to, the second is the name of the window, clicking any link setup like this will open in the same window.
there's better and easier ways to do this to multiple elements with jquery etc. but it all hinges on the window.open.
Instead of using _blank (which is a special value for a new window), use a name - any name would do.
target="mySpecialPopup"
When naming a window this way, every time you call it by name it uses the same instance.
Just name your target.
target='mywindow'
This should open a blank window the first click and repopulate it when other target='mywindow' links are clicked.

Can Anyone Help me with this? Refresh update panel partially onclient side

i have a dynamically created gridview button that fires off a modal popup when clicked. I do this onclientside like so:
function openModal(btnId, v) {
deptdata(v);
// __doPostBack('<%=DropDownList1.ClientID %>', '');
btn = document.getElementById(btnId);
btn.click();
}
function deptdata(v) {
document.getElementById('<%=vendor.ClientID%>').value = v;
}
This is how the function is called in the code.
btnedit.OnClientClick = String.Format("openModal('{0}','" & GridView1.Rows(i).Cells(0).Text & "');return false;", hidden.ClientID)
I set the value of a hidden field(Vendor) but I need that value for what's in the modal popup. I have a dropdown list that depends on that newly set variable. The variable is set depending on what row was clicked. So i need to somehow just reload that popup. I have an Update Panel but I can't get that Panel to reload. I've tried __doPostback and it didn't help. any ideas how to update the panel or the dropdown in the panel using javascript?
It's not very clear from your description and the limited code you provide what it is exactly that you are trying to do and what is failing. However, the following might give you some ideas. If you provide more detail and code someone might be able to give you a better answer.
ScriptManager1.RegisterAsyncPostBackControl(Button1);
to trigger an update panel post back from js make sure you use UniqueID, not ClientID, thats a common gotcha that prevents the async postback from working.
__doPostBack("<%=Button1.UniqueID %>", "");
Personally, I have all but given up on UpdatePanels, I only use them in the most trivial cases. I prefer to have my js call an ASP.Net JSON webservice and have the on completed function render any needed changes to the html. It's more flexible, lighter and infinitely faster for pages with large grids or a lot of controls.

Is there a way to use Thickbox with dynamic content?

Here's the scenario:
I have a textbox and a button on a web page. When the button is clicked, I want a popup window to open (using Thickbox) that will show all items that match the value entered in the textbox. I am currently using the IFrame implementation of Thickbox. The problem is that the URL to show is hardcoded into the "alt' attribute of the button. What I really need is for the "alt" attribute to pass along the value in the textbox to the popup.
Here is the code so far:
<input type="textbox" id="tb" />
<input alt="Search.aspx?KeepThis=true&TB_iframe=true&height=500&width=700" class="thickbox" title="Search" type="button" value="Search" />
Ideally, I would like to put the textbox value into the Search.aspx url but I can't seem to figure out how to do that. My current alternative is to use jQuery to set the click function of the Search button to call a web service that will set some values in the ASP.NET session. The Search.aspx page will then use the session variables to do the search. However, this is a bit flaky since it seems like there will always be the possibility that the search executes before the session variables are set.
Just handle the onclick of your button to run a function that calls tb_show(), passing the value of the text box. Something like
... onclick = "doSearch()" ...
function doSearch()
{
tb_show(caption, 'Search.aspx?KeepThis=true&q=\"' +
$('input#tb').val() +
'\"&TB_iframe=true&height=500&width=700');
}
If you read the manual, under the iframe content section, it tells you that your parameters need to go before the TB_iframe parameter. Everything after this gets stripped off.
Here is an idea. I don't think it is very pretty but should work:
$('input#tb').blur(function(){
var url = $('input.thickbox').attr('alt');
var tbVal = $(this).val();
// add the textbox value into the query string here
// url = ..
$('input.thickbox').attr('alt', url);
});
Basically, you update the button alt tag every time the textbox loses focus. Instead, you could also listen to key strokes and update after every one.
As far as updateing the query string, I'll let you figure out the best way. I can see putting a placeholder in there like: &TB=TB_PLACEHOLDER. Then you can just do a string replace.
In the code-behind you could also just add the alt tag progammatically,
button1.Attributes.Add("alt", "Search.aspx?KeepThis=true&TB_iframe=true&height=500&width=700");

Window.Opener and referencing by ID issue because of .NET control

I have a .aspx page that has a link on it, then when clicked opens a new window using window.open.
I need to send a integer back and put that number into a textbox (which is a .NET control).
When I call window.opener on the popuped up window, I have to reference the ID of the textbox. The issue is, the ID changes from time to time if you add things to the control tree.
How can I reliably reference the textbox's ID from the new window?
I have jQuery installed also, but not sure if I can use jQuery from the new window?
Instead of accessing the element directly from the popup, put a function in the page that the popup can call. In the function you can insert the actual id of the element:
function setTextbox(value) {
document.getElementById('<%=TheTextBox.ClientID%>').value = value;
}
In the popup:
window.opener.setTextbox("Hello world!");
This should work
// original window script
var windowHandle = window.open(...);
windowHandle.top.otherWindowTextBox = document.getElementById('idOfTextBox); // or use jQuery
Now in you popup window, you have a reference to your textbox on the page that opened the popup window.
// script in popup window.
top.otherWindowTextBox.value = someInteger;

Setting Focus with ASP.NET AJAX Control Toolkit

I'm using the AutoComplete control from the ASP.NET AJAX Control Toolkit and I'm experiencing an issue where the AutoComplete does not populate when I set the focus to the assigned textbox.
I've tried setting the focus in the Page_Load, Page_PreRender, and Page_Init events and the focus is set properly but the AutoComplete does not work. If I don't set the focus, everything works fine but I'd like to set it so the users don't have that extra click.
Is there a special place I need to set the focus or something else I need to do to make this work? Thanks.
We had exactly the same problem. What we had to do is write a script at the bottom of the page that quickly blurs then refocuses to the textbox. You can have a look at the (terribly hacky) solution here: http://www.drive.com.au
The textbox id is MainSearchBox_SearchTextBox. Have a look at about line 586 & you can see where I'm wiring up all the events (I'm actually using prototype for this bit.
Basically on the focus event of the textbox I set a global var called textBoxHasFocus to true and on the blur event I set it to false. The on the load event of the page I call this script:
if (textBoxHasFocus) {
$get("MainSearchBox_SearchTextBox").blur();
$get("MainSearchBox_SearchTextBox").focus();
}
This resets the textbox. It's really dodgy, but it's the only solution I could find
this is waste , its simple
this is what you need to do
controlId.focus(); in C#
controlID.focus() in VB
place this in page load or button_click section
eg. panel1.focus(); if panel1 has model popup extender attached to it, then we put this code in page load section
How are you setting focus? I haven't tried the specific scenario you've suggested, but here's how I set focus to my controls:
Public Sub SetFocus(ByVal ctrl As Control)
Dim sb As New System.Text.StringBuilder
Dim p As Control
p = ctrl.Parent
While (Not (p.GetType() Is GetType(System.Web.UI.HtmlControls.HtmlForm)))
p = p.Parent
End While
With sb
.Append("<script language='JavaScript'>")
.Append("function SetFocus()")
.Append("{")
.Append("document.")
.Append(p.ClientID)
.Append("['")
.Append(ctrl.UniqueID)
.Append("'].focus();")
.Append("}")
.Append("window.onload = SetFocus;")
.Append("")
.Append("</script")
.Append(">")
End With
ctrl.Page.RegisterClientScriptBlock("SetFocus", sb.ToString())
End Sub
So, I'm not sure what method you're using, but if it's different than mine, give that a shot and see if you still have a problem or not.
What I normally do is register a clientside script to run the below setFocusTimeout method from my codebehind method. When this runs, it waits some small amount of time and then calls the method that actually sets focus (setFocus). It's terribly hackish, but it seems you have to go a route like this to stop AJAX from stealing your focus.
function setFocusTimeout(controlID) {
focusControlID = controlID;
setTimeout("setFocus(focusControlID)", 100);
}
function setFocus() {
document.getElementById(focusControlID).focus();
}
I found the answers from Glenn Slaven and from Kris/Alex to get me closer to a solution to my particular problem with setting focus on an ASP.NET TextBox control that had an AutoCompleteExtender attached. The document.getElementById(focusControlID).focus() kept throwing a javascript error that implied document.getElementById was returning a null object. The focusControlID variable was returning the correct runtime ClientID value for the TextBox control. But for whatever reason, the document.getElementById function didn't like it.
My solution was to throw jQuery into the mix, as I was already using it to paint the background of any control that had focus, plus forcing the Enter key to tab through the form instead of firing a postback.
My setFocus function ended up looking like this:
function setFocus(focusControlID) {
$('#' + focusControlID).blur();
$('#' + focusControlID).focus();
}
This got rid of the javascript runtime error, put focus on the desired TextBox control, and placed the cursor within the control as well. Without first blurring then focusing, the control would be highlighted as if it had focus, but the cursor would not be sitting in the control yet. The user would still have to click inside the control to begin editing, which would be an UX annoyance.
I also had to increase the timeout from 100 to 300. Your mileage my vary...
I agree with everyone that this is a hack. But from the end-user's perspective, they don't see this code. The hack for them is if they have to manually click inside the control instead of just being automatically placed inside the control already and typing the first few letters to trigger the auto lookup functionality. So, hats off to all who provided their hacks.
I hope this is helpful to someone else.

Resources