Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 96
  • Last Modified:

Make a conversation popup from a table

I have a table that is like this:

    Month   Day       Year              Name 
    ------------------------------------------------
    12      2           2016              Jazz
    13      5           2016              John

Open in new window


I want it to be like

    Month i  Day       Year              Name 
    ------------------------------------------------
    12       2           2016              Jazz
    13       5           2016              John

Open in new window


And when I click on the "i" , a bubble conversation pops and says "This is the month you will need to register"
I have this so far but my button is not clickable and nothing pops up, i'm not sure what to do
This is to show the i
    <th style= "white-space: nowrap">Month  <button id="opener"><i class="fa fa-info" ></i></button></th>

Open in new window


And my jquery code is:

 
  $(document).ready(function() {
    $( "#dialog" ).popbox({
      autoOpen: false,
      'open'          : '.open',
      'box'           : '.box',
      'arrow'         : '.arrow',
      'arrow-border'  : '.arrow-border',
      'close'         : '.close'
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
})

Open in new window


And this when the table is closed in the div

<div id = "dialog">
<div class='collapse'>
            <div class='box'>
              <div class='arrow'></div>
              <div class='arrow-border'></div>
             <p>HI</p>            
            </div>
          </div>
        </div>

Open in new window


The i is a button clickable but nothing popsup and the HI is shown under the table
And how can I make the bubble
0
Jasmine Ikhreishi
Asked:
Jasmine Ikhreishi
  • 3
1 Solution
 
zephyr_hex (Megan)DeveloperCommented:
First, check F12 console for errors.  Also, please verify you have jQuery UI linked (assuming this is a jQuery UI modal).

I'll set your code up in a Fiddle and see if I can find any other problems.
0
 
zephyr_hex (Megan)DeveloperCommented:
oh wait, this isn't jQuery UI modal.  It's some third party plugin for a modal.  well, make sure you have that linked
0
 
zephyr_hex (Megan)DeveloperCommented:
So there's an error:

error
Which is referencing this part of your jQuery:
 hide: {
   effect: "explode",
   duration: 1000
 }

Open in new window


I'm not familiar with this plugin so I don't know what the correct syntax is... but if I remove that portion, the error goes away.

The next error happens on the click event:
error 2
This is where I originally was confused.  You init something called a popbox, but then you attempt to open it referencing "dialog", which is a jQuery UI thing... not a popbox thing.  So you need to call popbox open, not dialog open.  I assume this would look something like:
$("#dialog").popbox('open');

Open in new window


My recommendation is to strip out all of the options you're attempting to init your popbox with, and just go with a super basic implementation -- and once that's working, add back in the options you want.
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now