Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Jquery does not work

Posted on 2011-09-10
8
Medium Priority
?
386 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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 
LVL 10

Accepted Solution

by:
P1ST0LPETE earned 2000 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
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…

722 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