PB Dialog Question

[Alan Vende]

I know there is a way to open a dialog on a button click, and have done that multiple times, but what's eluding me now is how to open a dialog without tabs. It's irking me because I know it's rather easy, but I cannot figure out how to do it.

I have the following JS, which builds the dialog for the other windows, but they build dialogs for tabbed windows, which is why it's structured like this:

SPOILER: Click to show

// Begin JS for Affiliate Bar Popup Dialog Box
$(function(){var ppdialog = $('#pp-popup-table').parent().attr('id', 'ppdialog');

//build the dialog
ppdialog.dialog({
   title: 'Psychic Psyghtings\' Affiliate Bar Dialog',
   minWidth: 650,
   autoOpen: false //do we want to open it now or do we want to open it with a button later?
})

// hide the content divs
ppdialog.find('>div:not([id]):not(.pp-alert-welcome)').hide()

// add a click event for the "tabs"
ppdialog.find('.ui-tabMenu a').click(function(ev){
   ppdialog.find('>div:not([id])').hide();
   $(this).closest('.ui-tabMenu').find('.ui-active').removeClass('ui-active')
   $('.pp-alert-welcome').hide();
   $(this).parent().addClass('ui-active')
   $('#pp-popup-table').siblings().filter('.'+this.className).show()
})
})

Above is just one example. I attempted to change it to only show one window, but I'm unable to. The above references a table within the footer of the plugin, so I guess it has to be re-written, correct? If so, how would I go about doing that?

Thanks, all!

---

EDIT: I have been doing some finagling, and I was able to duplicate the click event and so forth. I did that, but I was actually wanting to remove the tabs and have just the values in the <thead> be the headers for the pieces, and not allow for a click event. But, when I remove the click event, it breaks the plugin... again.

Granted, what I actually want of the <thead> is the styling of it, and I know that I can copy and paste CSS, but I'm still running into the problem with the click event. How do I remove that and make both of the sections show when the dialog is loaded?

[Brian]

When you tell jQuery to use .dialog() on a selector you're telling it to open the element matching that selector inside a dialog window. So the problem isn't that you need a way to open a dialog without tabs. The problem is that the element you're telling it to open a dialog for contains tabs.

To illustrate this, I ran this Javascript in this thread:

$('.mini-profile').first().dialog({ title: 'Example Dialog' });

Which results in your mini-profile (the first one on the page) appearing in a dialog.

dev.prbrds.com/b/o/ZeDuhuXdTJUWsCUpYOYl.png

As you can see in the screenshot there are no tabs in the dialog because there are no tabs in the mini-profile. All it did was place the element I specified inside a dialog. That's all there is to the .dialog() function.

The solution to your issue is to use .dialog() on an element that doesn't already have tabs in it.

[Alan Vende]

Apr 5, 2018 10:18:28 GMT -8 Brian said:

When you tell jQuery to use .dialog() on a selector you're telling it to open the element matching that selector inside a dialog window. So the problem isn't that you need a way to open a dialog without tabs. The problem is that the element you're telling it to open a dialog for contains tabs.

To illustrate this, I ran this Javascript in this thread:

$('.mini-profile').first().dialog({ title: 'Example Dialog' });

Which results in your mini-profile (the first one on the page) appearing in a dialog.

dev.prbrds.com/b/o/ZeDuhuXdTJUWsCUpYOYl.png

As you can see in the screenshot there are no tabs in the dialog because there are no tabs in the mini-profile. All it did was place the element I specified inside a dialog. That's all there is to the .dialog() function.

The solution to your issue is to use .dialog() on an element that doesn't already have tabs in it.

If I use .dialog() on an element that doesn't already contain tabs, am I still able to "build it" like I had with the JS in my OP? I wanted to customize it the nth degree because, ideally, I want to have the dialog have one window. In that window, I want a table, but I want it to scroll once it gets to a certain height. (Does that make sense the way that I said that? I apologize if it does not.) That's why I put the JS in there that I'm using to build it.

...Wait a minute. I think I just realized something: In your Custom Mini-Profile Creator Plugin, that's what you did: you created the Help Window with a table, but that table was in the Footer of the plugin. And you used an {if} statement to open that table in a dialog window, correct?

But, to make this work for me, would I require multiple, nested, tables? One to act as the selector for the dialog, and then another to house the information within the dialog?

(Sorry, my brain is trying to wrap around this. I'm not sure if it's grasping it completely.)

[Brian]

Apr 5, 2018 12:26:10 GMT -8 Alan Vende said:

