Question about plugin functionality for a menu?

[Alan Vende]

Forum URL: (private)

Hey guys!

I have a few things I wanted to do with a plugin that I'm developing for my forum, but I'm running into a few roadblocks:

1. I'm not finding it possible to have multiple pb.dialog windows in the same plugin. Is it possible do so?
2. I wanted to have one popup to a form that, once submitted, posted a new thread in a board. Is this possible, or would it be considered an AJAX call?
3. Would the same thing apply if I wanted to do a popup that shows the staff?

Thanks!

[Brian]

1. It should be possible. Here's two dialogs with two different IDs that I created on this page using the console:

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

www.proboards.com/developer/js/class/window#dialog

pb.window.dialog("test1",{ title: "Test 1" }).html('asdf');
pb.window.dialog("test2",{ title: "Test 2" }).html('asdf');

2. If you make it appear on a posting page you can have it automatically fill the posting page and trigger a click event on the submit button to submit it, but outside of a posting page I don't think it's possible unless you manually recreate an HTML form using the same action path.

3. There's no way to automatically fetch a list of members using a plugin. That functionality is only available on the member list page through the use of what's built in there.

[Alan Vende]

Mar 13, 2018 13:48:31 GMT -8 Brian said:

1. It should be possible. Here's two dialogs with two different IDs that I created on this page using the console:

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

www.proboards.com/developer/js/class/window#dialog

pb.window.dialog("test1",{ title: "Test 1" }).html('asdf');
pb.window.dialog("test2",{ title: "Test 2" }).html('asdf');

2. If you make it appear on a posting page you can have it automatically fill the posting page and trigger a click event on the submit button to submit it, but outside of a posting page I don't think it's possible unless you manually recreate an HTML form using the same action path.

3. There's no way to automatically fetch a list of members using a plugin. That functionality is only available on the member list page through the use of what's built in there.

Thanks, Brian. I apologize for first posting it in the Support Board. I forgot to preface the reasoning for that, which was the question about the AJAX call. I wanted to make sure that that wouldn't be considered one, as I know that's against the Development Rules.

1. With what you've written in the console, is the "test1" and "test2" what you would use to, for example, make them open on button click? You said they were two different IDs, but I attempted to make them open with he buttons and, even though I do that, they still open on page load.

I asked about the multiple dialogs because for the past few weeks, I've been attempting to create a copy of the dialog box that I have when you press the middle button of the plugin and, every time I do that, it breaks the plugin. Granted, all I did was copy and paste the other code and change the classes and so forth, so maybe that's why it broke? I'm unsure, all I know is that I've been trying this for a while and it kept giving me that result.

2. I was trying to manually recreate an HTML form using the same path, but I couldn't even get the form to work. So, it would probably be easier to make it where the button redirects to the posting page and then has a popup form. That's possible since it's now on the posting page, correct? (Or am I misunderstanding/misconstruing that?)

