Delete HTML Table Row using Javascript - asp.net

I am using below code to delete HTML Table row using javascript but its giving me error.
using below code i am creating a column at run time using javascript which contains delete Anchor tag.
var tbody = document.getElementById("<%= tblcriteria.ClientID %>").getElementsByTagName("TBODY")[0];
var row = document.createElement("TR")
var td4 = document.createElement("TD");
var code = "delete";
td4.setAttribute("align", "center");
td4.innerHTML = code;
row.appendChild(td4);
tbody.appendChild(row);
Below function i am using to delete current row of html table:
function deleteCriteria(i) {
if (window.confirm('Are you sure you want to delete this record?') == true) {
document.getElementById("<%= tblcriteria.ClientID %>").deleteRow(i);
}
}
its giving me below error:
'this.parentNode.parentNode.rowIndex' is null or not an object
Please tell me where i am making mistake...

this does not point to the <a> element, but to the window.

As #Sjoerd has mentioned you should use onClick instead.
This line
var code = "delete";
should read
var code = "<a href=\'#\' onclick=\'javascript:deleteCriteria(this.parentNode.parentNode.rowIndex);\'>delete</a>";

Related

there are two textboxes, want to identify on which textbox the cursor is or is focused

I have two textboxes, i want the system to identify on which textbox the cursor is. If the cursor is at second textbox then the value writen in second textbox is submitted. There is a possibility that both text box contain value but only the one having cursor on must be seleted
Using javascript is one of the possible options. May be this can help you give a very very basic idea on where to start with...
var txtFocus = null;
window.onload = function() {
var inputs = document.getElementsByTagName('INPUT');
for(var i = 0; i < inputs.length; i++) {
var fcsdTxt= inputs[i];
if(fcsdTxt.type == 'text') {
fcsdTxt.onfocus = function() {
txtFocus = this; // set the variable 'txtFocus' declared at top
}
fcsdTxt.onblur = function() {
txtFocus = null;
}
}
}
}
Now check the variable "txtFocus" when you want to see which textbox has focus,
if(txtFocus)
alert(txtFocus.id + ': ' + txtFocus.value);
else
alert('No textbox focused');
Now, you have to make sure you get the value of txtFocus on server side. So use a hidden field on your page and set the value in Javascript:
<asp:HiddenField ID="fcsTxt" runat="server" Visible="true" />
JavaScript code:
document.getElementById('<%= fcsTxt.ClientID %>').value = txtFocus;
and definitely, accessing the value of Hidden field in Asp.Net code behind file is :
string ID = fcsTxt.Value;

javascript $find returns null in IE

I'm using the AJAX Control Toolkit control "TextBoxWaterMarkExtender". The problem originally was that in Firefox, setting the text with javascript like so:
var getDateField = document.getElementById('soandso');
getDateField.value = 'someandsome';
Would be cleared on submit/post because the Extender control thought that nobody had edited it, so it was clearing the "watermark".
I followed this workaround: http://www.mindfiresolutions.com/Workaround-for-TextBoxWatermarkExtender-of-AjaxControlToolkit--855.php
and it works great in Firefox, but IE says "'null' is null or not an object" on this line:
var dateIdentified = $find("Beh" + sender).get_Text();
Anything obvious that I'm missing?
Edit: Sorry guys, I thought $find was a jQuery function.
Edit: More code:
function dateToday(sender)
{
var dateIdentified = $find("Beh" + sender).get_Text();
if (dateIdentified.length == 0)
{
var todaydate = new Date();
var smonth = todaydate.getMonth() + 1;
var sday = todaydate.getDate();
var syear = todaydate.getFullYear();
$find("Beh" + sender).set_Text(smonth.toString() + '/' + sday.toString() + '/' + syear.toString());
}
}
WaterMark:
<toolkit:TextBoxWatermarkExtender BehaviorID="BehSTART_DATE" ID="WaterMarkSTART_DATE" runat="server"
TargetControlID="dcSTART_DATE"
WaterMarkText="mm/dd/yyyy" WaterMarkCssClass="searchHint" />
For anyone interested to know, I switched from using body onLoad to call my javascript function to
Sys.Application.add_load(MyFunction);
as this article suggested: http://blogs.telerik.com/dimodimov/posts/08-12-13/don_t_use_body_onload_in_asp_net_ajax_websites.aspx
Now IE, Firefox and Chrome all see a value for the $find.
Try this:
$("Beh" + sender).text();
find() is used when you've already looked up an element or elements and you want to find child elements inside of them. For example, you grab a table and then want to find all elements inside the table with a class of foo, like so:
var myTable = $('#myTable');
// more code
myTable.find('.foo');

