Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 124
  • 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
Jazzy 1012
Asked:
Jazzy 1012
  • 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

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