3. I thought your answer to number three would be that way, which is why I asked question one. Thank you for that confirmation. That leads me into my frustration that I talked about above: the recreating the dialog box multiple times on the page with different IDs. For some odd reason, it breaks the plugin. It's exceeded my patience because it doesn't work (maybe I'm exhibiting the definition of insanity: "doing the same thing multiple times, but expecting a different result." )

[Brian]

1. test1 and test2 were the IDs I specified since the ID is the first argument for pb.window.dialog() (as shown in the ProBoards API page I linked). If your dialogs are opening by themselves that means you've explicitly specified that they should open by themselves somewhere in your code.

2. That would work. And I'm sure it is possible to create a form that can do this but I've never tried it. It might only be possible on certain pages because pb.data('form_id') only exists where a form is already present.

3. I wouldn't know why it's doing this without seeing its source code.

[Alan Vende]

1. I just saw the page you linked; sorry for just realizing that. I just copied the dialogs into the plugin into the JS area to see how they would work and then fiddled around with them. I got the first one to open on button click but, like I said, it's still opening on page load.

I just copied and pasted it like you had it above to see how it would work live:

pb.window.dialog("test1",{ title: "Test 1" }).html('asdf');
pb.window.dialog("test2",{ title: "Test 2" }).html('asdf');

2. I've never ventured into this, so I don't know. I was kind of going off of the fact that you have the URL Request Dialog plugin that popups on the creation of a thread in the Support Board, but now that I think more about it, this would be a lot different than that in terms of functionality and whatnot, wouldn't it? I've never ventured into that territory, so I don't know if I want to. I just it would be easier to be able to have a box popup when that button is clicked so people don't have to go through the extra button clicks to go to the Help Centre on my main forum. (The one I linked below is my test forum for this plugin/the development forum I use for it--not my main one.)

3. I apologize. I forgot that you had moved this to the Plugin Development board and my forum URL isn't visible anymore. It's in the PP Custom Affiliate Bar (Test with Popup Box) in the Build tab. I'm coding this straight into the Components, not using a UI or anything (as this is only for the forum, and only going to be changed by myself and a select few others.) The forum is here.

[Brian]

1. pb.window.dialog() opens a dialog immediately once your code issues the command. Since you placed both of the lines I provided by themselves at the end of the Javascript they're being executed the moment they're reached in the script.

2. The plugin we use in the Support Board takes whatever value you enter into the dialog and adds it as text to the beginning of the post, then allows you to proceed in typing your actual post. It doesn't automatically submit anything.

3. While the dialogs I gave are opening by themselves for the reason I explained your dialog that you added prior to this thread doesn't appear to be opening by itself.

[Alan Vende]

1. They are JavaScript, correct? Or are they jQuery? I ask because my follow up to that is: Would a function be utilized to make it so they are opened upon an action (e.g. a button click), like my ppdialog.dialog is that is opened by clicking the button titled "Change Regarding Psychic Psyghtings' Affiliation Procedure"?

2. Oh! I guess I misconstrued the plugin. I apologize for that!

3. The dialog that I added prior to this thread opens on button click. It opens upon button click of the button title "Change Regarding Psychic Psyghtings' Affiliation Procedure." I've attempted to recreate it to no avail (it breaks the plugin when I attempt to copy and change it to have another dialog behave the same way. I don't know how to explain that other than that, as that's the behavior it exhibits. How can I explain it better? (I seriously don't know) I apologize if I'm not effectively getting the point across. But I wanted to mimic the behavior of that dialog box, having them open upon button click, not page load. I was able to get the first test to open on page load and button click, so I guess I'm getting a bit closer to something, right?

[Brian]

jQuery is Javascript. More specifically it's a library of functions to make more complicated actions in Javascript easier to perform. Dialogs are one such function introduced in jQuery. The pb.window.dialog() function in the ProBoards API creates a prebuilt jQuery dialog.

What are you adding that's causing it to break, and how is it breaking exactly?

[Alan Vende]

Duh. I keep forgetting that. Thank you!

I was attempting to add another iteration of the table that's populated by clicking "Affiliate Procedure." When I attempt to do it, all of the information goes below the plugin--that's how it breaks. I had a screenshot of that, but I cannot find it for some reason. This behavior happens even after I change the classes to unique ones.

[Brian]

Can you provide the underlying code that caused that behavior?

[Alan Vende]

Yup.

JS:

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()
})
})

CSS

SPOILER: Click to show

/* Begin Dialog Box CSS */
/* Begin CSS to Remove Top Padding Declaration of Dialog Box */
#ppdialog {
   padding-top: 0;
}
/* End CSS to Remove Top Padding Declaration of Dialog Box */

/* Begin CSS for button to click to open dialog box */
.affchangealert {
   text-align: center;
   margin-top: 10px;
   margin-bottom: 10px;
}
.affmanagername {
   margin-top: 5px;
   margin-bottom: 5px;
   color: #d12001;
   font-weight: bold;
}
/* End CSS for button to click to open dialog box */

/* Begin Christmas CSS */
/* Begin CSS to style background of div of button to click to open dialog box for Christmas */
/* .affchangealertoutterbg {
   background-color: #ff0000; // Red
   height: 300px;
} */
/* End CSS to style background of div of button to click to open dialog box for Christmas */

/* Begin CSS to change height of content container */
/* .container.boards .ppaffcontent {
   height: 250px;
} */
/* End CSS to change height of content container */

