SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    using ajax (jquery) to display record status page onmouseover

    Hello

    I have a table of user information. What i would like is when the user mouse's over a row that has been marked as invalid, a tooltip / small popup window hovers over showing the status and reasons why that entry is invalid. But i would like this "status" page to also be available for non-ajax users, so they would just click the record and be taken to the page.

    So for instance, say i have a page called itemStatus.php, called as itemStatus.php?recordID=54, which displays a summary of why the record has been flagged as invalid. I would like this to be loaded and displayed using ajax as a tooltip.

    The closest example i can think of is how Netflix works, when you mouseover a movie image, and a popup/tooltip appears with more detailed information.

    Does anyone know of a jquery plugin that will do this?

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,578
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Why not just put the status information in the HTML, hidden, and display it on mouse over? You can do it without JavaScript using only :hover selectors. It seems like it won't add so much weight to the page that you need to use AJAX or JavaScript at all.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here is what the form could normally be

    Code html4strict:
    <form id="myForm">
    <p><label>Name: <input type="text" name="name"></label></p>
    </form>

    And with the following CSS, here is what it could be like when an error occurs.

    Code css:
    form .error {
    	display: none;
    }
    form p:hover .error {
    	color: red;
    	display: inline;
    }

    Code html4strict:
    <form id="myForm">
    <p>An error has occured</p>
    <p><label>Name: <input type="text" name="name" value="Jack the Ripper"></label>
    <span class="error">Only proper names are allowed</span></p>
    </form>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    423
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for the replies.

    The popup needs to display much more information than "the username is not allowed" - it is a small status report of why a table row is marked as invalid: a mini-page. To write a status report into the html page for each table row, hide them all, and only show them when a user wants to view that row would add so so much more weight to the page than an ajax call to display the status summary on demand.

    As i said up there, the closest thing i can think of representing what i am looking for is the netflix site, where you mouseover an item and a popup appears with more detailed information.

    Any other ideas are welcome, or some demos of how to do the above using jquery.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You're wanting to show information about why the row is invalid, and I presume that you want all of the invalid entries to be fixed by the user before another submission is made.

    This is not a good situation in which to use ajax. When it comes to error handling, you should just provide all of the necessary information to resolve it.

    You cannot rely on css being available. You cannot rely on javascript being available. You cannot rely on modern browsers being used.

    Start from the base needs, of an html page that gets processed by the server.
    Use css to improve the presentation of that page
    Use javascript to add behaviour to improve the user experience
    Use ajax to pull down optional information
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •