locked
Onclick pull up information RRS feed

  • Question

  • User692055318 posted

    Hello,

    This is more of a theoretical conversation. Has anyone ever created a page where there was a listing and when you clicked on an item something popped up showing you some information about it? If so what technology did you use? I looked at jquery and jquery-qtip but I wasn't sure I could pull data into it.

    Any thoughts or direction would be great.

    Thanks

    Laura

    Tuesday, April 21, 2015 10:39 AM

Answers

  • User281315223 posted

    Sure!

    I've used several techniques like those that you have mentioned (such as QTip and other jQuery-based "tooltip" plug-ins). Basically the way that this works is that on the element you are clicking on you'll use some type of attribute (such as an HTML5-data attribute to store information about the item that you want more information on) as seen in the following example :

    <b class='item' data-id='42'>Click me for more information</b>

    Then you would wire up an event that might pass that ID value to a specific URL that would populate your additional information for it :

    $('.item').click(function(){
         // When your item is clicked, grab the id
         var id = $(this).data('id');
    
         // Now that you have the ID, you can use this to define or build a URL to make an AJAX call with here
    });

    Based on looking at the recent QTip documentation, you can see instructions here for how to set a specific URL to make an AJAX call to populate the tooltip itself :

    $('.selector').qtip({
        content: {
            text: 'Loading...', // The text to use whilst the AJAX request is loading
            ajax: {
                url: '/path/to/file', // URL to the local file
                type: 'GET', // POST or GET
                data: {} // Data to pass along with your request
            }
        }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 21, 2015 10:59 AM

All replies

  • User281315223 posted

    Sure!

    I've used several techniques like those that you have mentioned (such as QTip and other jQuery-based "tooltip" plug-ins). Basically the way that this works is that on the element you are clicking on you'll use some type of attribute (such as an HTML5-data attribute to store information about the item that you want more information on) as seen in the following example :

    <b class='item' data-id='42'>Click me for more information</b>

    Then you would wire up an event that might pass that ID value to a specific URL that would populate your additional information for it :

    $('.item').click(function(){
         // When your item is clicked, grab the id
         var id = $(this).data('id');
    
         // Now that you have the ID, you can use this to define or build a URL to make an AJAX call with here
    });

    Based on looking at the recent QTip documentation, you can see instructions here for how to set a specific URL to make an AJAX call to populate the tooltip itself :

    $('.selector').qtip({
        content: {
            text: 'Loading...', // The text to use whilst the AJAX request is loading
            ajax: {
                url: '/path/to/file', // URL to the local file
                type: 'GET', // POST or GET
                data: {} // Data to pass along with your request
            }
        }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 21, 2015 10:59 AM
  • User692055318 posted

    Perfect! Thanks as always Rion.

    I had pieces but I was missing how to link the id. Thanks again.

    Laura

    Tuesday, April 21, 2015 11:03 AM