Solved

Jquery does not work

Posted on 2011-09-10
8
384 Views
Last Modified: 2012-05-12
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
Comment
Question by:TheCommunicator
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
8 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36515487
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
 

Author Comment

by:TheCommunicator
ID: 36515503
still does not work. Is my HTMl alright though?
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36515512
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
What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

 
LVL 10

Accepted Solution

by:
P1ST0LPETE earned 500 total points
ID: 36516291
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
 

Author Comment

by:TheCommunicator
ID: 36516337
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
 
LVL 10

Expert Comment

by:P1ST0LPETE
ID: 36517155
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
 
LVL 10

Expert Comment

by:P1ST0LPETE
ID: 36517723
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
 

Author Comment

by:TheCommunicator
ID: 36525104
Thank you so much the one with TaskAJAX helped.
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

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

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question