/* Begin CSS to style inner container and image borders */
/* .affchangealertinnerbg {
   display: block;
   background-color: #228b22; // Forest Green
   padding: 15px;
   border: 5px solid #000000;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   padding-top: 8px;
   padding-bottom: 8px;
   width: 500px;
   margin-left: auto;
   margin-right: auto;
   position: relative;
   top: -140px;
}

.ppafftotalcontainerbg {
   background-color: #28a428; // Shade of Green
}

div.affchangealertinnerbg {
   -webkit-border-image: url(http://storage.proboards.com/6027654/images/rrhmBJAtNzyoeqOAGmeM.jpg) 30 round;
   -o-border-image: url(http://storage.proboards.com/6027654/images/rrhmBJAtNzyoeqOAGmeM.jpg) 30 round;
   border-image: url(http://storage.proboards.com/6027654/images/rrhmBJAtNzyoeqOAGmeM.jpg) 30 round;
}

.hoverimgcontainer1 .hoverimg1 {
   -webkit-border-image: url(http://storage.proboards.com/6027654/images/rrhmBJAtNzyoeqOAGmeM.jpg) 30 round;
   -o-border-image: url(http://storage.proboards.com/6027654/images/rrhmBJAtNzyoeqOAGmeM.jpg) 30 round;
   border-image: url(http://storage.proboards.com/6027654/images/rrhmBJAtNzyoeqOAGmeM.jpg) 30 round;
} */
/* End CSS to style inner container and image borders */

/* Begin CSS for Ornament Hover (Comment out when Christmas is over.) Adapted from: www.w3schools.com/howto/tryit.asp?filename=tryhow_css_image_overlay_fade */
/* Begin CSS for left image */
/* .hoverimgcontainer1 {
   position: relative;
   width: 200px;
   padding-left: 10px;
   top: 10px;
   display: block;
}

.hoverimg1 {
   opacity: 1;
   display: block;
   width: 200px;
   height: auto;
   transition: .5s ease;
   backface-visibility: hidden;
}

.img1mid1 {
   transition: .5s ease;
   opacity: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%)
}

.hoverimgcontainer1:hover .hoverimg1 {
   opacity: 0.3;
}

.hoverimgcontainer1:hover .img1mid1 {
   opacity: 1;
}

.hover-text-1 {
   background-color: #4CAF50;
   border: 1px solid #000000;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   color: #ffffff;
   font-size: 16px;
   text-align: center;
   padding: 16px 32px;
} */
/* End CSS for left image */

/* Begin CSS for right image */
/* .hoverimgcontainer2 {
   position: relative;
   bottom: 133px;
   right: 10px;
   float: right;
   width: 200px;
}

.hoverimg2 {
   opacity: 1;
   display: block;
   width: 200px;
   height: auto;
   transition: .5s ease;
   backface-visibility: hidden;
}

.img2mid2 {
   transition: .5s ease;
   opacity: 0;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%)
}

.hoverimgcontainer2:hover .hoverimg2 {
   opacity: 0.3;
}

.hoverimgcontainer2:hover .img2mid2 {
   opacity: 1;
}

.hover-text-2 {
   background-color: #4CAF50;
   border: 1px solid #000000;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   color: #ffffff;
   font-size: 16px;
   text-align: center;
   padding: 16px 32px;
} */
/* End CSS for right image */
/* End CSS for Ornament Hover (Comment out when Christmas is over.) */
/* End CSS to style background of div of button to click to open dialog box for Christmas */
/* End Christmas CSS */