If I use .dialog() on an element that doesn't already contain tabs, am I still able to "build it" like I had with the JS in my OP? I wanted to customize it the nth degree because, ideally, I want to have the dialog have one window. In that window, I want a table, but I want it to scroll once it gets to a certain height. (Does that make sense the way that I said that? I apologize if it does not.) That's why I put the JS in there that I'm using to build it.

Yes. Again, all that .dialog() does is move the element matching the selector you specified into a dialog. It doesn't change the fact that any other jQuery you're targeting that element with is still going to match that element and make changes to it. All of those changes still get made to the element even while it's in the dialog.

Apr 5, 2018 12:26:10 GMT -8 Alan Vende said:

...Wait a minute. I think I just realized something: In your Custom Mini-Profile Creator Plugin, that's what you did: you created the Help Window with a table, but that table was in the Footer of the plugin. And you used an {if} statement to open that table in a dialog window, correct?

I added the table to a <div> in the footer of the plugin, then targeted that element with the .dialog() function to open it in a window.

The if statement is just to determine if the <div> gets added to the page or not. If a user disables the help options within the plugin then there's no reason for that HTML to be in the source of every page since it's never going to be used.

Apr 5, 2018 12:26:10 GMT -8 Alan Vende said:

But, to make this work for me, would I require multiple, nested, tables? One to act as the selector for the dialog, and then another to house the information within the dialog?

I treat the element I'm using the .dialog() function on like a container. All of the stuff I want in the dialog goes inside a single <div> element that gets targeted with .dialog(). Then all of the stuff I want inside the container goes inside of that <div> element.

<div id="your-dialog-element">
    Your content here
</div>

Then the element gets targeted with .dialog() as shown here:

$('#your-dialog-element').dialog({
    title: 'This is a dialog',
    minWidth: 940
});

Resulting in:

[Alan Vende]

Apr 5, 2018 13:14:11 GMT -8 Brian said:

Apr 5, 2018 12:26:10 GMT -8 Alan Vende said:

If I use .dialog() on an element that doesn't already contain tabs, am I still able to "build it" like I had with the JS in my OP? I wanted to customize it the nth degree because, ideally, I want to have the dialog have one window. In that window, I want a table, but I want it to scroll once it gets to a certain height. (Does that make sense the way that I said that? I apologize if it does not.) That's why I put the JS in there that I'm using to build it.

Yes. Again, all that .dialog() does is move the element matching the selector you specified into a dialog. It doesn't change the fact that any other jQuery you're targeting that element with is still going to match that element and make changes to it. All of those changes still get made to the element even while it's in the dialog.

So, even though the element is in a dialog(), the code is actually targeting the element itself?

Apr 5, 2018 13:14:11 GMT -8 Brian said:

Apr 5, 2018 12:26:10 GMT -8 Alan Vende said:

...Wait a minute. I think I just realized something: In your Custom Mini-Profile Creator Plugin, that's what you did: you created the Help Window with a table, but that table was in the Footer of the plugin. And you used an {if} statement to open that table in a dialog window, correct?

I added the table to a <div> in the footer of the plugin, then targeted that element with the .dialog() function to open it in a window.

The if statement is just to determine if the <div> gets added to the page or not. If a user disables the help options within the plugin then there's no reason for that HTML to be in the source of every page since it's never going to be used.

Thank you for that information! So, would it be considered a "two step process": create the information you want, and then target it with the .dialog() function?

Apr 5, 2018 13:14:11 GMT -8 Brian said:

Apr 5, 2018 12:26:10 GMT -8 Alan Vende said:

But, to make this work for me, would I require multiple, nested, tables? One to act as the selector for the dialog, and then another to house the information within the dialog?

I treat the element I'm using the .dialog() function on like a container. All of the stuff I want in the dialog goes inside a single <div> element that gets targeted with .dialog(). Then all of the stuff I want inside the container goes inside of that <div> element.

<div id="your-dialog-element">
    Your content here
</div>

Then the element gets targeted with .dialog() as shown here:

$('#your-dialog-element').dialog({
    title: 'This is a dialog',
    minWidth: 940
});

Resulting in:

Thanks, Brian ! I now understand the box, but I'm unsure how to make it come up on button click. For my other dialog boxes, I have something like <button onclick="$('#pp-all-aff-dialog').dialog('open')">All Affiliates</button>. It works for the other buttons, but not this one, for some reason. I copied and pasted the variation of this from the other buttons that worked, and just put in the ID for that particular element.

