Use Developer Tools to figure out what is wrong with plugins

[Chris]

Nov 13, 2017 22:00:10 GMT -8 Alan Vende said:

Which is what prompted me to wonder if I should attempt to code it another way, although I don't see any other viable way to make it so the dialog box turns into a tabbed dialog box and still opens onclick of the button.

Like I said, it completely stumps me.

The contents of the dialog can be a pre-existing element instead of writing it on the fly with .html('blah') and in most cases that is how Proboards uses it.
It is much easier to build the contents in HTML (e.g global header, board header, etc.) and attach any events you want to it rather than building it from an html string then working out what gets tabified in this case
As an example I could grab the paginator in this thread and plop it into a dialog and the events attached to it that allows you to go from page to page is still valid and working




//first give the paginator an ID so we can then reference it in the dialog setup
$('.lm-pagination-'+pb.data('lm_id')).attr('id','dapaginator');
pb.window.dialog('dapaginator',{autoOpen:true, width: 200})

If I wanted to have it open on an element click I would instead set "autoOpen" to "false" and then in the onlick of the element do

$('#dapaginator').dialog('open')

---

Edit:
The first step to avoiding conflicts and armouring your codes against interference from other codes is to read this old V4 topic and heed the advice which is still applicable even today.

[Alan Vende]

Nov 13, 2017 22:14:21 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

I use script and style tags in plugins sometimes instead of using the components

You use them in the Header/Footer boxes, right? Would that make it so the plugin itself isn't "organized"? I always thought that the components were for organization of the code itself, right? 

Nov 13, 2017 22:24:55 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Nov 13, 2017 22:10:22 GMT -8 Alan Vende said:

Really? Rarely? Yours works great for me. I just wish I could have it listen to me to give it tabs.

I believe my notes is a plugin that is editable that has comments on what each line does. It might teach you something

Is it titled "My Notes" in the Plugin Library? I'll look for it. Thank you!

Nov 13, 2017 22:26:40 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

I thought myself JavaScript through examining plugins and google

When I look at plugins I cannot really see what each line does... even if I look at it with comments sometimes. It's hard to wrap my brain around it. I'm not sure why.

Nov 13, 2017 22:52:55 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

We could voice chat in a couple hours if you want to talk about coding

I don't really have anything to voice chat with. I apologize!

Nov 14, 2017 0:55:17 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Peter's ebook is excellent, I read it myself. support.proboards.com/thread/614269/free-ebook-creating-proboards-plugins
And that my notes plugin editable in build mode:  with comments on what everything does. I assume you fixed the red color thing since I didn't see anything red.

I took a look at his book, but I haven't read it all the way through yet. I'm still reading through it.

I wasn't able to fix the red code within the plugin, no. I still cannot figure out what is wrong with it.

Nov 14, 2017 1:28:29 GMT -8 Chris said:

Nov 13, 2017 22:00:10 GMT -8 Alan Vende said:

Which is what prompted me to wonder if I should attempt to code it another way, although I don't see any other viable way to make it so the dialog box turns into a tabbed dialog box and still opens onclick of the button.

Like I said, it completely stumps me.

The contents of the dialog can be a pre-existing element instead of writing it on the fly with .html('blah') and in most cases that is how Proboards uses it.
It is much easier to build the contents in HTML (e.g global header, board header, etc.) and attach any events you want to it rather than building it from an html string then working out what gets tabified in this case
As an example I could grab the paginator in this thread and plop it into a dialog and the events attached to it that allows you to go from page to page is still valid and working




//first give the paginator an ID so we can then reference it in the dialog setup
$('.lm-pagination-'+pb.data('lm_id')).attr('id','dapaginator');
pb.window.dialog('dapaginator',{autoOpen:true, width: 200})

If I wanted to have it open on an element click I would instead set "autoOpen" to "false" and then in the onlick of the element do

$('#dapaginator').dialog('open')

---

Edit:
The first step to avoiding conflicts and armouring your codes against interference from other codes is to read this old V4 topic and heed the advice which is still applicable even today.

