Use Developer Tools to figure out what is wrong with plugins

[Alan Vende]

Forum URL: lousplugins.proboards.com

Hey guys!

I am working on a plugin for my forum and have run into a snag. I attempted to use the Developer Tools on my Windows machine, but was unable to use that to deduce the problem.

I was wondering if someone could run me through how to use the Dev Tools effectively to deduce what the problem is with my plugin. I have a button "Change in PP Affiliation Procedure" that's supposed to open up to a dialog window when clicked, but for some reason that functionality is not happening anymore.

Thank you for your time and attention!

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

Nov 12, 2017 12:19:52 GMT -8 Alan Vende said:

Forum URL: lousplugins.proboards.com

Hey guys!

I am working on a plugin for my forum and have run into a snag. I attempted to use the Developer Tools on my Windows machine, but was unable to use that to deduce the problem.

I was wondering if someone could run me through how to use the Dev Tools effectively to deduce what the problem is with my plugin. I have a button "Change in PP Affiliation Procedure" that's supposed to open up to a dialog window when clicked, but for some reason that functionality is not happening anymore.

Thank you for your time and attention!

I looked through your website and I did not see a plugin enabled that made a button that said Change In PP Affiliation. If it's on a specific page please provide a link. By using the developer tools and focusing on the error console you can tell when a plugin/button is throwing a js error. Anything that is a red error means your javascript stopped working unexpectedly. Reading what caused the error can help you diagnose the problem. I know on the chrome developer tools you can click on the link to the right of the error, and it will bring you to the line that had an error for you. If you click a button, and then a  new error is generated, then it's the onclick handler for the button that is wrong. If not, then it is the code making the onclick handler.

[Alan Vende]

I apologize, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓, I thought that it was showing for everyone. I changed the permission of the plugin and you should be able to view it now. If you cannot, please let me know.

I was using the Developer Tools in Chrome and didn't see an Error Console. I guess I was looking in the wrong place?

I apologize for the plugin not showing. Is it showing now?

I was using Chrome, but this is my first time using it, so I didn't really have a good grasp on what I was looking at.

[Kami]

Nov 12, 2017 16:31:35 GMT -8 Alan Vende said:

I apologize, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓, I thought that it was showing for everyone. I changed the permission of the plugin and you should be able to view it now. If you cannot, please let me know.

I was using the Developer Tools in Chrome and didn't see an Error Console. I guess I was looking in the wrong place?

I apologize for the plugin not showing. Is it showing now?

I was using Chrome, but this is my first time using it, so I didn't really have a good grasp on what I was looking at. :P

The console is here:

[Alan Vende]

Nov 12, 2017 17:49:06 GMT -8 Kami said:

Nov 12, 2017 16:31:35 GMT -8 Alan Vende said:

I apologize, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ , I thought that it was showing for everyone. I changed the permission of the plugin and you should be able to view it now. If you cannot, please let me know.

I was using the Developer Tools in Chrome and didn't see an Error Console. I guess I was looking in the wrong place?

I apologize for the plugin not showing. Is it showing now?

I was using Chrome, but this is my first time using it, so I didn't really have a good grasp on what I was looking at.

The console is here:

Oh! Duh. Thanks, Kami!

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

Nov 12, 2017 17:50:33 GMT -8 Alan Vende said:

Nov 12, 2017 17:49:06 GMT -8 Kami said:

The console is here:

Oh! Duh. Thanks, Kami !

Any luck?

[Alan Vende]

Sorry! I didn’t realize my post never posted (my Internet went out again.) I was unable to find any errors with the box, although there should be since it’s not working as intended.

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

Nov 12, 2017 23:31:06 GMT -8 Alan Vende said:

Sorry! I didn’t realize my post never posted (my Internet went out again.) I was unable to find any errors with the box, although there should be since it’s not working as intended.

Lol people use Tapatalk still. I assume it's not making it to v6. Ill try and remember to look at it on lunch. What's the plugin name? 

[Alan Vende]

I don’t use it very often, but I’m unable to be at my computer right now. I do hope it makes it to v6, but I doubt it will since PB’s forums will be responsive and whatnot.

The Plugin should be viewable to everyone now. If it’s not, it’s definitely now viewable to members and staff. If it’s not, please let me know and I’ll go in and change it again.

It’s PP Custom Affiliate Plugin.

Thanks so much, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓!

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