Can I get access to htmlText setter code in textArea in Flex?

Greetings,
I can see that when I set htmlText in a textarea control, the text property contains the html free version of the text. So there is a parser somewhere that is ripping of html from the content, which would be very usefull for my purposes.
However, based on the flex source code, the setting of html is done in UITextField.as, which is the type of the textfield member of TextArea. The line that does the work is:
super.htmlText = value;
in function
override public function set htmlText(value:String):void
Trying to follow the class hieararchy, I end up in FlexTextField class, which extends flash player's textfield class.
It appears the functionality I am after is in flash player. So is there any way of accessing this html cleaning function? Am I missing something here?
Best Regards
Seref
In case regex fails you, here is something you might want to check out:
var t:String = "asd <span>This is <font>some</font> text <b> :) </b> </span> \nand more";
function stripTags(x:XML):String {
var t:String = "";
var children:XMLList = x.children();
var child:XML;
for(var i:Number = 0; i < children.length(); i++){
child = children[i];
if(child.nodeKind() == "text")
t += child.toString();
else if(child.nodeKind() == "element")
t += stripTags(child);
}
return t;
}
var x:XML = new XML("<root>" + t + "</root>");
XML.ignoreWhitespace = false;
var s:String = stripTags(x);
trace(s);
PS: I haven't tested this ActionScript code, here is the equivalent JavaScript code that I tested and found working. I assume it would work in ActionScript since both follow ECMAScript.
var t = "asd <span>This is <font>some</font> text <b> :) </b> </span> \nand more";
function stripTags(str){
function strip(x){
var t = "";
var children = x.children();
var child;
for(var i = 0; i < children.length(); i++){
child = children[i];
if(child.nodeKind() == "text")
t += child.toString();
else if(child.nodeKind() == "element")
t += strip(child);
}
return t;
}
var xml = new XML("<root>" + str + "</root>");
XML.ignoreWhitespace = false;
return strip(xml);
}
var s = stripTags(t);
console.log(s);
output:
asd This is some text :)
and more
Nope, there is no way to access code in the Flash Player native classes.
However, you should be able to use a Regex to easily parse out all HTML Tags in your content.
Although, not tested, here is one option that came up in Google. You can just use that in Flex. So, you can probably do something like this:
var regEx : RegExp = new RegExp('<(.|\n)*?>');
var noHTMLText = htmlText.replace(regEx , '');
Of course, this was written in the browser. More info on Regex in Flex.

How to highlight a row in gridview?