Thanks, Chris . Would doing something like in your screenshot/example work within the plugin? Or would that then be relying on the pagination and not solely on the plugin? (Sorry if that question doesn't make sense!)

Also, to open it, would $('#dapaginator').dialog('open') go into the HTML area like the following?

<button onclick="$('#dapaginator').dialog('open')">Click me</button>

So, would I put the tabs into the Footer and then put a class around it and have that class in the JS to open on button click via the pagination? (Sorry if this also doesn't make sense!)


EDIT: I got it to open on button click with <button onclick="$('#dapaginator').dialog('open')">Change Regarding PP Affiliation Procedure</button>. The only thing I'm having trouble with is populating that with text. I attempted to put <p>Test</p> into the footer section, and that just populated "test" as text, and not within the dialog box. So, would I have to code the text/table elsewhere and put it somewhere into the footer for the box to pick it up?

For example, I have the following:



The <p>Test</p> is under the button in the code as such:

<div class="affchangealert"><button onclick="$('#dapaginator').dialog('open')">Change Regarding PP Affiliation Procedure</button></div>

<p>Test</p>
I also attempted to put it before the closing </div> tag, as shown below:

<div class="affchangealert"><button onclick="$('#dapaginator').dialog('open')">Change Regarding PP Affiliation Procedure</button><p>Test</p></div>
and that showed this:



Am I going about it the wrong way? I'm guessing there is a way to have the JS call it now since the box is up there, right?

And this will not interfere with the native PB pagination, correct?

---

EDIT: I just had a thought cross my mind. Since it will be calling something from the Footer area of a Global H/F component, could I just do the "standard" HTML for a div box and go about it that way so I can style it the way I want (such as making it so the title of the div box was centered?)

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Everyone has a built in mic haha. People use discord nowadays. I can't really track down the red for you unless I seen it on the page somewhere.

[Alan Vende]

Nov 15, 2017 8:14:12 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Everyone has a built in mic haha. People use discord nowadays. I can't really track down the red for you unless I seen it on the page somewhere.

The red is within the code itself. It's the last div in the code



The plugin itself should be showing on the page for everyone. Are you not seeing it?

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Nov 15, 2017 8:17:43 GMT -8 Alan Vende said:

Nov 15, 2017 8:14:12 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Everyone has a built in mic haha. People use discord nowadays. I can't really track down the red for you unless I seen it on the page somewhere.

The red is within the code itself. It's the last div in the code



The plugin itself should be showing on the page for everyone. Are you not seeing it?

You mean the red in that image? 

[Alan Vende]

Yeah, the red div tag. It's a closing div tag for the <div class="content">.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Nov 15, 2017 8:25:05 GMT -8 Alan Vende said:

Yeah, the red div tag. It's a closing div tag for the <div class="content">.

if its red that means that its not closing the content because the proper sequence of end tags is not being followed. which doesnt matter since browsers interpret end tags when missing and things seem to be fine. I cant see what goes in the header/footer of your plugin

[Alan Vende]

Nov 15, 2017 9:31:55 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Nov 15, 2017 8:25:05 GMT -8 Alan Vende said:

Yeah, the red div tag. It's a closing div tag for the <div class="content">.

if its red that means that its not closing the content because the proper sequence of end tags is not being followed. which doesnt matter since browsers interpret end tags when missing and things seem to be fine.

Right, but when I click into it to see what the tag closes, it says it closes the content of the plugin itself... which is what confuses me.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Nov 15, 2017 9:36:58 GMT -8 Alan Vende said:

Nov 15, 2017 9:31:55 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

if its red that means that its not closing the content because the proper sequence of end tags is not being followed. which doesnt matter since browsers interpret end tags when missing and things seem to be fine.

Right, but when I click into it to see what the tag closes, it says it closes the content of the plugin itself... which is what confuses me.

can you post the full code?

[Alan Vende]

Nov 15, 2017 9:38:07 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Nov 15, 2017 9:36:58 GMT -8 Alan Vende said:

Right, but when I click into it to see what the tag closes, it says it closes the content of the plugin itself... which is what confuses me.

can you post the full code?

SPOILER: Click to show

<div class="container boards">
   <div class="title-bar pp-affiliate-title">
 <span><h2>Psychic Psyghtings' Affiliates &amp; Friends</h2></span>
   </div>
   <div class="content">
       <div class="affiliatecodes">
           <div id="total-affiliates">
                   <marquee scrollamount="3" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 2, 0);">
                       <ul class="affiliateaffcodes">
<li><span><a href="http://support.proboards.com" target="_blank" title="Proboards Support"><img src="$[plugin.images.PBS_88x31]" alt="Proboards Support"></a></span></li>&nbsp;

<li><span><a href="http://maisonduviolette.proboards.com/" target="_blank" title="Maison du Violette"><img src="$[plugin.images.MaisonduViolette]" alt="Maison du Violette" /></a></span></li>&nbsp;

<li><span><a href="http://army83.forums.net/" target="_blank" title="aRMY83 and Staff™"><img src="$[plugin.images.aRMY83Staff3]" width="88" height="31" border="0" alt="aRMY83 and Staff™" /></a></span></li>&nbsp;

<li><span><a href="http://allkindsofeverything.boards.net/" target="_blank" title="All Kinds of Everything"><img src="$[plugin.images.AllKindsofEverything]" alt="All Kinds of Everything" border="0" width="88px" height="31px" /></a></span></li>&nbsp;

<!-- <li><span><a href="http://redhorizon.freeforums.net/" target="_blank" title="Alraënia"><img src="$[plugin.images.RedHorizon]" alt="Alraënia" border="0" width="88px" height="31px" /></a></span></li>&nbsp; -->

<li><span><a href="http://avatarascent.boards.net/" target="_blank" title="Avatar Ascent"><img src="$[plugin.images.AvatarAscent]" alt="Avatar Ascent" border="0" width="88px" height="31px" /></a></span></li>&nbsp;

<li><span><a href="http://reflection38.proboards.com/" target="_blank" title="Reflection - Anime and Game "><img src="$[plugin.images.ReflectionAnimeandGame]" alt="Reflection - Anime and Game " border="0" width="88px" height="31px" /></a></span></li>&nbsp;

<li><span><a href="http://promoforum.boards.net" title="PromoForum" target="_blank"><img src="$[plugin.images.PromoForum]" alt="PromoForum.net" width="88px" height="31px" border="0"></a></span></li>&nbsp;

<li><span><a href="http://promisedisland.freeforums.net/"><img src="$[plugin.images.PromiseIsland]" border="0" alt="Promise Island"></a></span></li>&nbsp;

<li><span><a href="http://www.allthatremains.freeforums.net/index.cgi" target="_blank" /><img src="$[plugin.images.AllThatRemains]" border="0" alt="TWD: All That Remains" /></a></span></li>&nbsp;

<li><span><a href="http://occultknowledge.boards.net/" target="_blank" title="Occult Knowledge"><img src="$[plugin.images.OccultKnowledge]" alt="Occult Knowledge" border="0" width="88px" height="31px" /></a></span></li>&nbsp;
               </ul>
           </marquee>
   </div>
</div>
       <div class="affchangealert"><button onclick="$('#dapaginator').dialog('open')">Change Regarding PP Affiliation Procedure</button></div>
</div>
<br />

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Nov 15, 2017 9:39:37 GMT -8 Alan Vende said:

Nov 15, 2017 9:38:07 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

can you post the full code?

SPOILER: Click to show

<div class="container boards">
   <div class="title-bar pp-affiliate-title">
 <span><h2>Psychic Psyghtings' Affiliates &amp; Friends</h2></span>
   </div>
   <div class="content">
       <div class="affiliatecodes">
           <div id="total-affiliates">
                   <marquee scrollamount="3" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 2, 0);">
                       <ul class="affiliateaffcodes">
