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");
Related
I am trying to hide an aspx button on page load if another element has a certain value.
Button:
<input type="button" class="formButton" id="btnShowTerminate" value="Terminate Credential" onclick="ToggleTerminationRow()">
My issue is that I don't know how to edit the buttons attributes (to make it hidden) in the code behind.
In code behind (on PageLoad event):
Page.btnShowTerminate.Visible = false;
HTML controls need to be given the runat="server" attribute in order to be used in the server-side code.
To hide the button from your code behind, use an If statement to test if your 'other element' has the required value.
C#
If(exampleElement.Value == "example value")
{
Page.btnShowTerminate.Visible = false;
}
VB
If exampleElement.Value == "example value"
Page.btnShowTerminate.Visible = false;
End If
This error -
'System.Web.UI.Page' does not contain a definition for
'btnShowTerminate' and no extension method 'btnShowTerminate'
accepting a first argument of type 'System.Web.UI.Page' could be found
(are you missing a using directive or an assembly reference?
is because you haven't included runat="server" in your input.
The exampleElement.Value may have to be different depending on what type of element exampleElement is. For example, Value will work with a TextBox , but you would need to use InnerHtml for a div
Although, a button (any control for that matter) can be hidden from code behind by setting the Visible property to false, there is subtle, and dangerous nuance to that. Doing this causes the button not only to be hidden, but the resulting HTML button will not render on the page. Should you have JavaScript that is referencing the button, the JavaScript will fail because the button does not exist on the rendered page. In debugging, the bug will be caught, but if the JavaScript is never exercised until the code is deployed to a server, it will fail there but no exception will be thrown. The code just won't work and there will be no indication as to why!
The safe way to hide the button is setting the Style as follows:
btnName.Style.Add("display", "none");
This way the button will be rendered but hidden and JavaScript will be able to find it.
I'm working on the mobile version of my website and have a few textboxes where I want the virtual keyboard to popup as numbers (phone, zip, etc). Some of these also have custom filters attached to them to validate what's entered.
Because of the validators, I use asp:TextBox instead of a plain input. I then add type as an attribute in the codebehind
<asp:TextBox ID="SearchBox_Phone" runat="server" CssClass="inp-bl-lvl width95 l"
placeholder="Phone"></asp:TextBox>
SearchBox_Phone.Attributes.Add("type", "number");
I can get the correct value in js
$get('<%= this.SearchBox_Phone.ClientID %>').value;
but in the codebehind SearchBox_Phone.Text always returns blank. If I comment out the attribute addition I can get the correct value, but I really want to keep it as is.
Any idea how I can get the value, short of setting a hidden input in js (I'd like to avoid an extra value that needs setting/clearing)?
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().
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
I've implemented a menu for my asp.net page containing some hyperlinks and loading different contents on their clicks, it's using jquery on behind for it's style mostly and it is working fine. But the problem is, what if a refer to this menu from the outside, i can refer to each of the menu items, i pass parameters on querystring, now i can find which item is clicked but how can i force that hyperlink menu item to be clicked on page load. I'm specifing just their navigation urls, how can i specify that if something is passed in querystring than that specific menu item should be forced clicked on pageload.
Any ideas? Thanks in advance.
The real question lies can you cuase a hyperlink click event?
Now I'm using
Page.ClientScript.RegisterStartupScript(typeof(Page),"test1", "<script>document.getElementById('linkButtonId').click();</script>"); but still nothing desirable happens, seems that this row has no effect at all.
Whether the functionality being executed is client side or server side, it might be a good idea to create a function that will accept the id or something of the menu item being clicked and then handle it appropriately.
Thus all the menu items will call the same function. And since you have the parameters in the query string just pass them through to the function which will handle it accordingly and display the correct content?
You need a bit of separation...
Whatever your click does can be moved into a function, then you can call the function on the click of the menu - but you can also call the function at other times as well.
Before:
<a ... onclick="alert('hello');">Click Me</a>
After:
<a ... onclick="fnSayHello();">Click Me</a>
...
var fnSayHello = function() { alert('hello'); };
fnSayHello();