Solved

Jquery does not work

Posted on 2011-09-10
8
376 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
  • 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
 
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now