If the dialog is created this way, is there another way to open it that I'm not seeing?

[Brian]

Assuming you added autoOpen: false to the dialog's options that's pretty much how you open it assuming your script already ran the .dialog() function.

If it's not opening then you've either done something wrong creating it or there's an error elsewhere in your script that probably going to show up in the browser's console.

[Alan Vende]

Yup, I put autoOpen: false into the dialog. I do see that I did something wrong, but when I look at the code, I don't see anything wrong. I do, however, see the text that's supposed to be in the dialog window at the bottom, below my affiliate plugin.



Like I said, I cannot figure out why, because from what I can tell, everything is correct.

JS

// Begin JS for All Affiliates Popup
$('#pp-all-aff-dialog').dialog({
   title: 'This is a dialog',
   minWidth: 940,
   autoOpen: false
});
// End JS for All Affiliates Popup
HTML

<button onclick="$('#pp-all-aff-dialog').dialog('open')">All Affiliates</button>

<!-- Begin All Affiliates Container -->
<div id="pp-all-aff-dialog">
   <p>Test</p>
</div>
<!-- End All Affiliates Container -->

...unless you cannot use <p></p> tags in a dialog window? That's the only thing I can see that could potentially be wrong.

[Brian]

Are you running .dialog() by itself or are you doing it after the page loads?

The script (everything in the Javascript component) is executed when it's reached in the document, and the contents of any HTML components in a plugin come after the script components in the source of the page. So if you're telling to turn that element into a dialog before the document is finished loading it's not going to do anything because that element doesn't exist in the document until after the script has already finished executing.

[Alan Vende]

I put the script at the very end of the Javascript component. Could that be part of my issue? If it's at the bottom, does(n't) that mean that it runs after the page loads? The corresponding HTML element is the last one in my Footer, starting on line 665 with the comment <!-- Begin All Affiliates Container -->.

SPOILER: Click to show

// Begin JS for Affiliate Bar Popup Dialog Box
$(function(){var ppdialog = $('#pp-popup-table').parent().attr('id', 'ppdialog');

//build the dialog
ppdialog.dialog({
title: 'Psychic Psyghtings\' Affiliate Bar Dialog',
minWidth: 650,
autoOpen: false //do we want to open it now or do we want to open it with a button later?
})

// hide the content divs
ppdialog.find('>div:not([id]):not(.pp-alert-welcome)').hide()

// add a click event for the "tabs"
ppdialog.find('.ui-tabMenu a').click(function(ev){
ppdialog.find('>div:not([id])').hide();
$(this).closest('.ui-tabMenu').find('.ui-active').removeClass('ui-active')
$('.pp-alert-welcome').hide();
$(this).parent().addClass('ui-active')
$('#pp-popup-table').siblings().filter('.'+this.className).show()
})
})

// Begin Toggle Rules (button is generated by this code.)
$(document).ready(function() {
$('.ppaffrulesdiv').hide().before('<a href="#" id="toggle-ppaffrulesdiv" class="button">Psychic Psyghtings\' Affiliate Rules</a>');
$('a#toggle-ppaffrulesdiv').click(function() {
$('.ppaffrulesdiv').slideToggle(1000);
return false;
});
});
// End Toggle Rules (button is generated by this code.)
// End JS for Affiliate Bar Popup Dialog Box

// Begin JS for Total Affiliates
// get and display number of affiliates
$(document).ready(function(){
var number_of_affiliates = get_the_number_of_affiliates();
add_the_number_of_affiliates_to_dialog_box_span(number_of_affiliates);
});

function get_the_number_of_affiliates() {
return $('.affiliateaffcodes li').length;
}

function add_the_number_of_affiliates_to_dialog_box_span(number_of_affiliates) {
$('span#total-affiliates').html(number_of_affiliates);
}
// End JS for Total Affiiates

// Begin JS for tabbed area of header container
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent.style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks.className = tablinks.className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
// End JS for tabbed area of header container

// Begin JS for Staff Popup Dialog Box
$(function(){var ppstaffdialog = $('#pp-staff-table').parent().attr('id', 'ppstaffdialog');

//build the dialog
ppstaffdialog.dialog({
title: 'Psychic Psyghtings\' Site Helper Dialog',
minWidth: 1200,
autoOpen: false //do we want to open it now or do we want to open it with a button later?
})

// hide the content divs
ppstaffdialog.find('>div:not([id]):not(.pp-staff-welcome)').hide()

// add a click event for the "tabs"
ppstaffdialog.find('.ui-tabMenu a').click(function(ev){
ppstaffdialog.find('>div:not([id])').hide();
$(this).closest('.ui-tabMenu').find('.ui-active').removeClass('ui-active')
$('.pp-staff-welcome').hide();
$(this).parent().addClass('ui-active')
$('#pp-staff-table').siblings().filter('.'+this.className).show()
})
})
// End JS for Staff Popup Dialog Box