Nov 12, 2017 23:42:14 GMT -8 Alan Vende said:

I don’t use it very often, but I’m unable to be at my computer right now. I do hope it makes it to v6, but I doubt it will since PB’s forums will be responsive and whatnot.

The Plugin should be viewable to everyone now. If it’s not, it’s definitely now viewable to members and staff. If it’s not, please let me know and I’ll go in and change it again.

It’s PP Custom Affiliate Plugin.

Thanks so much, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ !

I'll try and look at it on lunch

[Alan Vende]

Thanks so much.

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

I doubt Tapatalk will make it to v6. What's the plugin name? Alan Vende

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

Nov 12, 2017 23:50:05 GMT -8 Alan Vende said:

Thanks so much.

My steps to troubleshoot were as follows.
1. Run my diagnostic center to verify that the plugin was running and what variables/manage it had set up. (not needed if it was my own forum)
2. open the developer tools
3. open the console and click your button to check for errors -none found
4. open the visual event extension I have on chrome to verify that an onclick handler had been attached to the button - yes
5. open the sources tab in developer tools and navigate to storage.proboards.com/6027654/js and thumb through all the javascript until I found the one for your plugin (which I got the name from my diagnostic center)
6. Compare the onclick handler to what it was referencing (in this case a dialog popup)
7.  Ran the popup to see if it was working by running this snippet in the bottom area in the console- yes
$('#pp-dialog-box').dialog({
                   title: 'Psychic Psyghtings Dialog Box',
                   minWidth: 970
               });8.  Tried to determine what the heck e is:

if($('#pp-dialog-box div.'+e).length){9. Ran what you were passing as e to determine if it was evaluating true - no

$('#pp-dialog-box.'+'#pp-dialog-box').length10. That is where your code ceases to function. You are trying to pass an id to something you have set up to recognize as a class (with the period)
So either remove the whole if statement, or change the parameter you pass to it (the ID)

[Alan Vende]

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

Nov 12, 2017 23:50:05 GMT -8 Alan Vende said:

Thanks so much.

My steps to troubleshoot were as follows.
1. Run my diagnostic center to verify that the plugin was running and what variables/manage it had set up. (not needed if it was my own forum)
2. open the developer tools
3. open the console and click your button to check for errors -none found
4. open the visual event extension I have on chrome to verify that an onclick handler had been attached to the button - yes
5. open the sources tab in developer tools and navigate to storage.proboards.com/6027654/js and thumb through all the javascript until I found the one for your plugin (which I got the name from my diagnostic center)
6. Compare the onclick handler to what it was referencing (in this case a dialog popup)
7.  Ran the popup to see if it was working by running this snippet in the bottom area in the console- yes
$('#pp-dialog-box').dialog({
                   title: 'Psychic Psyghtings Dialog Box',
                   minWidth: 970
               });8.  Tried to determine what the heck e is:

if($('#pp-dialog-box div.'+e).length){9. Ran what you were passing as e to determine if it was evaluating true - no

$('#pp-dialog-box.'+'#pp-dialog-box').length10. That is where your code ceases to function. You are trying to pass an id to something you have set up to recognize as a class (with the period)
So either remove the whole if statement, or change the parameter you pass to it (the ID)

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.

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

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

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

My steps to troubleshoot were as follows.
1. Run my diagnostic center to verify that the plugin was running and what variables/manage it had set up. (not needed if it was my own forum)
2. open the developer tools
3. open the console and click your button to check for errors -none found
4. open the visual event extension I have on chrome to verify that an onclick handler had been attached to the button - yes
5. open the sources tab in developer tools and navigate to storage.proboards.com/6027654/js and thumb through all the javascript until I found the one for your plugin (which I got the name from my diagnostic center)
6. Compare the onclick handler to what it was referencing (in this case a dialog popup)
7.  Ran the popup to see if it was working by running this snippet in the bottom area in the console- yes
$('#pp-dialog-box').dialog({
                   title: 'Psychic Psyghtings Dialog Box',
                   minWidth: 970
               });8.  Tried to determine what the heck e is:

if($('#pp-dialog-box div.'+e).length){9. Ran what you were passing as e to determine if it was evaluating true - no

$('#pp-dialog-box.'+'#pp-dialog-box').length10. That is where your code ceases to function. You are trying to pass an id to something you have set up to recognize as a class (with the period)
So either remove the whole if statement, or change the parameter you pass to it (the ID)

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