Use Developer Tools to figure out what is wrong with plugins

[Alan Vende]

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

Nov 13, 2017 5:18:48 GMT -8 Alan Vende said:

I was getting frustrated because I couldn't find anywhere in W3Schools or anything like that how to make a popup box like that. All of the ones on there were triggered by a button, yes, but they didn't look anything like how PB's dialog boxes looked. They looked like the one below.

Since he already had it working, I thought to use Brian's code as a base (also for learning purposes with JS, but all this has taught me so far is that if I don't ask for help, I cannot code anything right...) and tweak it so my plugin doesn't interfere with his, since his Custom Mini-Profile Creator plugin is also running on both forums, the Plugins & More forum, and my Psychic Psyghtings forum.

---

I also attempted to remove .'+e, but even though it's not working in the code, the dialog box doesn't pop up when the .'+e is removed either...

I don't understand why it's not working because, like I said, it was working completely fine before I changed the classes to my own classes. It was working, though, because I was using the classes from his Custom Mini-Profile Creator Plugin, so his Custom Mini-Profile Creator Plugin, I think, is what was making it work. (Does that make sense the way I said it?)

---

PS: I apologize for not responding to you sooner. I just now saw your reply.

With his plugin running, it could potentially make your plugin run. Since that would evaluate true in cases where his plugin added what it was looking for. So I would like to say if you are trying to make a dialog that looks like proboards use the pb.window.dialog that uses all parameters that jquery does. 


pb.window.dialog('customdialogbox', {autoOpen: true, show: 'fade',hide: 'fade', height:400, width: 600, modal: false, title: 'Custom Dialog', buttons: {'View': function() {myfunction() },'Close': function() {$(this).dialog('close');}}, resizable: false, draggable: true, closeOnEscape: true,  close: function(){} });

$('#customdialogbox').html('html html html')

Here is an extended example that shows a bunch of options for you

Thanks so much for the example. I put it into a test plugin to see how it would work on the forum. The only thing that I have to figure out is how to make it so it opens on button click, as that's what I would like it to ultimately do.

To achieve the basic functionality in which Brian's plugin is (the tabbed areas), I would probably have to use a table like his within the body of the box, correct?

Also, in the Custom PP Affiliate Bar plugin, does the {if} statement really do anything anyway, since I have it to where it opens upon button click? I ask because I don't think I would have to create an {if} statement for the plugin with the pb.window.dialog, would I?

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

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

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

With his plugin running, it could potentially make your plugin run. Since that would evaluate true in cases where his plugin added what it was looking for. So I would like to say if you are trying to make a dialog that looks like proboards use the pb.window.dialog that uses all parameters that jquery does. 


pb.window.dialog('customdialogbox', {autoOpen: true, show: 'fade',hide: 'fade', height:400, width: 600, modal: false, title: 'Custom Dialog', buttons: {'View': function() {myfunction() },'Close': function() {$(this).dialog('close');}}, resizable: false, draggable: true, closeOnEscape: true,  close: function(){} });

$('#customdialogbox').html('html html html')

Here is an extended example that shows a bunch of options for you

Thanks so much for the example. I put it into a test plugin to see how it would work on the forum. The only thing that I have to figure out is how to make it so it opens on button click, as that's what I would like it to ultimately do.

To achieve the basic functionality in which Brian's plugin is (the tabbed areas), I would probably have to use a table like his within the body of the box, correct?

Also, in the Custom PP Affiliate Bar plugin, does the {if} statement really do anything anyway, since I have it to where it opens upon button click? I ask because I don't think I would have to create an {if} statement for the plugin with the pb.window.dialog, would I?

Well on the button onclick in the html you could name a function <button onclick="popupfunction()"></button> and wrap the popup with function popupfunction(){}
You do not need that if statement at all if you want to keep what you got.

[Alan Vende]

Sorry, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓, I just got back to my computer. I'm helping my Dad restore his phone from iTunes because of a software problem.

To wrap the function, it would be <button onclick="popupfunction()">(popup goes here)</button>, correct?

I don't really want the {if} statement there, which is why I asked. Sorry for the confusion.

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

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

