javascript $find returns null in IE - asp.net

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');

Related

Sort elements in iframe from parent. (Prototype + Scriptaculous)

I am trying to sort elements in an iframe from the parent frame using prototype + scriptaculous. I am receiving the following error when I try to create the sortable object:
"element.identify is not a function"
Firebug is stating it is failing on the following line of code from dragdrop.js (Line 734)
"this.sortables[element.identify()] = options;"
Due to the setup I need all code running from the parent, not the iframe.
My function looks like this:
function setSortable(){
//Create sortables
var doc = top.frames[0].document;
var sideContent = doc.getElementById('side-bar');
var mainContent = doc.getElementById('main-content');
if(sideContent){
Sortable.create(sideContent, {tag:'table'});
}
if(mainContent){
Sortable.create(mainContent, {tag:'table'});
}
}
Is it possible to run the scriptaculous code from the parent frame without referencing it in the iframe page?
Your help would be much appreciated.

Delete HTML Table Row using Javascript

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>";

unable to set href inside click event of Jquery

Hi I am trying to set href using Jquery inside click event of RadioButtonList but that doesnt work If I take the same code to document.ready event it works fine but not in click event. Please advice.
$(document).ready(function() {
url = "Results.aspx?latitude=" +latitude + "&Longitude=" + longitude;
$("a[href='http://www.google.com/']").attr("href", url); // this works..
}
$('.rbl input').click(function() {
id = $(this).parent().children("input").val();
url = "Results.aspx?latitude=" + latitude + "&Longitude=" + longitude + "&ServiceCenterProductTypeId=" + id;
//alert(url);
$("a[href='http://www.google.com/']").attr("href", url); //this doesnt work....
});
});
Looks to me like you have an extra closing curly bracket } after this line:
$("a[href='http://www.google.com/']").attr("href", url); // this works..
You (probably) have the AutoPostBack property set to true, causing a postback to the server which reloads the entire page.
Therefore, your changes in Javascript are overwritten by the postback.

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");
}

Events Overwritten in ASP.AJAX on IE7

Greetings!
I'm calling a Web service from Javascript when a user clicks on a link. I need to get the coordinates where the user clicked so that I can display a DIV in an appropriate location. My client-side script looks like the following:
var g_event;
function DoWork(event, theId)
{
if (IsIE())
g_event = window.event;
else
g_event = event;
Acme.WebServices.Worker.GetInformation(theId, DoWorkSuccess);
}
function DoWorkSuccess(result)
{
var l_elemDiv = document.getElementById("content-area-div");
DisplayAreaDiv(g_event, l_elemDiv, result);
}
It's used like this:
Help
This works great in Firefox, Safari, and Opera. In IE7, not so much. For example, if I place the following code at the end of both the DoWork() and DoWorkSuccess() functions:
alert(g_event.clientX + ", " + g_event.clientY);
In IE, I'll get two alerts; the first one has correct coordinates, but the second one (which displays on top of the first one) is simply "[object]". Since that "[object]" one is the last one, my DIV is incorrectly displayed in the top left of the browser window. Is there a way I can prevent IE from giving me a second "bad" event? Thanks.
Why not extract and save the coordinates in DoWork and simply use them in DoWorkSuccess rather than saving the event. Of course this won't work if there is more data you are extracting from the event.
var client_x;
var client_y;
function DoWork(event, theId)
{
var g_event;
if (IsIE())
g_event = window.event;
else
g_event = event;
client_x = g_event.clientX;
client_y = g_event.clientY;
Acme.WebServices.Worker.GetInformation(theId, DoWorkSuccess);
}
function DoWorkSuccess(result)
{
var l_elemDiv = document.getElementById("content-area-div");
DisplayAreaDiv( { clientX : client_x, clientY : client_y }, l_elemDiv, result);
}
Have you tried setting window.event.cancelBubble = true in your DoWork function?
If not, quirks mode has good article on events and event bubbling - http://www.quirksmode.org/js/events_order.html that has helped me a lot with these kinds of issues.

Resources