// Begin JS for
$(function(){var ppallaffdialog = $('#pp-allaff-table').parent().attr('id', 'ppallaffdialog');

//build the dialog
ppallaffdialog.dialog({
title: 'Psychic Psyghtings\' All Affiliate Dialog',
minWidth: 1200,
autoOpen: false //do we want to open it now or do we want to open it with a button later?
})

// hide the content divs
ppallaffdialog.find('>div:not([id]):not(.pp-allaff-welcome)').hide()

// add a click event for the "tabs"
ppallaffdialog.find('.ui-tabMenu a').click(function(ev){
ppallaffdialog.find('>div:not([id])').hide();
$(this).closest('.ui-tabMenu').find('.ui-active').removeClass('ui-active')
$('.pp-allaff-welcome').hide();
$(this).parent().addClass('ui-active')
$('#pp-allaff-table').siblings().filter('.'+this.className).show()
})
})
// End JS for Staff Popup Dialog Box

// Begin JS for All Affiliates Popup
$('#pp-all-aff-dialog').dialog({
title: 'This is a dialog',
minWidth: 940,
autoOpen: false
});
// End JS for All Affiliates Popup

EDIT: I just realized with the way I opened the dialog on button click. I put <button onclick="$('#your-dialog-element').dialog('open')">All Affiliates</button>. Could that be the problem that's causing it not to open and show on the bottom there? That's somewhat how I open the others, just changing the ID.

Thanks for your help, Brian . It is greatly appreciated!

EDIT 2: I've no clue why the Spoiler isn't opening...

[Brian]

No. Its placement in the Javascript component has absolutely no bearing on when it executes. All of the Javascript you specify will be immediately executed when it's reached in the page's header well before the page is finished loading.

You need to wrap it inside a document ready function like you did for all of your other dialogs.

$(function(){
    // Anything in here will run after the page's HTML finishes loading
});

// While anything outside is run immediately when this script is reached during the page load

[Alan Vende]

Thanks so much, Brian. I had forgotten to wrap it in a function.

Do you know of any easy way to make it so a cell scrolls when the other is larger than it?

In one of my tables, I use colspan and rowspan to only have one row and section to work with, but what I cannot figure out (nor find on Google,) is how to make it so one area scrolls when the other is larger than it.

Does that make sense?

[Brian]

overflow: auto; adds a scrollbar to block elements on the condition that their inner contents exceed the element's height or width.

You can't add a scrollbar to a table cell, but you can add a div inside of a table cell and add a scrollbar to that if you specify a max-height property for the div.

[Alan Vende]

Apr 6, 2018 10:48:20 GMT -8 Brian said:

overflow: auto; adds a scrollbar to block elements on the condition that their inner contents exceed the element's height or width.

You can't add a scrollbar to a table cell, but you can add a div inside of a table cell and add a scrollbar to that if you specify a max-height property for the div.

Thanks, Brian , for that information. I want to have the scroll go onto the affiliate manager area, so I'll try putting a div there.

Now, I have a new problem: I'm not even sure what I did to cause it, so I'm unsure how to undo it. I checked the console, and there weren't any errors in terms of it (on Google Chrome.) There's supposed to be a table that houses the affiliates, and my avatar and Send Message and Affiliate Change buttons should be in the right table cell. Like I said, I don't see anything in the Console on Google Chrome, and I've looked through the code in the plugin, but I kind of doubt that this problem has anything to do with the fact that I have this information output in a dialog, does it? I've no clue if it does or doesn't because, like I said, there aren't any errors.

The inner table is supposed to be three across, but somehow, something I did made it go all in one line. Like I've said, I don't see anything wrong, although there is obviously something visually wrong here. Is there something other than the Console that will tell me the error?

[Brian]

In your CSS you're telling .pp-all-aff-td to display as a block element which is causing each cell to take up its own line.

Found in a matter of seconds by right-clicking the problematic element and selecting Inspect Element.

[Alan Vende]

Thanks, Brian. I attempted to do Inspect Element (before I made the change,) but couldn't find that for some reason.