Sorry, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ , I just got back to my computer. I'm helping my Dad restore his phone from iTunes because of a software problem.

To wrap the function, it would be <button onclick="popupfunction()">(popup goes here)</button>, correct?

I don't really want the {if} statement there, which is why I asked. Sorry for the confusion.

no. to wrap the function would be

javascript
function popupfunction(){
pb.window.dialog('customdialogbox', {autoOpen: true, show: 'fade',hide: 'fade', height:400, width: 600, modal: false, title: 'Custom Dialog', buttons: {'View': function() {myfunction() },'Close': function() {$(this).dialog('close');}}, resizable: false, draggable: true, closeOnEscape: true, close: function(){} });



$('#customdialogbox').html('html html html')

}html
<button onclick="popupfunction()">(button name)</button>
but you don't need any of that if you just kill the if statement

[Alan Vende]

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

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

Sorry, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ , I just got back to my computer. I'm helping my Dad restore his phone from iTunes because of a software problem.

To wrap the function, it would be <button onclick="popupfunction()">(popup goes here)</button>, correct?

I don't really want the {if} statement there, which is why I asked. Sorry for the confusion.

no. to wrap the function would be

javascript
function popupfunction(){
pb.window.dialog('customdialogbox', {autoOpen: true, show: 'fade',hide: 'fade', height:400, width: 600, modal: false, title: 'Custom Dialog', buttons: {'View': function() {myfunction() },'Close': function() {$(this).dialog('close');}}, resizable: false, draggable: true, closeOnEscape: true, close: function(){} });



$('#customdialogbox').html('html html html')

}html
<button onclick="popupfunction()">(button name)</button>
but you don't need any of that if you just kill the if statement

Thanks! I apologize for my misstep there.

I killed the if statement and just have:

pb.window.dialog('customdialogbox', {
   autoOpen: true,
   show: 'fade',
   hide: 'fade',
   height: 400,
   width: 600,
   modal: false,
   title: 'PP Custom Dialog Box',
   resizable: false,
   draggable: true,
   closeOnEscape: false,
   close: function(){}
});

$('#customdialogbox').html('<strong>Test</strong>')
I completely removed Brian's JS and am starting fresh from what I had before in my PP Custom Affiliate Bar plugin. I cleaned up the CSS, too.

I did add a Header, but that's beside the point. What I cannot get to work is in the Footer. I don't have to wrap the function to make it so the pb.dialog.window only pops up when the button is clicked, do I?

Also, I thought that that layout of a table would be the best for the information that I wanted to present, but I don't know if it's possible with the way it's currently coded. I wanted it like how Brian's Help Window is for his Custom Mini-Profile Creator Plugin, but when I put a table into the code, the tags for some reason come up red, and I'm just coding a regular table.

<table style="width:100%">
 <tr>
   <th>Firstname</th>
   <th>Lastname</th>
   <th>Age</th>
 </tr>
 <tr>
   <td>Jill</td>
   <td>Smith</td>
   <td>50</td>
 </tr>
 <tr>
   <td>Eve</td>
   <td>Jackson</td>
   <td>94</td>
 </tr>
</table>
The above is an example. I don't mean to sound like I'm insulting your intelligence by putting the code of a table, but I just wanted to show you how I was coding it.

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

Nov 13, 2017 11:48:31 GMT -8 Alan Vende said:

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

no. to wrap the function would be

javascript
function popupfunction(){
pb.window.dialog('customdialogbox', {autoOpen: true, show: 'fade',hide: 'fade', height:400, width: 600, modal: false, title: 'Custom Dialog', buttons: {'View': function() {myfunction() },'Close': function() {$(this).dialog('close');}}, resizable: false, draggable: true, closeOnEscape: true, close: function(){} });



$('#customdialogbox').html('html html html')

}html
<button onclick="popupfunction()">(button name)</button>
but you don't need any of that if you just kill the if statement

Thanks! I apologize for my misstep there.

I killed the if statement and just have:

pb.window.dialog('customdialogbox', {
   autoOpen: true,
   show: 'fade',
   hide: 'fade',
   height: 400,
   width: 600,
   modal: false,
   title: 'PP Custom Dialog Box',
   resizable: false,
   draggable: true,
   closeOnEscape: false,
   close: function(){}
});

