Getting the id of an ASP embedded object using JavaScript and jQuery
I am using jQuery to start and run a method when jQuery handles an ASP.NET (2.0) change event . The problem is that the dropdown is inside the gridview, and even when the user decided to edit a row in that gridview.
I think I am assembling an object using an ASP code block, but the problem is that on the first page load the row edit index does not exist and throws an error. Block injection within a statement IF
also does not work.
$(document).ready(function() //when DOM is ready, run containing code
{
<% if (grvTimeSheets.EditIndex > -1) {%>
$(#<%=grvTimeSheets.Rows[grvTimeSheets.EditIndex].FindControl("ddlClients").ClientID %>).change(function() {
$(#<%= grvTimeSheets.ClientID %>).block({ message: null }
});
}
);
<% } %>
This is one attempt I made and I also tried to put the ASP IF statement code outside of the JavaScript block. This doesn't work either.
How can I apply a jQuery event to a drop folder? Ideally as laconic as possible.
Thanks for the answer, but no, it doesn't work :( JavaScript code doesn't seem to be outputting ... Confusing ...
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function() //When DOM is ready, run the containing code
{
}
);
</script>
Output. Although this is the code:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.tablesorter.js"></script>
<script type="text/javascript" src="jquery.blockUI.js"></script>
<script type="text/javascript">
$(document).ready(function() //when DOM is ready, run containing code
{<% if (grvTimeSheets.EditIndex > -1) {%>
var id = '#<%=grvTimeSheets.Rows[grvTimeSheets.EditIndex].FindControl("ddlClients").ClientID %>';
$(id).change(function() {
$(id).block({ message: null }
});
<% } %>
}
);
</script>
This has been done before, making me CRAZY.
Sorry, could you please make this a little clearer. I tried to define the whole thing in code like this:
DropDownList ddl (DropDownList)grvTimeSheets.Rows[grvTimeSheets.EditIndex].FindControl("ddlClients");
if (ddl != null)
{
ClientScriptManager csm = Page.ClientScript;
Type cstype = this.GetType();
String csname1 = "PopupScript";
string script = @"
<script language='javascript' type='text/javascript'>
$(#" + ddl.ClientID + ").change(function() { $(" + grvTimeSheets.ClientID + ").blockUI({ message: null }});} </script>";
csm.RegisterStartupScript(cstype, csname1, script, true);
}
Is this what you mean?
By the way, the above didn't work. There are no mistakes, just no events.
source to share
Several things are here.
- You need to wrap your selectors in quotes when you pass them to a function
$()
. The code snippet above generates something like$(#some-generated-id)
that which won't work. - The closing curly brace for your server side if the statement was outside of the onready function. It must be nested at the same level as the opening of the if.
Try the following:
$(document).ready(function() //when DOM is ready, run containing code
{
<% if (grvTimeSheets.EditIndex > -1) {%>
var id = '#<%=grvTimeSheets.Rows[grvTimeSheets.EditIndex].FindControl("ddlClients").ClientID %>';
$(id).change(function() {
$(id).block({ message: null }
});
<% } %>
}
);
If that doesn't work, go ahead and paste in the generated javascript.
source to share
I used the Page.ClientScript property to register the script block to contain whatever id I need to be accessed with jQuery.
Here's an example of my JavaScript in an external file:
var myFancySelector = '#' + myControlId;
selectedValue = $(myFancySelector).val();
myControlId is defined from the code behind and registered with the ClientScriptBlock.
source to share
Use this:
cs.RegisterClientScriptBlock(cstype, csname, cstext2.ToString(), False)
It is wrong to create script tags as you include them. The MSDN documentation is wrong in how it explains this flag.
Also, just put the client ID of your controls in separate variables from your code, not jQuery .
Then use variables that contain IDs instead of jQuery code.
source to share
Inside the script block you create in the code behind:
string script = @"<script type=text/javascript> var myControlId = '" + ddl.ClientId "';") + "</script>"
I haven't tested this syntax, but it should be close. You can add additional syntax for grvTimeSheets.ClientID
yourself. If you get this working, you can modify it to build a JavaScript array and store the ClientId that way, and then you only have one global JavaScript variable that you need to work with.
source to share
Another option is to simply specify the element you are looking for for a class name that describes its behavior. Then your jQuery code becomes very clear:
$(function() {
$("select.yourMarkerClass").change(....);
});
If there is no edit line, this code does nothing. If there is an element that matches the selector, you add a new behavior.
source to share
If you are not using the same ID elsewhere on the page, you can disallow ASP.NET UniqueID with one of the jQuery extended selectors
$('[id$=ddlClients]')
This only matches the end of the id string, not an integer. Keep in mind that if the control is present multiple times on different lines, this will match all instances.
See Selectors for details .
source to share
I will try more after the weekend. This was the code, however:
DropDownList ddl = (DropDownList)grvTimeSheets.Rows[grvTimeSheets.EditIndex].FindControl("ddlClients");
if (ddl != null)
{
ClientScriptManager csm = Page.ClientScript;
Type cstype = this.GetType();
String csname1 = "PopupScript";
string script = @"
<script language='javascript' type='text/javascript'>
jQuery(#" + ddl.ClientID + ").change(function() { $(" + grvTimeSheets.ClientID + ").blockUI({ message: null }});} </script>";
csm.RegisterStartupScript(cstype, csname1, script, false);
source to share
Because you have a dropdown menu on each line. Each dropdown will have a unique ClientId, so I suggest doing what Ben suggested and using a class selector as this is the simplest solution.
Or, you can create a JavaScript function in your edit click and then get the unique client ID in a dropdown on that editable row.
Sorry, I should have read your code closer.
source to share