/* Begin Popup Dialog Box Table Styles */
#pp-popup-table > .list {
   width: 100%;
   table-layout: fixed;
}
#pp-popup-table > .list td.item {
   padding: 0;
}
#pp-popup-table > .list th.last {
   width: 35%;
}
#pp-popup-table .ui-tabMenu ul li {
   height: 26px;
}
#pp-popup-table > div ul {
   list-style: outside none disc;
}
#pp-popup-table > div ul li {
   margin-left: 15px;
}
.welc-line {
   text-align: center;
   font-weight: bold;
   font-size: 20px;
   margin-bottom: 10px;
}
.ppaffcodeheader, .ppaffrulestextheader, .proced-note-header, .aff-link-change-header {
   text-align: center;
   text-decoration: underline;
}
.tabbodypadding {
   padding-top: 10px;
   padding-bottom: 10px;
}
.ppguestfriendly {
   border: 2px solid #000000;
   border-radius: 10px;
   background-color: #ffff00;
   width: 350px;
   height: 80px;
   padding: 5px;
   margin-bottom: 10px;
   margin-left: auto;
   margin-right: auto;
}
.lightbulbplaceholder {
   position: relative;
   top: 22px;
}
.ppguestfriendlymsg {
   width: 250px;
   float: right;
}
.ppaffrulestextpadding {
   padding-bottom: 10px;
}
.ppaffstaffnote {
   text-align: center;
}
.pphelpcentrebutton, .affrulesbutton {
   text-align: center;
}
.affimagecontainer {
   border: 1px solid #000000;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   padding: 5px;
   margin-bottom: 10px;
}
.ppaffimage {
   float: right;
   position: relative;
   top: 15px;
}
.pphelpcentrebuttoncontainer {
   width: 500px;
   text-align: center;
   margin-top: 10px;
}
.aff-link-change-note {
   margin-top: 10px;
}
/* End Popup Dialog Box Table Styles */

/* Begin Open/Close (from http://jsfiddle.net/robinparduez/NL6PV/) */
.button {
   border-radius: 3px;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: 0 1px  1px rgba(0, 0, 0, 0.2);
   background-color: #eee;
   border: 0;
   color: #333;
   cursor: pointer;
   font-family: "Lucida Grande", Helvetica, Arial, Sans-Serif;
   margin: 0;
   padding: 6px 4px;
   text-decoration: none;
}
.ppaffrulesdiv {
   border: 1px solid #000;
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   background-color: #eee;
   padding: 10px;
   margin: 10px 0;
}
.ppaffrulestexttitle {
   margin-bottom: 10px;
   font-size: 15px;
   font-weight: bold;
   text-decoration: underline;
   text-align: center;
}
/* End Open/Close */

/* Begin Total Affiliates Container CSS */
.ppafftotalcontainer {
   border: 1px solid #000000;
   border-radius: 5px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   padding: 5px;
   width: 200px;
   margin-top: 5px;
   margin-left: auto;
   margin-right: auto;
}
/* End Total Affiliates Container CSS */
/* End Dialog Box CSS */

HTML

SPOILER: Click to show

<!-- Begin Affiliate Bar Popup Container -->
<div class="container boards">
   <div class="content">
       <div id="pp-popup-table">
           <table class="list">
<!-- <thead>
<th>Installation</th>
<th class="last">Customization</th>
</thead> -->
<tbody>
<tr class="last">
<td class="item last">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
<li><a class="aff-info">Affiliate Info</a></li>
<li><a class="proced-note">Note about Procedure Change</a></li>
<li><a class="aff-link-change">Did your link change?</a></li>
</ul>
</div>
</td>
<!-- <td class="item last">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
<li><a class="test1">Reserved</a></li>
<li><a class="test2">Reserved</a></li>
</ul>
</div>
</td> -->
</tr>
</tbody>
</table>
   </div>
       
       <div class="pp-alert-welcome pad-all">
       <div class="welc-line">Welcome to the Psychic Psyghtings Dialog Box!</div>
       Here you will find information that we would like you to know regarding our affiliation procedures.
       <br /><br />
       <strong>Affiliate Info</strong> houses our affiliate code and number of affiliates in our affiliate bar.
       <br /><br />
       <strong>Note about Procedure Change</strong> houses a little bit about the change in Photobucket's Terms of Service as well as how we will be changing our policies to make sure that we are fully in-line with theirs.
       <br /><br />
       <strong>Did your link change?</strong> houses information on how you can submit your new code for us to put into our affiliate bar.
       <br /><br />
Click on any of the tabs above to learn about how we are going about coping with it, <em>and how <strong>you</strong> can help!</em>
<br />
</div>

