failed to get server control id - javascript

I using .ascx
I am trying to use my jQuery to perform some action, the below code is how I call server control id.
$("input").mouseenter(function() {
//some function
}
<input type="text" id="family1" value="family"1/>
<input type="text" id="family2" value="family"2 runat="server"/>
My problem right now is my family1 able to call jQuery function but my family doesn't.
Is it because I am using .ascx so I cannot pass the server control id to my jQuery?
Is that any idea to solve?

You can get that, by using ClientID
Please check here

Use:
$("#<% family2.ClientID %>").mouseenter(function() {
//some function
}
because you can reuse your control, asp.net is adding some prefix to your ID. This resulting ID varries from page to page. You can check which is the resulting ID on your page and hardcode the ID into the jQuery Selector but using clientID is the way to go.
You can use it on all pages with your control without worries.

Use this ClientIDMode="Static"
<input type="text" id="family2" ClientIDMode="Static" value="family" runat="server"/>
Edit 1
ClientIdMode="Static": This is most basic, simple mode and it makes the client side ID static.
Whatever value you put for the ClientID or ID is that which will be used for the client side ID. One odd condition here, if a static ClientIDMode is used in a repeating control, the developer is responsible for ensuring client side ID uniqueness.
http://www.codeproject.com/Articles/34151/ASP-NET-4-0-Client-ID-Feature

$(document).ready(function () {
$('.ctl00_m_g_3b0d8e69_1961_4bea_886d_413493ff7f9c_ctl00_checkclass').hover(function (event) {
alert('dada');
var c = alert($(this).attr("id"));
alert(c);
});
});
<input type="text" id="family1" value="family1" class="checkclass"/>
<input type="text" id="family2" value="family2" class="checkclass" />
<input type="text" id="family3" value="family3" class="checkclass" />

Related

ddl is not updated in server - asp.net

I work on ASP.NET c#. I have a DropDownList. (runat="server")
On $(document).ready, I updated its value:
$(document).ready(function () {
document.getElementById("ddl").value = "abc";
…
When I get back to the Server (c#), there is no value in the ddl:
ddl.SelectedValue == ""
What could be the problem?
Thanks,
YYY
as far your dropdown runat="server" it has generated ClientID, "ddl" it's serverside id, on client you need to call like shown below
document.getElementById("<%= ddl.ClientID %>").value = "abc";
Welcome to the wonderful world of WebForms: in the list of things this framework screws up is ID's of your runat="server" elements
When the engine processes your server markup it generates own id's based on the place where you declared that particular element. Check it in your browser devtools.
Luckily since ASP.NET 4 you can specify special attribute ClientIDMode and now you can do it like
<asp:TextBox ID="txt" runat="server" ClientIDMode="Static" />
which will render like
<input id="txt" name="ctl00$MasterPageBody$ctl00$txt" />
If you cannot use for some reason ASP.NET 4, you can stick to old solution as #Dan proposed:
document.getElementById("<%= ddl.ClientID %>")
But this is not the recommended way.
EDIT
Probably you should do ddl.SelectedItem.Value instead.

Unable to make ASP.NET control button fade out with JQuery

I have a simple enough problem: I have an ASP.NET control button and I want to make it fade out and then call some function (such as an alert) using JQuery. Here is what I have so far:
ASP Code for the Button:
<div id="begin">
<span id="startButtonSpan">
<asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick()"/>
</span>
</div>
JavaScript:
function startButtonClick()
{
$("#startButtonSpan > input").fadeOut(500, callAlert());
}
function callAlert()
{
alert("Made it here...");
}
When I click the button, the alert displays but the page does not even seem to try to perform the fadeOut. When I close the alert, the button is still there, staring at me.
Can anyone see any mistakes or does anyone have any suggestions on how I might be able to achieve the intended goal of fading out my button? Fadeout is really just my way of testing whether I can manipulate ASP controls using jQuery, so more than just the simple fadeOut, this is me trying to learn how to do that.
I tried a slightly more simple jQuery call using the code below, but it does not seem to work either:
ASP Portion:
<div id="begin">
<span id="startButtonSpan">
<asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick()"/>
</span>
</div>
<div id="jQueryTest" style="display:none;">
Block for testing jQuery.
<h1 id="testMessage">Child element for the ASP div.</h1>
</div>
Javascript Portion:
function startButtonClick()
{
$("#jQueryTest").css("display", "block");
$("#jQueryTest").show();
}
For this example, the text does display, but it immediately disappears again.
Any help or suggestions as to what I might be doing wrong would be greatly appreciated.
Use the class as a selector $('.startButton') instead of the ID since ASP.Net controls change their IDs dynamically when rendered by appending its Page & Control information.
$(".startButton").fadeOut(500, callAlert);
Or, if you're adamant about using the ID, here is another way to handling the selector,
$("#<%=startButton.ClientID %>")
Or, as Jacob suggested in his answer, you could ClientIDMode="Static", but this works only if your application is .Net 4.0 or above.
Also, use CssClass instead of class
<asp:Button ID="startButton" Csslass="startButton" runat="server" Text="Click Me!" />
The first example has 2 problems.
1. You should write
$("#startButton").fadeOut(500, callAlert);
and not
$("#startButton").fadeOut(500, callAlert());
2. For ASP.NET you must set ClientIDMode="Static" ortherwise asp.net will alter your id.
<asp:Button ID="startButton" ClientIDMode="Static" ... OnClientClick="startButtonClick()"/>
How about the fact that your code is fine (although other answers here should be considered) but your button is making a post back to the server and simply your browser does not have enough time to render the fade effect.
To test this, add a return false; to the OnClientClick property. This will of course cancel your action on the server but you will obtain the fade effect:
<asp: Button ... OnClientClick="startButtonClick();return false;"></asp:Button>
To work around this and still submit your request, you can try to use the ASP.NET __doPostBack method in JavaScript
ASP.NET:
<asp:Button ID="startButton" class="startButton" runat="server" Text="Click Me!" OnClientClick="startButtonClick(this);return false;"/>
JavaScript:
function startButtonClick(button)
{
$("#startButtonSpan > input").fadeOut(500, function(){__doPostBack(button.name, "")});
}
The __doPostBack method takes two arguments: the name of the control that is doing the postback and a postback argument that can be use to send more info on the server. In the case of the asp:Button, the name of the button should be sufficient to send the request without a problem.
Using this technique you will fade the button on the client and also trigger the action on the server. I cannot guarantee that this exact code will work (I don't have access to a dev environment right now) but you should get the idea.
If I could, I would like to provide another answer for those that use MasterPages and find that you can't always use $("#<%= SomeContentControl.ClientID %>") when working with Content controls.
What I do is set the MasterPage ID in my Init() like this:
protected void Page_Init( object sender, EventArgs e )
{
// this must be done in Page_Init or the controls
// will still use "ctl00_xxx", instead of "Mstr_xxx"
this.ID = "Mstr";
}
Then, you can do something like this with your jQuery:
var masterId = "Mstr",
$startButton = getContentControl("startButton"),
$message = $("#jQueryTest");
function getContentControl( ctrlId )
{
return $("#" + masterId + "_" + ctrlId);
}
function hideStartButton()
{
$startButton
.stop(true, true)
.fadeOut("slow", showMessage);
}
function showMessage()
{
$message
.stop(true, true)
.fadeIn("slow");
}
$startButton.on("click", hideStartButton);
Here is a jsFiddle that has the Mstr_ prefix already inserted as if ASP.NET rendered it.

Passing values from javascript to code behind in ASP.NET

I have a variable in aspx.cs when I click the Datagrid particular row;
Then from the javascript, I should get that value and pass into aspx.cs variable.
how to do this?
Using html controls
First you use a hidden input control as:
<input type="hidden" value="" id="SendA" name="SendA" />
Second you add to that control the value you like to send on code behind using javascript as:
document.getElementById("SendA").value = "1";
And then on post back you get that value as:
Request.Form["SendA"]
Using asp.net Controls
The same way if you use asp.net control can be as:
<asp:HiddenField runat="server" ID="SendA" Value="" />
<script>
document.getElementById("<%=SendA.ClientID%>").value = "1";
</script>
and get it on code behind with SendA.Value;
And of course you can use ajax calls to send on code behind values, or simple call url with url parameters that return no content.

How can I check if asp:Checkbox is checked and show or hide It using javascript?

I have a asp:checkbox and a asp:textbox on my aspx page , I want to know show the textbox when the checkbox is checked and hide it if the checkbox is unckecked using javascript , I really apprecieatee anyone who could help me .
you can uee this code
<script type="text/javascript">
function radio_yes(){
if(document.getElementById("c1").checked==true)
document.getElementById("atext").style.visibility="visible";
else
document.getElementById("atext").style.visibility="hidden";}
</script>
<input type="checkbox" id = "c1" name="subscriptions" onclick = "radio_yes();radio_uncheck();" value="CorporateEmails"/>
Corporate Press Release Emails<br />
<input type="text" id="atext">
Assuming these render on the browser as a normal checkbox and textarea, then you can get notification of when the checkbox is ticked or unticked using its click event:
$("selector_for_the_checkbox").click(function() {
// ...handle the event here...
});
Within the event handler, this will refer to the raw checkbox element (not a jQuery wrapper for it).
To show a hidden element with jQuery, you use show; to hide one, you use hide. You can also use toggle to show or hide the element on the basis of its current state or a flag you pass in. So:
$("selector_for_the_checkbox").click(function() {
$("selector_for_the_textarea").toggle(this.checked);
});
It's well worth spending an hour (that's all it takes) reading through the jQuery API documentation beginning to end.
try this script:
<script type="text/javascript">
function toggleTextBox(bEnable, textBoxID) {
document.getElementById(textBoxID).disabled = !bEnable;
}
}
</script>
and your aspx would be like:
<asp:CheckBox ID="chkApplied" runat="server" onclick="javascript:toggleTextBox(this.checked, 'txtAmount'); />
<asp:TextBox ID="txtAmount" runat="server"></asp:TextBox>
and if your client side id differs, you can bind it from server side like this:
chkApplied.Attributes.Add("onclick", "javascript:toggleTextBox(this.checked, '" + txtAmount.ClientID + "');");

How do I pass Javascript variable to <jsp:setProperty> and JSTL?

How do I pass Javascript variable to and JSTL?
<script>
var name = "john";
<jsp:setProperty name="emp" property="firstName" value=" "/> // How do I set javascript variable(name) value here ?
<c:set var="firstName" value=""/> // How do I set javascript variable (name) value here ?
</script>
You need to send it as a request parameter. One of the ways is populating a hidden input field.
<script>document.getElementById('firstName').value = 'john';</script>
<input type="hidden" id="firstName" name="firstName">
This way you can get it in the server side as request parameter when the form is been submitted.
<jsp:setProperty name="emp" property="firstName" value="${param.firstName}" />
An alternative way is using Ajax, but that's a completely new story/answer at its own.
See also:
Communication between Java/JSP/JSF and JavaScript
Your previous question regarding the subject
Your other previous question regarding the subject
If you can't seem to find your previously asked questions back, head to your user profile!
AFAIK you can't send data from JavaScript to JSTL that way. Because the JSTL tags are handled serverside, so the <jsp:> tags will be parsed on the server and replaced by HTML. So the <jsp:> tags won't be a part of the response that is sent back to the client; it will consist only of HTML/text. Therefore you can't access the <jsp:> tags from JavaScript, because they won't exist in the document.
Edit: sorry, the <jsp:> tags wasn't visible.
<script>
var name = "<jsp:getProperty name="emp" property="firstName" />";
</script>
The JSP code executes before the JavaScript so by the time the JavaScript gets processed the tag will be replaced with the contents of emp.firstName.

Categories