CODEWITHSUNDEEP
jqueryasp.net-mvc
Danny
Danny

Reputation: 2821

Strange jQuery problem

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>

Upvotes: 1

Views: 283

Answers (5)

Ian Oxley
Ian Oxley

Reputation: 11056

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?

Upvotes: 1

Josh
Josh

Reputation: 6322

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

Upvotes: 0

Kobi
Kobi

Reputation: 138017

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.

Upvotes: 1

Wesley
Wesley

Reputation: 10852

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

Upvotes: 1

karim79
karim79

Reputation: 342635

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.

Upvotes: 0

Related Questions