I'm generating a table of content in an ASP.NET page and I want to add client side OnClick actions to each cell (the action should be to set the value of a named TextBox control to the text in the clicked cell). If I could directly add stuff to the HTML output, I think I could do this with a single line of JavaScript in each cell.
Given that I'me not now using JQuery (and never have before), what is the simplest solution to adding this (including the time spent learning stuff)?
Edit: this seems to work
If you are creating your table programmatically, using HtmlControls, you can set the onclick client attribute of the HtmlTableCell:
HtmlTableCell cell = new HtmlTableCell();
cell.Attributes.Add("onclick", "someFunction();");
However, if you're using jQuery you can do something like this:
$('td').click(function(){ // Select all the table cells on the document.
$(this).html($('#textboxId').val()); // When clicked, change the innerHTML
}); // with a textbox value.
it depends how you're generating that table of content.
If bulding up using a table control, you can add JavaScript to TableCell controls using the Attributes.Add() method.
If building up with the GridView, you can add JavaScript when the RowDataBound event is raised
You should give each cell a css class... class="contentsCell"
You can then add the following script to your head tag (along with a jquery include)
$(document).ready(function(){
$(".contentsCell").click(function(){
CallYourFunction();
})
})
Where CallYourFunction() is you own function...
This will basically attach an
onclick=" CallYourFunction();"
to each td cell (or any other element) with the class "contentsCell"
Also, if you want to grab the text inside the cell, something like:
$(document).ready(function(){
$(".contentsCell").click(function(){
var mytext = $(this).text();
CallYourFunction(mytext);
});
});
Check out visualjquery.com for a great reference for jquery
Well, your question is kind of difficult to follow, but I'll give you a few pointers.
Each control has a ClientID property. This is useful for injecting into your javascript so you know the client side id of the control.
jQuery syntax for putting text into a textbox would be like the following:
$("#" + clientId).attr("value", theValue);
and the jQuery syntax for getting text from a cell would be:
$("#" + cellId).html()
Related
I am trying to capture the click event of a row using a column of "use" buttons. This is similar to the "selectable" feature in the Kendo grid, but having a button makes it more obvious for the user in our case.
Because there are multiple buttons (and I don't know if you can dynamically assign button id values), I tied a CSS class to the button, and I will use that to determine what row I am on when the user clicks the USE button.
Here is a dojo of what I am trying to accomplish, but for some reason, the click event (alert statement) is never executed.
http://dojo.telerik.com/UkIW/2
Can anyone spot the problem?
As far as I can see you're using jQuery and no Dojo code so far. But there are some mistakes here, first of all, you should put the event handler for hte buttons in the ready() handler as well, so move it inside:
$(document).ready(function() {
// ...
});
And then second, if you're binding to dynamic elements with jQuery, the preferred way of doing so is by adding it to a parent element (for example the <body>) and then adding a second parameter as shown below:
$(document).ready(function() {
// ...
$("body").on("click", ".use", function() {
// ...
});
});
I created a milestone in your example: http://dojo.telerik.com/UkIW/5
hi i have installed scheduler module from drupal.org. and i have set all the settings regarding this. now i can set publish and unpublished date in text box(there is format of date below text box).
i want to use java script calendar so when user click on the text box ,the calendar should open.
how can i do this
Since you're using Drupal you should have JQuery preloaded. You don't necessarily need JQuery to do this but it makes it easier, you'll use JavaScript either way.
With JQuery, simply setup a click listener on the textbox and have it call the whatever function triggers the calendar display like so...
Note: I used a simple ID selector below "#textbox" replace it with whatever way you want to select your textbox input. (eg. if you've given the HTML textbox input element an ID of "textbox" you can use my example)
$(document).ready(function(event) {
$('#textbox').live('click', function() {
//call your function here
});
});
I have got a literal control on page (with some data on it). i want to access it in javascript and want to put some text on it. please tell me how can i access literal control in javascript. (i am using asp.net)
My code in javascript (but not working):
lths = document.getElementById("<%= lblhs.ClientID %>");
lths.innerHTML = 'this is text line"
You can find it using document.getElementById('<%= myControl.ClientID %>') or if you are using .NET 4.0 you can directly set the id field to be pulled by javascript. Alternatively you can use jquery's selectors. Your code isn't working because the Literal control doesn't render as an element, just static text. You can place a span around it, or use a Label control, which renders as a span for you.
I don't think that you can access a literal control from your javascript client code because a literal control just renders it's pure value without any surrounding tags. So you don't really have an element which you could get by id.
What you could to is changing the literal control to a label control. This renders out as a html span tag by default. Like that you can select it on the client side.
Another option would be to write a span or div tag in your literal control on the server side like this:
myLiteral.Text = "<div id=\"myDiv\">Some Text here</div>"
on the client you could select the elemnt by using:
var myDiv = document.getElementById('myDiv');
Just to rule out the obvious (since no one else mentioned it), this is a syntax error in JS:
lths.innerHTML = 'this is text line"
Not sure if this was a typing error here, or if you copied it from your code. You can use either " or ' but not both to surround a string. Also, you should use terminating semi-colons as best practice (although it's not required).
lths.innerHTML = 'this is text line';
The <%= myControl.ClientId %> technique does not work when you are using master pages. That could be the case.
What you can do is: Take a hidden field. Save the ID of the label in the hidden field. Access the value attribute to get the ID and then use document.getElementByID('HiddenField.Value') to get the control.
In my ASP.NET page I have a text box which shows data which is bind to an (JavaScript) object variable.
I want that textbox to resize everytime, the JavaScript object, e.g. result.title will change everytime.
Important:
I want to fit the textbox exactly to the text length inside.
Here is a great tutorial that teaches you how to make a jQuery plugin to do exactly what your talking about.
You could use onChange:
<textarea onChange="resize(this)"></textarea>
<script>
function resize(el) {
el.cols = el.value.length;
}
</scrip>
Btw are you using Ajax?
Here's a jQuery plug-in: http://www.unwrongest.com/projects/elastic/
Is there an accepted way to "move" a control.
My client wants to place a certain chunk of markup (representing some visual element) in one of several different places on the page. The locations are different to the point that I can't effect the change on CSS along (by floating it or something).
I considered just putting the control in multiple spots with Visible set to "false," then displaying the one in the place they wanted for that particular page.
However, the code for this control is not trivial -- there's a couple template sections, for instance. Having to dupe this in multiple places would get unwieldy. Also, I don't want to have to work with this control strictly from the code-behind for the same reason.
So, I'd like to put it in one place on the Web form, the move it around based on where I want it. Could I put Placeholders in different spots, have the control in one spot, then remove and add it to the right spot? I suspect this would work.
Does someone have a better idea? Is there a best practice for this?
I'd recommend using a placeholder control, moving your markup into a separate user control, then loading this at runtime and adding it to the relevant placeholder.
Eg.
// Load a user control
MyControl userCtrl = (MyControl) LoadControl("~/Controls/MyControl.ascx");
// Or create an instance of your control
SubclassedControl subclassedCtrl = new SubclassedControl();
// Do stuff with controls here
userCtrl.LoadData();
subclassedCtrl.Text = "Hello World";
// Check which placeholder to add controls to
PlaceHolder placeHolder = (foo=="bar") ? placeHolder1 : placeHolder2;
// Add the controls
placeHolder.Controls.Add(userCtrl);
placeHolder.Controls.Add(subclassedCtrl);
This will avoid cluttering up your page with unnecessary markup, and loading it at runtime will also avoid unnecessary confusion later, when another developer looks at the code and can't immediately see why a control is in one place in the markup, but renders on a completely different part of the page.
An alternative (and one I've seen done many times before) is through javascript and the DOM. Render your control inside a hidden div tag. So you would render your content here:
<div id='rendercontent' style='display:none'>
.. control here ..
</div>
Then, lets say you wanted to move it all here (the span tag is inside because that's what we're going to replace):
<div id='newlocation1'><span></span></div>
You would define the following javascript:
<script language="JavaScript">
function replaceNode(newElementID, targetElementID)
{
var targetElement=document.getElementById(targetElementID);
var newElement=document.getElementById(newElementID);
targetElement.replaceChild(newElement, targetElement.firstChild);
}
</script>
And when you want to move the content to the new location, call:
<script language="JavaScript">
replaceNode('rendercontent','newlocation1');
</script>
Do Web Parts do what you want to do?
Or, you can change the parent programmatically of your controls to move them into a separate area.
You can override the Render method and place the controls wherever you want in the html.
You only need to add controls to the Controls collection that must interact on the server. The rest of your HTML can just be written to the response stream. If you override Render you can create the html anyway you see fit, placing the controls in any order.
Below is an example of how to write out your html.
protected override void Render(HtmlTextWriter writer)
{
AddAttributesToRender(writer);
writer.RenderBeginTag(TagKey);
writer.RenderBeginTag(HtmlTextWriterTag.Div);
_control.RenderControl(writer);
writer.RenderEndTag();
writer.RenderEndTag();
}
You could always put panels in the pre-defined locations and add the control to the specific panel at runtime.. Here's an example adding a label (the label could be replaced with any control).
Dim lblDisplay As Label = New Label()
lblDisplay.ID = "myLabel"
lblDisplay.Text = "Some Text"
pnlDisplay.Controls.Add(lblDisplay)
As far as...
"Also, I don't want to have to work
with this control strictly from the
code-behind for the same reason."
I think you're going to have to do most of your work in the code behind.
PS.. a good example of the whole usercontrol setup can be downloaded here..
http://www.asp.net/downloads/starter-kits/time-tracker/