My applications sends emails to users, with a hyperlink for an aspx page. There is a guid in the get string. The aspx page shows gridview with rows across multiple pages.
My requirement is when the link is clicked the user should be directed to appropriate page and the row with mapping to guid should be highlighted?
Canavar has a point, but for a simple thing, you can take the load of the RowDataBound method and perform the hightlight at the end of the rendering.
Let's imagine (cause you did not provided any information regarding it - BTW, please give us always the most detailed version of a question) :)
GridView had 30 rows displayed and we need to hightlight the Row ID 22.
follow this steps:
1 - Add an HiddenField with
<asp:HiddenField ID="rowID" CssClass="rowids" Value='<%# Eval("YourROWID") %>' />
2 - Now that we have the row, all we need is, when the DOM is ready, loop trough all rows and hightlight the one that has the same Value to the selectrow that you mention in a comment
Are you using jQuery?
var selectedRow = '<%= Request["selectrow"] %>';
$(document).ready(function(){
$(".rowids").each( function() { // Get and Loop through all class=rowids elements
if( $(this).value() == selectedRow) {
// we found it! lets find the TR and add the highlight class to it
$(this) // the INPUT ELEMENT
.parent() // the TD element
.parent() // the TR element
.addClass("highlight"); // Add the class
}
});
});
if not using jQuery (you should though, cause I almost sure that you will re use it else where to improve more part in your code)
var selectedRow = '<%= Request["selectrow"] %>';
var arr = document.getElementsByTagName("input");
for (i = 0; i < arr.length; i++) { // Loop through all input elements
if( arr[i].className == "rowids" && arr[i].defaultValue == selectedRow ) {
// it's a rowids element and the value is the one we are looking out
var tableRow = arr[i].parentNode.parentNode; // get it's TR element
tableRow.className = tableRow.className + ' hightlight'; // Add the class
break; // no need to loop through more, we already found the one we are looking for
}
}
REMEMBER to add this in a script before the BODY tag, so it will be called when all elements are rendered in the page (DOM ready trick)
You can use JQuery for that.
$("a").click(function(){
$(this).effect("highlight", {}, 3000);
})
it would be something that simple. Hope it helps.

Will this jscript run inside a .ASCX page?

Will this run inside an ASCX file in my ASP.Net project?
I can't seem to get it to work, just wondered if there was some particular thing missing? Do i need to include "runat="server""?
<!--[if lte IE 6]>
<script type="text/javascript">
window.onload = function() {
var images = document.getElementById("GetQuote").getAttribute("ImageUrl");
for (var i = 0; i < images.length; i++) {
var image_png_src = images[i].src;
var image_gif_src = image_png_src.replace(".png", ".gif");
images[i].src = image_gif_src;
}
};
</script>
<![endif]-->
It appears that this JavaScript function is attempting to reference ASP.NET web control properties, which are not accessible from the client side. You can, however, reference the HTML entities that are output to the page by ASP.NET, along with their attributes.
Assuming your JavaScript code is code within the .ascx code, change this line:
var images = document.getElementById("GetQuote").getAttribute("ImageUrl");
To this:
var images = document.getElementById('<%=GetQuote.ClientID%>').getAttribute("src");
What this does is insert the client ID that ASP.NET creates for the GetQuote Image control so that it can be referenced from the client side. It also references the proper attribute of the HTML img element (src) that corresponds to the ImageUrl property of the server side Image control.
EDIT:
I noticed after seeing TheVillageIdiot's response (and reading your code a bit more closely, which I should have done initially) that you are trying to use the images variable as an array. It appears that you may be trying to match several image elements that contain the text "GetQuote" in their IDs (like GetQuote1, GetQuote2, etc.).
Assuming that you need to do this on the client side, and that you are not using a framework like jQuery, try this:
window.onload = function()
{
// get all img elements on the page and load them into an array
var images = document.getElementsByTagName("img");
// iterate through the image array
for (var i = 0; i < images.length; i++)
{
// check that the current image's id contains "GetQuote" (case sensitive)
if (images[i].id.indexOf("GetQuote") >= 0)
{
var image_png_src = images[i].src;
var image_gif_src = image_png_src.replace(".png", ".gif");
images[i].src = image_gif_src;
}
}
};
You don't need a runat="server" because this is code that will run on the client. It should work, but maybe you are having problems because you are referencing IDs on items that are asp.net controls? This would mean that your ID values would not match. If so you could solve this by using control.ClientID redndered into the JavaScript server-side to make them match.
If GetQuote is an aspx element then you need to replace it with <%= GetQuote.ClientID %> and ImageUrl with src like
var images = document.getElementById('<%=GetQuote.ClientID%>')
.getAttribute("src");
Also images should be one string not an array of strings so your loop is also at fault. Try this one instead:
var image = document.getElementById('<%=GetQuote.ClientID%>').
if(images){
var src = image.GetAttribute("src");
image.SetAttribute("src",src.replace(".png", ".gif");
}

Resources