<div class="aff-info pad-all">
<div class="ppaffiliates">
           <div>
               <div>
                   <h3 class="ppaffcodeheader">Our Affiliate Code</h3>
                   <p class="tabbodypadding"><textarea readonly="true" onclick="this.select()" style="width: 610px; height: 26px; font-size: 8pt;"><a href="http://psychic-psyghtings.proboards.com/" target="_blank" title="Psychic Psyghtings"><img src="http://storage.proboards.com/2837905/i/9OmzvIlu49a6OB8UjnKV.jpg" alt="Psychic Psyghtings" /></a></textarea></p>
                   <div class="affimagecontainer">
                       <div class="affimagedesc"><span class="ppaffimage"><img src="$[plugin.images.PsychicPsyghtingsAffImage]" /></span></div><p>To the right is our affiliate image. It is what you will see when you input our affiliate code above. If you do not see it, please post in the Help Centre by clicking the button below. Thank you!</p><div class="pphelpcentrebuttoncontainer"><a target="_blank" href="http://psychic-psyghtings.proboards.com/thread/new/56"><button>Help Centre</button></a></div>
                   </div>
           </div>
               <div class="ppaffrulestextdiv">
               <h3 class="ppaffrulestextheader">Our Affiliate Rules</h3>
               <p class="tabbodypadding">Like many other forumes, ours has rules governing our affiliation with other forums. Please click the button below and take a moment to review them.</p>
                   <!-- Rules Button is in JS -->
                   <div class="ppaffrulesdiv">
                       <p class="ppaffrulestexttitle">Psychic Psyghtings' Affiliate Rules</p>
                       <p class="ppaffrulestextpadding"><strong>Rule #1:</strong> Your forum must be guest-friendly in terms of viewing, but does not have to be in terms of posting. The only thing that we require in terms of being guest-friendly is that the forum as a whole is viewable, like ours is to you.</p>
                       <p class="ppaffrulestextpadding"><strong>Rule #2:</strong> </p>
                       <p class="ppaffrulestextpadding"><strong>Rule #3:</strong> </p>
                       <p class="ppaffrulestextpadding"><strong>Rule #4:</strong> </p>
                       <p class="ppaffrulestextpadding"><strong>Rule #5:</strong> </p>
                       <p class="ppaffstaffnote"><em>The staff of Psychic Psyghtings reserves the right to change the above rules at any time, as they see fit with, or without, prior notice to the members.</em></p>
                   </div>
               </div>
           </div>
       </div>
       </div>

<div class="proced-note pad-all">
       <h3 class="proced-note-header">Affiliation Procedure Change Notice</h3>
       <p class="tabbodypadding">Because of the most recent change to Photobucket's ToS, there will be a change in how Psychic Psyghtings handles its affiliations with other forums.<br /><br />From now on, we will be downloading the affiliate's image and placing it <strong>within</strong> the new affiliate plugin. To help us with this, please supply us with a download link for the image.<br /><br />Thank you for helping us make this transition a smooth one. It is greatly appreciated!</p>
       <div class="pphelpcentrebutton"><a target="_blank" href="http://psychic-psyghtings.proboards.com/thread/new/56"><button>Help Centre</button></a></div>
</div>

<div class="aff-link-change pad-all">
       <h3 class="aff-link-change-header">Did your affiliate link change?</h3>
       <p class="aff-link-change-note"><strong>Please Note:</strong> You <em>cannot</em> change your affiliate link once it is posted to the Affiliation Board, so you will have to follow the steps in the information below in order to update it. Thank you!</p>
       <p class="tabbodypadding">Did your affliiate link change because of the change in Photobuket's Terms of Service? If so, please click the button below to be redirected to the Help Centre where you can create a thread detailing your new affiliate link.</p>
       <div class="ppguestfriendly"><img class="lightbulbplaceholder" src="$[plugin.images.PsychicPsyghtingsAffImage]" />
           <p class="ppguestfriendlymsg">This board is <strong>guest-friendly</strong>, so you do not have to create an account to update your affiliate link with us. We look forward to working with you to get your affiliate link corrected!</p>
       </div>
       <div class="pphelpcentrebutton"><a target="_blank" href="http://psychic-psyghtings.proboards.com/thread/new/56"><button>Help Centre</button></a></div>
