Solved

Make a conversation popup from a table

Posted on 2016-10-03
3
47 Views
Last Modified: 2016-10-04
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
Comment
Question by:Jasmine Ikhreishi
  • 3
3 Comments
 
LVL 42

Expert Comment

by:zephyr_hex (Megan)
ID: 41826522
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
 
LVL 42

Expert Comment

by:zephyr_hex (Megan)
ID: 41826540
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
 
LVL 42

Accepted Solution

by:
zephyr_hex (Megan) earned 500 total points
ID: 41826592
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

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

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

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
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)

785 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