$('#customdialogbox').html('<strong>Test</strong>')
I completely removed Brian's JS and am starting fresh from what I had before in my PP Custom Affiliate Bar plugin. I cleaned up the CSS, too.

I did add a Header, but that's beside the point. What I cannot get to work is in the Footer. I don't have to wrap the function to make it so the pb.dialog.window only pops up when the button is clicked, do I?

Also, I thought that that layout of a table would be the best for the information that I wanted to present, but I don't know if it's possible with the way it's currently coded. I wanted it like how Brian's Help Window is for his Custom Mini-Profile Creator Plugin, but when I put a table into the code, the tags for some reason come up red, and I'm just coding a regular table.

<table style="width:100%">
 <tr>
   <th>Firstname</th>
   <th>Lastname</th>
   <th>Age</th>
 </tr>
 <tr>
   <td>Jill</td>
   <td>Smith</td>
   <td>50</td>
 </tr>
 <tr>
   <td>Eve</td>
   <td>Jackson</td>
   <td>94</td>
 </tr>
</table>
The above is an example. I don't mean to sound like I'm insulting your intelligence by putting the code of a table, but I just wanted to show you how I was coding it.

Yes you must wrap it to make it into an onclick. Otherwise you can make a click handler like he did instead of wrapping it. Tables are fine. If links are red it's some loose cannon CSS on your forum. Could be theme or plugin related. Or some header code. The developer tool shows you a list of CSS that applies to every HTML element. I would suggest right clicking and inspecting the red link and see where the red is coming from

[Alan Vende]

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

Nov 13, 2017 11:48:31 GMT -8 Alan Vende said:

Thanks! I apologize for my misstep there.

I killed the if statement and just have:

pb.window.dialog('customdialogbox', {
   autoOpen: true,
   show: 'fade',
   hide: 'fade',
   height: 400,
   width: 600,
   modal: false,
   title: 'PP Custom Dialog Box',
   resizable: false,
   draggable: true,
   closeOnEscape: false,
   close: function(){}
});

$('#customdialogbox').html('<strong>Test</strong>')
I completely removed Brian's JS and am starting fresh from what I had before in my PP Custom Affiliate Bar plugin. I cleaned up the CSS, too.

I did add a Header, but that's beside the point. What I cannot get to work is in the Footer. I don't have to wrap the function to make it so the pb.dialog.window only pops up when the button is clicked, do I?

Also, I thought that that layout of a table would be the best for the information that I wanted to present, but I don't know if it's possible with the way it's currently coded. I wanted it like how Brian's Help Window is for his Custom Mini-Profile Creator Plugin, but when I put a table into the code, the tags for some reason come up red, and I'm just coding a regular table.

<table style="width:100%">
 <tr>
   <th>Firstname</th>
   <th>Lastname</th>
   <th>Age</th>
 </tr>
 <tr>
   <td>Jill</td>
   <td>Smith</td>
   <td>50</td>
 </tr>
 <tr>
   <td>Eve</td>
   <td>Jackson</td>
   <td>94</td>
 </tr>
</table>
The above is an example. I don't mean to sound like I'm insulting your intelligence by putting the code of a table, but I just wanted to show you how I was coding it.

Yes you must wrap it to make it into an onclick. Otherwise you can make a click handler like he did instead of wrapping it. Tables are fine. If links are red it's some loose cannon CSS on your forum. Could be theme or plugin related. Or some header code. The developer tool shows you a list of CSS that applies to every HTML element. I would suggest right clicking and inspecting the red link and see where the red is coming from

Well, he didn't put the table into the JS component, and I was--maybe that was my problem, although the code did say .html(), which is why I thought tables could go in there.

Like I said, I'm wondering if my problem is just because I didn't put it in the right place and it should be in the Footer and referenced in the JS with a class?

How do you know when you're looking at the console what is "good code" and what is "bad code"?

[Alan Vende]

*** I wanted to put this in its own reply and tag you so the quoting doesn't get too confusing. ***

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ , I played around with it for a few minutes and came up with this:

function openhelpWindow() {
   pb.window.dialog('customdialogbox', {
   autoOpen: true,
   show: 'fade',
   hide: 'fade',
   height: 400,
   width: 600,
   modal: false,
   title: 'PP Custom Dialog Box',
   resizable: false,
   draggable: true,
   closeOnEscape: false,
   close: function(){}
});

$('#customdialogbox').html('Thank you to <a href="http://support.proboards.com/user/201984"><strong>P??a???t?u?le?o?2?3??</strong></a> for all of your help!')
}

<div class="affchangealert"><button onclick="openhelpWindow()">Change Regarding PP Affiliation Procedure</button></div> and it seems to be working, but is this the best way to go about this, or is this wrong? (For knowledge's sake, because it does work as intended--click the button and the dialog box pops up.)

I'm still unsure about the red tags, though. Nothing in the plugin is making it do that and, to my knowledge, nothing on the forum itself is doing that as I don't really have many customizations to the theme aside from the color itself. I'm stumped on that part.

It's also happening to one of the closing div tags in the Global Footer (specifically on line 37), but everything seems to check out--they all have opening div tags to match them.) Nothing on my forum, to my knowledge, is making this happen--it's only within the plugin itself. How could something outside of the plugin effect it?

Is whatever is effecting that div tag the thing that's effecting the table tags when attempting to put them into the JS component? Like I think I said before, should they go into the Footer of the Plugin and be called in the JS like in Brian's plugin? Or is it possible for them to go into the JS area and successfully integrate into the popup?

That's the biggest part that I'm confused about--how to replicate a table in a place where it seems to be allowed to go, but throws a fit when being placed there...

It's also weird how when a basic table is put into the JS between the ('here') that the tags are red and, when the button is clicked to test if that basic table pops up, nothing happens... I don't see a reason for this happening because, like I said, I haven't made extensive changes to any of my themes that would interfere with the plugin...

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

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

*** I wanted to put this in its own reply and tag you so the quoting doesn't get too confusing. ***

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ , I played around with it for a few minutes and came up with this:

function openhelpWindow() {
   pb.window.dialog('customdialogbox', {
   autoOpen: true,
   show: 'fade',
   hide: 'fade',
   height: 400,
   width: 600,
   modal: false,
   title: 'PP Custom Dialog Box',
   resizable: false,
   draggable: true,
   closeOnEscape: false,
   close: function(){}
});

$('#customdialogbox').html('Thank you to <a href="http://support.proboards.com/user/201984"><strong>P??a???t?u?le?o?2?3??</strong></a> for all of your help!')
}

<div class="affchangealert"><button onclick="openhelpWindow()">Change Regarding PP Affiliation Procedure</button></div> and it seems to be working, but is this the best way to go about this, or is this wrong? (For knowledge's sake, because it does work as intended--click the button and the dialog box pops up.)

I'm still unsure about the red tags, though. Nothing in the plugin is making it do that and, to my knowledge, nothing on the forum itself is doing that as I don't really have many customizations to the theme aside from the color itself. I'm stumped on that part.

It's also happening to one of the closing div tags in the Global Footer (specifically on line 37), but everything seems to check out--they all have opening div tags to match them.) Nothing on my forum, to my knowledge, is making this happen--it's only within the plugin itself. How could something outside of the plugin effect it?

Is whatever is effecting that div tag the thing that's effecting the table tags when attempting to put them into the JS component? Like I think I said before, should they go into the Footer of the Plugin and be called in the JS like in Brian's plugin? Or is it possible for them to go into the JS area and successfully integrate into the popup?

That's the biggest part that I'm confused about--how to replicate a table in a place where it seems to be allowed to go, but throws a fit when being placed there...

It's also weird how when a basic table is put into the JS between the ('here') that the tags are red and, when the button is clicked to test if that basic table pops up, nothing happens... I don't see a reason for this happening because, like I said, I haven't made extensive changes to any of my themes that would interfere with the plugin...

I'll try to explain more on lunch

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

Good code is code that works. Bad code is code that breaks good code. There are bad coding practices like using real words as IDs classes and function names. Which is why you write multiple words together. A way to fix that is namespacing.

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

You can write things in multiple components or just 1. Don't matter. The goal is something you can read organize modify and not break other people's code

[Alan Vende]

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

Good code is code that works. Bad code is code that breaks good code. There are bad coding practices like using real words as IDs classes and function names. Which is why you write multiple words together. A way to fix that is namespacing.

Could you give me an example of what you mean by "using real words as IDs, classes, and function names"? You don't mean like <div class="blue"></div>, do you? That was the first thing that popped into my mind when I read "real words as IDs, classes, and function names."

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

You can write things in multiple components or just 1. Don't matter. The goal is something you can read organize modify and not break other people's code

When you say multiple components, you're talking about the JavaScript, CSS, Global/Main Header/Footer components in the Plugin Build, correct?

And when you say "break other people's code", you mean make it so it doesn't function properly? For example, if a dialog box was supposed to popup when the page loaded, but if you were writing a plugin and that functionality ceased, that would be considered breaking it, right?

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

You can write HTML in js components using single or double quotes. You can place them in the footer per se by using document ready. You can place it in the header using append. You can write CSS by appending styles or stylesheets. And you can do evything in the header or footer components too. There's a million. Ways to skin a cat, you just have to write it in a way that your component understands.

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

Nov 13, 2017 21:23:43 GMT -8 Alan Vende said:

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

Good code is code that works. Bad code is code that breaks good code. There are bad coding practices like using real words as IDs classes and function names. Which is why you write multiple words together. A way to fix that is namespacing.

Could you give me an example of what you mean by "using real words as IDs, classes, and function names"? You don't mean like <div class="blue"></div>, do you? That was the first thing that popped into my mind when I read "real words as IDs, classes, and function names."

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

You can write things in multiple components or just 1. Don't matter. The goal is something you can read organize modify and not break other people's code

When you say multiple components, you're talking about the JavaScript, CSS, Global/Main Header/Footer components in the Plugin Build, correct?

And when you say "break other people's code", you mean make it so it doesn't function properly? For example, if a dialog box was supposed to popup when the page loaded, but if you were writing a plugin and that functionality ceased, that would be considered breaking it, right?

Yeah I'd should NEVER be something like blue. Yes multiple components like that. Yes if you wrote a code that overwrote someone else code or moved something g so that Brian's plugin would no longer work, that would probably be bad coding.

[Alan Vende]

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

You can write HTML in js components using single or double quotes. You can place them in the footer per se by using document ready. You can place it in the header using append. You can write CSS by appending styles or stylesheets. And you can do evything in the header or footer components too. There's a million. Ways to skin a cat, you just have to write it in a way that your component understands.

Writing HTML in the JS component is what I'm attempting to do with the table since I don't see any other viable way of making it work correctly, but every time I try to do it, the plugin breaks. ...I guess I'm just not a good coder. :/

The only thing that matters is that the component itself understands, it doesn't matter specifically how you write it--like you said: "there's a million ways to skin a cat..."

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

Nov 13, 2017 21:23:43 GMT -8 Alan Vende said:

Could you give me an example of what you mean by "using real words as IDs, classes, and function names"? You don't mean like <div class="blue"></div>, do you? That was the first thing that popped into my mind when I read "real words as IDs, classes, and function names."

When you say multiple components, you're talking about the JavaScript, CSS, Global/Main Header/Footer components in the Plugin Build, correct?

And when you say "break other people's code", you mean make it so it doesn't function properly? For example, if a dialog box was supposed to popup when the page loaded, but if you were writing a plugin and that functionality ceased, that would be considered breaking it, right?

Yeah I'd should NEVER be something like blue. Yes multiple components like that. Yes if you wrote a code that overwrote someone else code or moved something g so that Brian's plugin would no longer work, that would probably be bad coding.

Blue being too common of a word, right? It being a color would probably be referenced within the styles of a theme or within discussions in the boards. I can think of many reasons why that type of word wouldn't be good.

It's never good to stop other's plugins from working anyway. It would be bad, and then it would be up to you to fix it.