</div>
   </div>
</div>
<!-- End Affiliate Bar Popup Container -->

It liked the way that you had the popup box in the Custom Mini-Profile Creator Plugin, which is why the dialog box looks so similar (although it's executed a bit differently.) That's what breaks it: When I attempt to recreate it, as I want to have another one that shows the staff of the forum, since you said earlier that it's not possible to populate the plugin by the Members' page. I wanted to keep everything "uniform" by using the same type of dialog box... but, like I said, even after changing the classes (which I thought I'd changed them all to not affect your plugin and vice versa), it breaks. Which is what caused me to ask if it was possible to have multiple iterations of a PB-style popup box.

[Brian]

I don't see anything in your code telling the page to open a second dialog.

[Alan Vende]

Whoops. I don't think that I copied all of the JS and HTML. This is everything in both places:

JS

// 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

// 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[i].style.display = "none";
   }
   tablinks = document.getElementsByClassName("tablinks");
   for (i = 0; i < tablinks.length; i++) {
       tablinks[i].className = tablinks[i].className.replace(" active", "");
   }
   document.getElementById(cityName).style.display = "block";
   evt.currentTarget.className += " active";
}

// Help Centre and Staff Popup Boxes
function affiliateManager() {
   pb.window.dialog("test1",{ title: "Our Affiliate Manager" }).html('<center><img width="100px" src="//storage.proboards.com/6027654/images/bmXchgCHMmxCvTGzZcjL.png" /><div class="affmanagername">Alan Vende</div><a target="_blank" href="http://psychic-psyghtings.proboards.com/conversation/new/1"><button>Send Message</button></a></center>');
}
HTML

<div class="affchangealert"><button onclick="$('#ppdialog').dialog('open')">Affiliation Procedure</button><button onclick="affiliateManager()">Manager</button></span><div class="ppafftotalcontainer ppafftotalcontainerbg"><strong>Total Affiliates:</strong> <span id="total-affiliates"></span></div>
</div>

<!-- Begin Affiliate Bar Popup Container -->
<div class="container boards">
<div class="content">
<div id="pp-popup-table">
<table class="list">
<!-- <thead>
<th>Installation</th>
<th class="last">Customization</th>
</thead> -->
<tbody>
<tr class="last">
<td class="item last">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
<li><a class="aff-info">Affiliate Info</a></li>
<li><a class="proced-note">Note about Procedure Change</a></li>
<li><a class="aff-link-change">Did your link change?</a></li>
</ul>
</div>
</td>
<!-- <td class="item last">
<div class="ui-tabMenu">
<ul class="ui-helper-clearfix">
<li><a class="test1">Reserved</a></li>
<li><a class="test2">Reserved</a></li>
</ul>
</div>
</td> -->
</tr>
</tbody>
</table>
</div>

<div class="pp-alert-welcome pad-all">
<div class="welc-line">Welcome to the Psychic Psyghtings Dialog Box!</div>
Here you will find information that we would like you to know regarding our affiliation procedures.
<br /><br />
<strong>Affiliate Info</strong> houses our affiliate code and number of affiliates in our affiliate bar.
<br /><br />
<strong>Note about Procedure Change</strong> houses a little bit about the change in Photobucket's Terms of Service as well as how we will be changing our policies to make sure that we are fully in-line with theirs.
<br /><br />
<strong>Did your link change?</strong> houses information on how you can submit your new code for us to put into our affiliate bar.
<br /><br />
Click on any of the tabs above to learn about how we are going about coping with it, <em>and how <strong>you</strong> can help!</em>
<br />
</div>

