Thank you once again Imar for responding to my post.
As you advised, I managed to get the menu control work as i wanted and i also implemented the 'selected' class on the server using the Page_Load event.
Now my problem is with jQuery and browser compatibility. In the book, you mentioned that jQuery is a JavaScript library that makes using the scripting language easier and also reduces the many differences between browsers.
Now my question has to do with with wiring events to controls.
1. I notice that server-side controls are mostly not recognized when you try to program against them in JavaScript. Mostly, they will only work when you refer to them by their css class name, even if you use the <%%> to get the ClientID. Also, the browsers do not seem to apply some JavaScript methods and properties on server controls.
For example, I have a server-side textbox control with class name 'directions'.
Code:
<asp:TextBox class="directions" ID="TextBox1" runat="server" ReadOnly="True" TextMode="MultiLine"></asp:TextBox>
I tried to access it from jQuery with the following code:
Code:
$(function()
{
$('.directions').innerHTML = someValue;
});
It worked in IE, FireFox and Opera, but did not work in Safari and Chrome.
In another instance; this time with an html element.
I have the following code that is supposed to display the bing map and print out the directions for my location in the div element and then display the div element.
Initially when the page loads, the div element is hidden. Since I could not get all browsers to agree on the textbox, I changed it to a div. Below is my JavaScript is my code:
Code:
<script type="text/javascript">
$(function ()
{
$('.directions').hide();
var map = null;
map = new VEMap('myMap');
map.LoadMap(new VELatLong(39.9627544730902, -75.2523048967123), 16, VEMapStyle.Road, false);
//get the center of the map
var pinpoint = map.GetCenter();
//declare shape of map in order to locate the center of the map
shape = new VEShape(VEShapeType.Pushpin, pinpoint);
shape.SetTitle("Ruby's Beauty Salon");
shape.SetDescription("We are located here. To get directions to come here, " +
"simply enter your current address in the textbox below " +
"and hit 'Get Directions'. If you have any questions, please " +
"call us on 610-446-2662.");
map.AddShape(shape);
$('#DirectionButton').click(function GetDirections()
{
var what = document.getElementById('DirectionTextBox').value;
var options = new VERouteOptions();
options.DrawRoute = true;
options.SetBestMapView = false;
options.RouteCallback = onGotRoute;
map.GetDirections([what, map.GetCenter()], options);
});
});
function onGotRoute(route)
{
try
{
var legs = route.RouteLegs;
var turns = "<h1>Total distance: " + route.Distance.toFixed(1) + " mi</h1><br />";
var numTurns = 0;
var leg = null;
for (var i = 0; i < legs.length; i++)
{
leg = legs[i];
var turn = null;
for (var j = 0; j < leg.Itinerary.Items.length; j++)
{
turn = leg.Itinerary.Items[j];
numTurns++;
turns += "<ul><li>" + numTurns + ". " + turn.Text + " (" + turn.Distance.toFixed(1) + " mi)</li></ul>";
}
}
document.getElementById("DirectionResults").innerHTML = turns;
$('.directions').slideDown('5000');
}
catch (err)
{
}
}
</script>
Note that I already have all the references to those libraries, in the master page.
Then in my html, I have the following code:
Code:
<!--This is the div where the map is displayed-->
<div id="myMap" style="width:770px; height:534px">
</div>
<!--This is the textbox where a user enter her current location address-->
<input id="DirectionTextBox" type="text" name="DirectionTextBox" />
<!--When the user clicks this button, the direction to my location is supposed to be populated in the DirectionResults div below and then the div is supposed to slide down-->
<input id="DirectionButton" type="button" onclick=" name="DirectionButton" value="Get Directions" /><br />
<br />
<div id="DirectionResults" class="directions"></div>
The map potion works fine in all browsers. It is displayed well in the map div. The problem is with the event wiring for the DirectionButton. When I test the app, the button click event works for all browsers besides Opera. Is there a way to get the code to work in all browsers?
Is there any explanation for the way the browsers differentiate server controls from html elements?
I know this is a lot, but I hope I have given enough information.
Thank you once again...
The Menu Control and master pages
button below this post to show your appreciation!
