• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 392
  • Last Modified:

Jquery does not work

Hello,

I have a MVC application and I want to make my table row clickable and then when I hover over it, I want to  change the background of it.

I hvae following code that I got from some blog

<script type="text/javascript">
    $(document).ready(function () {
        $('.simplehighlight').hover(function () {
            $(this).children().addClass('datahighlight');
        }, function () {
            $(this).children().removeClass('datahighlight');
        });
    });

    $(document).ready(function(){    $("tr").click(function(){  window.location = $(this).attr("url");     }); }); 



     });
    });


</script>

Open in new window



My HTMl code is as follows:

table id="resultTable" border = "2">

    <tr style="border-style:solid"  class="simplehighlight">
        <th>
            Name
        </th>
        <th>
            Description
        </th>
        <th>
            tblStatu
        </th>
        <th>
            DueDate
        </th>
        <th>
            AssignedTo
        </th>
        <th>
            CreatedOn
        </th>
        <th>
            CreatedBy
        </th>
        <th>
            ModifiedOn
        </th>
        <th>
            ModifiedBy
        </th>
        <th></th>
    </tr>

Open in new window


That just does nto seem to work...... What can be wrong in this code?
0
TheCommunicator
Asked:
TheCommunicator
  • 3
  • 3
  • 2
1 Solution
 
Gurvinder Pal SinghCommented:
are you sure that datahighlight is supposed to be attached to children?

what about

<script type="text/javascript">
    $(document).ready(function () {
        $('.simplehighlight').hover(function () {
            $(this).css('background-color','#ccc');
        }, function () {
            $(this).css('background-color','#fff');
        });

          $("tr").click(function(){  
              window.location.href = $(this).attr("url");    
          });
    });
});
</script>
0
 
TheCommunicatorAuthor Commented:
still does not work. Is my HTMl alright though?
0
 
Gurvinder Pal SinghCommented:
looks okay...can you post the complete hml page (with minimal code, only this table and related css) so that i can try here and see why it is not working?
0
Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
P1ST0LPETECommented:
In your other recent question titled "Generating two views in one", I gave you an example that shows how to both make the rows you want clickable (using jQuery) and how to make your table rows highlight when you hover over them.  Also, it would be easier on yourself (as well as being the more modern correct html syntax for tables) to use the <tbody> and <thead> tags, as your row highlighting you only want on the rows inside of the <tbody> and not on the header row.

So using the table like in the example on your other question:

<table id="task-list">
    <thead>
        <tr>
            <td>ID</td>
            <td>Name</td>
            <td>Status</td>
            <td>Assigned To</td>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @item.Id
                    @Html.Hidden("Description", item.Description)
                    @Html.Hidden("DueDate", item.DueDate.ToShortDateString())
                </td>
                <td>@item.Name</td>
                <td>@item.Status</td>
                <td>@item.AssignedTo</td>
            </tr>
        }
    </tbody>
</table>


You would use the following jQuery to make the <tbody> rows clickable:

$('#task-list tbody tr').click(function ()
{
       alert('row was clicked');
});


Also, I showed how to do the row highlighting using CSS instead of jQuery:

#task-list tbody tr:hover { background-color: Yellow; cursor: pointer; }


However, if you must use jQuery to do your row highlight, you can do it like this using the above table:

$('#task-list tbody tr').hover(function ()
{
        $(this).addClass('highlight');
}, function ()
{
        $(this).removeClass('highlight');
});


However since you are using the same selector for both your row click and row highlight, you should chain them together like this:

$('#task-list tbody tr').click(function ()
{
       alert('row was clicked');
})
.hover(function ()
{
       $(this).addClass('highlight');
}, function ()
{
       $(this).removeClass('highlight');
});



Also, you typically should only need to use $(document).ready() once on a page.  Just put all your jQuery inside of it like this:

$(document).ready(function ()
{
    $('fieldset tr').each(function ()
    {
          /* do something */
    });

    $('#task-list tbody tr').click(function ()
    {
          /* do something else */
    });
});



0
 
TheCommunicatorAuthor Commented:
Hi,

I am ataching my file. I am not sure why same exact code that you have posted does not work on my computer.
Jquery.txt
0
 
P1ST0LPETECommented:
Can you go into more detail about what exactly is not working? I still have the example project I created last night at home on my computer.  When I get home in an hour, I will zip it up and put it on my web server for you to download.
0
 
P1ST0LPETECommented:
Ok, you can download the example mvc 3 project at the following url:

http://davisdevelopment.org/experts-exchange/tasks.zip

Note, there are two examples in there, one using ajax and the other not, both of which are found at the respective paths:

/Home/TasksAjax
/Home/Tasks

The one using ajax is using a partial page for the TaskDetail section.

Good Luck.
0
 
TheCommunicatorAuthor Commented:
Thank you so much the one with TaskAJAX helped.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now