<li><span><a href="http://support.proboards.com" target="_blank" title="Proboards Support"><img src="$[plugin.images.PBS_88x31]" alt="Proboards Support"></a></span></li>&nbsp;

<li><span><a href="http://maisonduviolette.proboards.com/" target="_blank" title="Maison du Violette"><img src="$[plugin.images.MaisonduViolette]" alt="Maison du Violette" /></a></span></li>&nbsp;

<li><span><a href="http://army83.forums.net/" target="_blank" title="aRMY83 and Staff™"><img src="$[plugin.images.aRMY83Staff3]" width="88" height="31" border="0" alt="aRMY83 and Staff™" /></a></span></li>&nbsp;

<li><span><a href="http://allkindsofeverything.boards.net/" target="_blank" title="All Kinds of Everything"><img src="$[plugin.images.AllKindsofEverything]" alt="All Kinds of Everything" border="0" width="88px" height="31px" /></a></span></li>&nbsp;

<!-- <li><span><a href="http://redhorizon.freeforums.net/" target="_blank" title="Alraënia"><img src="$[plugin.images.RedHorizon]" alt="Alraënia" border="0" width="88px" height="31px" /></a></span></li>&nbsp; -->

<li><span><a href="http://avatarascent.boards.net/" target="_blank" title="Avatar Ascent"><img src="$[plugin.images.AvatarAscent]" alt="Avatar Ascent" border="0" width="88px" height="31px" /></a></span></li>&nbsp;