<div class="aff-info pad-all">
<div class="ppaffiliates">
<div>
<div>
<h3 class="ppaffcodeheader">Our Affiliate Code</h3>
<p class="tabbodypadding"><textarea readonly="true" onclick="this.select()" style="width: 610px; height: 26px; font-size: 8pt;"><a href="http://psychic-psyghtings.proboards.com/" target="_blank" title="Psychic Psyghtings"><img src="http://storage.proboards.com/2837905/i/9OmzvIlu49a6OB8UjnKV.jpg" alt="Psychic Psyghtings" /></a></textarea></p>
<div class="affimagecontainer">
<div class="affimagedesc"><span class="ppaffimage"><img src="$[plugin.images.PsychicPsyghtingsAffImage]" /></span></div><p>To the right is our affiliate image. It is what you will see when you input our affiliate code above. If you do not see it, please post in the Help Centre by clicking the button below. Thank you!</p><div class="pphelpcentrebuttoncontainer"><a target="_blank" href="http://psychic-psyghtings.proboards.com/thread/new/56"><button>Help Centre</button></a></div>
</div>
</div>
<div class="ppaffrulestextdiv">
<h3 class="ppaffrulestextheader">Our Affiliate Rules</h3>
<p class="tabbodypadding">Like many other forumes, ours has rules governing our affiliation with other forums. Please click the button below and take a moment to review them.</p>
<!-- Rules Button is in JS -->
<div class="ppaffrulesdiv">
<p class="ppaffrulestexttitle">Psychic Psyghtings' Affiliate Rules</p>
<p class="ppaffrulestextpadding"><strong>Rule #1:</strong> Your forum must be guest-friendly in terms of viewing, but does not have to be in terms of posting. The only thing that we require in terms of being guest-friendly is that the forum as a whole is viewable, like ours is to you.</p>
<p class="ppaffrulestextpadding"><strong>Rule #2:</strong> </p>
<p class="ppaffrulestextpadding"><strong>Rule #3:</strong> </p>
<p class="ppaffrulestextpadding"><strong>Rule #4:</strong> </p>
<p class="ppaffrulestextpadding"><strong>Rule #5:</strong> </p>
<p class="ppaffstaffnote"><em>The staff of Psychic Psyghtings reserves the right to change the above rules at any time, as they see fit with, or without, prior notice to the members.</em></p>
</div>
</div>
</div>
</div>
</div>

<div class="proced-note pad-all">
<h3 class="proced-note-header">Affiliation Procedure Change Notice</h3>
<p class="tabbodypadding">Because of the most recent change to Photobucket's ToS, there will be a change in how Psychic Psyghtings handles its affiliations with other forums.<br /><br />From now on, we will be downloading the affiliate's image and placing it <strong>within</strong> the new affiliate plugin. To help us with this, please supply us with a download link for the image.<br /><br />Thank you for helping us make this transition a smooth one. It is greatly appreciated!</p>
<div class="pphelpcentrebutton"><a target="_blank" href="http://psychic-psyghtings.proboards.com/thread/new/56"><button>Help Centre</button></a></div>
</div>

<div class="aff-link-change pad-all">
<h3 class="aff-link-change-header">Did your affiliate link change?</h3>
<p class="aff-link-change-note"><strong>Please Note:</strong> You <em>cannot</em> change your affiliate link once it is posted to the Affiliation Board, so you will have to follow the steps in the information below in order to update it. Thank you!</p>
<p class="tabbodypadding">Did your affliiate link change because of the change in Photobuket's Terms of Service? If so, please click the button below to be redirected to the Help Centre where you can create a thread detailing your new affiliate link.</p>
<div class="ppguestfriendly"><img class="lightbulbplaceholder" src="$[plugin.images.PsychicPsyghtingsAffImage]" />
<p class="ppguestfriendlymsg">This board is <strong>guest-friendly</strong>, so you do not have to create an account to update your affiliate link with us. We look forward to working with you to get your affiliate link corrected!</p>
</div>
<div class="pphelpcentrebutton"><a target="_blank" href="http://psychic-psyghtings.proboards.com/thread/new/56"><button>Help Centre</button></a></div>
</div>
</div>
</div>
<!-- End Affiliate Bar Popup Container -->

The HTML above is the buttons with the dialog box. The rest is the affiliate bar itself. The Manager button is the one that I created today from playing all night with the code you gave me earlier. So, the reason it's breaking is because there is no command to open a second iteration of that window?

EDIT: I don't know why those Spoilers aren't working... Sorry for the post being so long.

[Brian]

I see pb.window.dialog() which seems to be working just fine without negatively impacting your other dialog.

[Former Member]

Alan Vende

Hi, I need help with the topic. Can you speak on a website? Faceobook ?