views:

201

answers:

5

The jQuery below gets a partial view containing a html table of addresses. jqModal is then used to display the addresses, and a mouseover used to highlight an address. This works fine on my local machine. When I try running it from a server (Win 2008, IIS 7), the addresses are shown in jqModal but the higlighting fails to work. Also, this works fine when browsing from the server.

<script>
$(document).ready(function() {

    $("#Search").click(function() {
        displayAddressList();
    });
    $('#dialog').jqm();

});


function displayAddressList() {
   var PostCode = $("#tbSearch").val();
   var url = '<%= Url.Action("AddressSearch", "Addresses")%>';
   $.get(url, { PostCode: PostCode }, function(data) {
   $("#dialog").html(data);

       $('table#data_table tr').mouseover(function() {
           $(this).addClass('selectedRow');
       }).mouseout(function() {
           $(this).removeClass('selectedRow');
       });   

   }); 
}
</script>

<style>  
  .selectedRow {   
     background-color: white;   
     cursor: pointer;   
  }   
</style>  

<div class="jqmWindow" id="dialog">
    <a href="#" class="jqmClose">Close</a>
</div>
A: 

Maybe it doesn't like:

$('table#data_table tr')

Try changing that selector to just:

$('#data_table tr')

Otherwise, try using different CSS properties, maybe those particular ones are not getting applied. Of course, this could all be way off, but it can't hurt to try.

karim79
$('table#data_table tr') should work. If it doesn't, that's a bug either in jQuery or the browser, but I would be really surprised if that were the case.
DrJokepu
I know, it's seems more likely that it's to do with CSS. I just listed the things I would try, as *unlikely* seems to bite me a lot these days :)
karim79
Worth a try, but did'nt sort it
Danny
karim79
+1  A: 

If you don't care about Internet Explorer 6 support, you can implement row highlighting in CSS instead.

#data_table tr:hover {
  background-color: white;
  cursor: pointer;
}

If you do this, make sure to have a valid DOCTYPE declaration at the top of your HTML pages.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd"&gt;
Wesley
When the user clicks the row I will then be using jQuery to update textboxes on the page and close the jqModal window.
Danny
@Danny - you can still use jQuery for handling the clicks, etc. but as Wesley says, it might be easier to just use CSS for the row highlighting
Ian Oxley
The click event does not work either
Danny
+1  A: 

You say only the highlight fails to work. Generally, you'd want to use jQuery's live function for that: http://docs.jquery.com/Events/live - it is meant to bind event after ajax calls (or other DOM changes). You'll only have to call this once at $(document).ready, instead of every time you load the data.

Another common option is that you have more than one #data_table on the page (maybe hidden), jQuery will only find the first one.

Kobi
Click function on the row also failing.
Danny
Failing, or not starting at all? (btw, you didn't post any click function) Did you try it with the live function? You'd have simpler code that way, too.
Kobi
Not live function yet, will do though. I placed an alert after $(this).addClass('selectedRow'); which does not fire.
Danny
A: 

i would add some alerts so you can see if anything is actually happening. also you've got your css set to background:white - so will you actually see anything change - should it be a colour?!

Josh

Josh
The jqModal window is not white, so you can see the highlighting
Danny
+1  A: 

I would agree with DrJokepu: it looks as though your Ajax is requesting data from localhost (hence it only working on your dev machine or when browsing on the server).

Can you check the Ajax requests in something like Firebug (or Fiddler for IE) to see if they are actually being made?

Ian Oxley
For watching web traffic the wonderful tool HttpFox: https://addons.mozilla.org/en-US/firefox/addon/6647 is excellent.
Jamie Love
The table of addresses is being returned from the Ajax request and is displayed in the jqModal window.
Danny