<li><span><a href="http://reflection38.proboards.com/" target="_blank" title="Reflection - Anime and Game "><img src="$[plugin.images.ReflectionAnimeandGame]" alt="Reflection - Anime and Game " border="0" width="88px" height="31px" /></a></span></li>&nbsp;

<li><span><a href="http://promoforum.boards.net" title="PromoForum" target="_blank"><img src="$[plugin.images.PromoForum]" alt="PromoForum.net" width="88px" height="31px" border="0"></a></span></li>&nbsp;

<li><span><a href="http://promisedisland.freeforums.net/"><img src="$[plugin.images.PromiseIsland]" border="0" alt="Promise Island"></a></span></li>&nbsp;

<li><span><a href="http://www.allthatremains.freeforums.net/index.cgi" target="_blank" /><img src="$[plugin.images.AllThatRemains]" border="0" alt="TWD: All That Remains" /></a></span></li>&nbsp;

<li><span><a href="http://occultknowledge.boards.net/" target="_blank" title="Occult Knowledge"><img src="$[plugin.images.OccultKnowledge]" alt="Occult Knowledge" border="0" width="88px" height="31px" /></a></span></li>&nbsp;
               </ul>
           </marquee>
   </div>
</div>
       <div class="affchangealert"><button onclick="$('#dapaginator').dialog('open')">Change Regarding PP Affiliation Procedure</button></div>
</div>
<br />

here
<li><span><a href="http://www.allthatremains.freeforums.net/index.cgi" target="_blank" /><img src="$[plugin.images.AllThatRemains]" border="0" alt="TWD: All That Remains" /></a></span></li>&nbsp;

has a closing </ a> twice, thus throwing all of your future closing tags off balance
gi" target="_blank" /> :needs to be: gi" target="_blank">
/>  is short code for </ a>

[Alan Vende]

Nov 15, 2017 10:00:17 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Nov 15, 2017 9:39:37 GMT -8 Alan Vende said:

SPOILER: Click to show

<div class="container boards">
   <div class="title-bar pp-affiliate-title">
 <span><h2>Psychic Psyghtings' Affiliates &amp; Friends</h2></span>
   </div>
   <div class="content">
       <div class="affiliatecodes">
           <div id="total-affiliates">
                   <marquee scrollamount="3" onmouseover="this.setAttribute('scrollamount', 0, 0);" onmouseout="this.setAttribute('scrollamount', 2, 0);">
                       <ul class="affiliateaffcodes">
<li><span><a href="http://support.proboards.com" target="_blank" title="Proboards Support"><img src="$[plugin.images.PBS_88x31]" alt="Proboards Support"></a></span></li>&nbsp;

<li><span><a href="http://maisonduviolette.proboards.com/" target="_blank" title="Maison du Violette"><img src="$[plugin.images.MaisonduViolette]" alt="Maison du Violette" /></a></span></li>&nbsp;

<li><span><a href="http://army83.forums.net/" target="_blank" title="aRMY83 and Staff™"><img src="$[plugin.images.aRMY83Staff3]" width="88" height="31" border="0" alt="aRMY83 and Staff™" /></a></span></li>&nbsp;

<li><span><a href="http://allkindsofeverything.boards.net/" target="_blank" title="All Kinds of Everything"><img src="$[plugin.images.AllKindsofEverything]" alt="All Kinds of Everything" border="0" width="88px" height="31px" /></a></span></li>&nbsp;

<!-- <li><span><a href="http://redhorizon.freeforums.net/" target="_blank" title="Alraënia"><img src="$[plugin.images.RedHorizon]" alt="Alraënia" border="0" width="88px" height="31px" /></a></span></li>&nbsp; -->

<li><span><a href="http://avatarascent.boards.net/" target="_blank" title="Avatar Ascent"><img src="$[plugin.images.AvatarAscent]" alt="Avatar Ascent" border="0" width="88px" height="31px" /></a></span></li>&nbsp;

<li><span><a href="http://reflection38.proboards.com/" target="_blank" title="Reflection - Anime and Game "><img src="$[plugin.images.ReflectionAnimeandGame]" alt="Reflection - Anime and Game " border="0" width="88px" height="31px" /></a></span></li>&nbsp;

