Get the active index of the jquery accordion pane from asp.net on the server-side? - asp.net

How can I get the active index of the jquery accordion pane when a button is clicked? What I want to do is when a button is clicked in pane 3 for example, I want to store that value and when the page is reloaded, I want pane 3 to remain open.
I intially had this in my server side click and when I hard code a value in for paneIndex it works fine, but obviously, I don't want to do this, I want to get the index on the click and pass that to the script.
string script = "<script type=\"text/javascript\">var paneIndex = " + 3 + "</script>";
if(!ClientScript.IsStartupScriptRegistered("JSScript"))
ClientScript.RegisterStartupScript(this.GetType(),"JSScript", script);

You could store the value in a hidden form field, and assuming you are doing a postback, that information will now be in the hidden field for you to use on the server side.

You will want to bind a function to the change event of the accordian, and store the new active index into a hidden input so that it gets sent back to the server.
As far as round-tripping the active index back to the HTML that is returned from the server - your approach is fine. Obviously instead of the hardcoded value of 3, you would put in the value from the hidden input.
$("#accordion").accordion({
active:1,
change: function(event, ui) {
var activeIndex = $("#accordion").accordion('option','active');
$("myHiddenInputId").val(activeIndex);
//alert(activeIndex);
}
});
From the server side, you can access the value and push it back to the page in a similar manner as you posted in the question:
string activeIndex = Request.Form["myHiddenInputName"];
string script = string.Format(#"<script type=""text/javascript"">var paneIndex = {0};</script>", activeIndex);
That should do it.

What's also a possibility is using the jquery.cookie plugin and storing the active pane index in a cookie. That way, everything actually happens clientside.
I don't know if this might be a valid answer, just throwing it out here for completeness sake :D

Related

how to locate elements on a different webpage?

I'm new to java and webdriver. My web-applications adds some data to a table on a webpage. If the addition is successful, a new web page is opened and the success message is displayed on the new page. If the addition is not successful, a javascript alert is thrown. After accepting the alertHow do I check the presence of an the message on the new webpage using webdriver?
If it is opening in new window you need to switch the control to new window first
Find the logic here to switch the control between windows
After switching the control to new window you can verify whatever you want. Either element or text.
isElementPresent? method logic here .
isTextPresent? method logic here.
If I understand the question correctly, after sending the data to the table, if the sending is successful then the window is loaded with a new webpage else an alert appears once you accept the alert the window is loaded.
After sending the data, check for the presence of the alert, if the alert is present then accept it. Next is verifying whether a text is present in the newly loaded webpage or not.
public void isAlertPresent(){
try {
driver.switchTo.alert().accept();
}
catch ( NoAlertPresentException e ){
}
System.out.println(driver.findElement(By.tagName("body")).getText().contains("Expected Message"));
If the location where the message appears is static then I would suggest you to use a better approach than the above like if an element has that text
WebElement element = driver.findElement(By.id("elementID"));
System.out.println(element.getText().trim().equals("Expected Message"));

C#: How to Re-RegisterClientScripts?

I have a problem which I can't find a solution. I have a Parent page calling dynamically a default user control ( 6 different UC based on a selected item Combo X on the parent page). Within the UC, i inject (registerClientscript) a javascript which controls visibility within the UC based on a combo box. All UC has the same combo but the controls within this UC can vary.
The problem i am having is that on first load, the JS is generated correctly... but on change of Combo X from the parent, i trigger a partial refresh of the UC, which in turn re-register a new JS.
function DefineView(sender, eventArgs) {
var comboSearch = $find('%%cmbSearchType%%');
//cmbSearch Section
switch (comboSearch.get_selectedItem().get_value()) {
[[MY CODE HERE]
}
}
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "SearchVisibilityPPSA",jsFunction.Replace("%%cmbSearchType%%", cmbSearchType.ClientID),true);
As you can see, I replace the ClientID, and on first load of the page, this is resolved correctly like ctl00_PrincipalPlaceHolder_ctl00_cmbSearchType but when I change Combo X, it reloads the user control, which in turn reload the script above. In the rendered HTML, The COmbo ID is renamed to ctl00_PrincipalPlaceHolder_ctl01_cmbSearchType (Note the subtle change in name from ct00 to ct01 ) In my debug, I saw this ClientID contain the new ID but somehow it is not replaced regenrated on the rendered html.
I guess my question is how do i force the JS to be re-rendered every time this UC is called? For some reason, it is always using the original rendered JS ( which is why it is working the first time)
I think this is related to my dynamic control i was generating without assigining any id ... by forcing the id attribute, it kept it the same...

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