<li><span><a href="http://promoforum.boards.net" title="PromoForum" target="_blank"><img src="$[plugin.images.PromoForum]" alt="PromoForum.net" width="88px" height="31px" border="0"></a></span></li>&nbsp;

<li><span><a href="http://promisedisland.freeforums.net/"><img src="$[plugin.images.PromiseIsland]" border="0" alt="Promise Island"></a></span></li>&nbsp;

<li><span><a href="http://www.allthatremains.freeforums.net/index.cgi" target="_blank" /><img src="$[plugin.images.AllThatRemains]" border="0" alt="TWD: All That Remains" /></a></span></li>&nbsp;

<li><span><a href="http://occultknowledge.boards.net/" target="_blank" title="Occult Knowledge"><img src="$[plugin.images.OccultKnowledge]" alt="Occult Knowledge" border="0" width="88px" height="31px" /></a></span></li>&nbsp;
               </ul>
           </marquee>
   </div>
</div>
       <div class="affchangealert"><button onclick="$('#dapaginator').dialog('open')">Change Regarding PP Affiliation Procedure</button></div>
</div>
<br />

here
<li><span><a href="http://www.allthatremains.freeforums.net/index.cgi" target="_blank" /><img src="$[plugin.images.AllThatRemains]" border="0" alt="TWD: All That Remains" /></a></span></li>&nbsp;

has a closing </ a> twice, thus throwing all of your future closing tags off balance
gi" target="_blank" /> :needs to be: gi" target="_blank">
/>  is short code for </ a>

I didn't even realize that an affiliate code was the culprit. I thought that it was something that I had written.

So, like this:

<li><span><a href="http://www.allthatremains.freeforums.net/index.cgi" target="_blank"><img src="$[plugin.images.AllThatRemains]" border="0" alt="TWD: All That Remains" /></a></span></li>&nbsp;
Thanks so much for that, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓!

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Nov 15, 2017 10:03:42 GMT -8 Alan Vende said:

Nov 15, 2017 10:00:17 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

here
<li><span><a href="http://www.allthatremains.freeforums.net/index.cgi" target="_blank" /><img src="$[plugin.images.AllThatRemains]" border="0" alt="TWD: All That Remains" /></a></span></li>&nbsp;

has a closing </ a> twice, thus throwing all of your future closing tags off balance
gi" target="_blank" /> :needs to be: gi" target="_blank">
/>  is short code for </ a>

I didn't even realize that an affiliate code was the culprit. I thought that it was something that I had written.

So, like this:

<li><span><a href="http://www.allthatremains.freeforums.net/index.cgi" target="_blank"><img src="$[plugin.images.AllThatRemains]" border="0" alt="TWD: All That Remains" /></a></span></li>&nbsp;
Thanks so much for that, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ !

Yep

[Alan Vende]

Nov 15, 2017 10:11:55 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Nov 15, 2017 10:03:42 GMT -8 Alan Vende said:

I didn't even realize that an affiliate code was the culprit. I thought that it was something that I had written.

So, like this:

<li><span><a href="http://www.allthatremains.freeforums.net/index.cgi" target="_blank"><img src="$[plugin.images.AllThatRemains]" border="0" alt="TWD: All That Remains" /></a></span></li>&nbsp;
Thanks so much for that, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ !

Yep

That's what I thought, thank you!

Now I just have to figure out how to make it so the information that I want goes into the dialog box. I'm wondering if I should just create the dialog box with the code that I have in the header already (which I'm testing out right now). I'm just not so sure how to make it so the <th> stays on the top and only the <tr> changes when the <thead> is clicked. Like the behavior of Brian's table for the Custom Mini-Profile Creator Help Window. I think that that would better organize my information, but I cannot figure out how to do that...

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Nov 15, 2017 10:18:33 GMT -8 Alan Vende said:

Nov 15, 2017 10:11:55 GMT -8 P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ said:

Yep

That's what I thought, thank you!

Now I just have to figure out how to make it so the information that I want goes into the dialog box. I'm wondering if I should just create the dialog box with the code that I have in the header already (which I'm testing out right now). I'm just not so sure how to make it so the <th> stays on the top and only the <tr> changes when the <thead> is clicked. Like the behavior of Brian's table for the Custom Mini-Profile Creator Help Window. I think that that would better organize my information, but I cannot figure out how to do that...

the cheap way to do it is to have it recreate the th every time you change the T Head thus making it seem like it stayed but in reality you rewrote it