Use Developer Tools to figure out what is wrong with plugins

[Alan Vende]

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

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

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

What do you mean by "cheap"? Could you give me an example of what you mean? Sorry--the way you said it kind of confused me.

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

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

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

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

What do you mean by "cheap"? Could you give me an example of what you mean? Sorry--the way you said it kind of confused me.

some seamless experience involves recreating the wheel. Kind of like a cartoon was written frame by frame, it makes it seem like somethings stayed the same while other things moved. So if you clicked a link that changed the whole container, but rewrote everything you wanted to stay the same, it gives the appearance that some things did not change.

[Alan Vende]

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

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

What do you mean by "cheap"? Could you give me an example of what you mean? Sorry--the way you said it kind of confused me.

some seamless experience involves recreating the wheel. Kind of like a cartoon was written frame by frame, it makes it seem like somethings stayed the same while other things moved. So if you clicked a link that changed the whole container, but rewrote everything you wanted to stay the same, it gives the appearance that some things did not change.

I apologize, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓. I'm still confused.

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

Nov 15, 2017 11:38:24 GMT -8 Alan Vende said:

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

some seamless experience involves recreating the wheel. Kind of like a cartoon was written frame by frame, it makes it seem like somethings stayed the same while other things moved. So if you clicked a link that changed the whole container, but rewrote everything you wanted to stay the same, it gives the appearance that some things did not change.

I apologize, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ . I'm still confused.

Pretend you have a link that sets a background to be puppies and text to be woof. Then you click on that link again and it sets your background to be puppies and the text to be woof. And again and again. Every time you are loading new content BUT it looks like nothing has changed every time. So if you added the same content + new content, it would look as if the new content was the only thing that changed. (even though the background and the text was reset every time)

[Alan Vende]

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

Nov 15, 2017 11:38:24 GMT -8 Alan Vende said:

I apologize, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ . I'm still confused.

Pretend you have a link that sets a background to be puppies and text to be woof. Then you click on that link again and it sets your background to be puppies and the text to be woof. And again and again. Every time you are loading new content BUT it looks like nothing has changed every time. So if you added the same content + new content, it would look as if the new content was the only thing that changed.

But how do you go about doing that? I've isolated the table to try and re-create this. I have the table for the top, but for some reason, I cannot make it so, once clicked, it changes the information under it. It's in a plugin, so if you jump over to Alan's Plugins and More, I will make the plugin so members can see it (which I think it is, but could you just confirm that for me, please?)

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

Nov 15, 2017 12:08:39 GMT -8 Alan Vende said:

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

Pretend you have a link that sets a background to be puppies and text to be woof. Then you click on that link again and it sets your background to be puppies and the text to be woof. And again and again. Every time you are loading new content BUT it looks like nothing has changed every time. So if you added the same content + new content, it would look as if the new content was the only thing that changed.

But how do you go about doing that? I've isolated the table to try and re-create this. I have the table for the top, but for some reason, I cannot make it so, once clicked, it changes the information under it. It's in a plugin, so if you jump over to Alan's Plugins and More, I will make the plugin so members can see it (which I think it is, but could you just confirm that for me, please?)

I'm not admin lol so I cant see anything like plugins. Once clicked, output the whole table again except change the information under it is what I'm saying.

[Alan Vende]

No, I know. I made it so you could see it.

I have a few different plugins with a few different tables, but I'm going to change the permissions of the plugins so the one that is close is the one that is showing for you. I want to show you how close I am... I just cannot get it to even tab any of the content, for some reason--that's where I'm stuck, and you'll see what I mean once it's switched over.

It's switched over to the plugin I'm working on. It has the tabs at the top, but like I said, I cannot get it to change. It just won't do it for some reason. I have it where the table cell and the matching piece of content have the same class, but it won't open correctly.

Also, I would like it so there is a table cell that is not visible within the table, but shows upon opening of the button, if that makes sense. I can't seem to figure out how to do that, either, although by looking at Brian's source code, it seems "easy." (to him, anyway.) ... It works in his plugin (which is the one I'm using to "model" this, so to speak. I'm using his as the "it can be done, but how?" So far, I've gotten the bare bones of the table and so forth, but it won't change when the tabs are clicked, for some reason...

PS: Below the plugin I'm working on is a plugin that I created using W3Schools. That one is close to what I want, but how do I translate the "transition"? The W3Schools one has a transition of 0.3s

It looks so easy, but I can't get it to function properly...

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

Nov 15, 2017 15:07:24 GMT -8 Alan Vende said:

No, I know. I made it so you could see it.

I have a few different plugins with a few different tables, but I'm going to change the permissions of the plugins so the one that is close is the one that is showing for you. I want to show you how close I am... I just cannot get it to even tab any of the content, for some reason--that's where I'm stuck, and you'll see what I mean once it's switched over.

It's switched over to the plugin I'm working on. It has the tabs at the top, but like I said, I cannot get it to change. It just won't do it for some reason. I have it where the table cell and the matching piece of content have the same class, but it won't open correctly.

Also, I would like it so there is a table cell that is not visible within the table, but shows upon opening of the button, if that makes sense. I can't seem to figure out how to do that, either, although by looking at Brian's source code, it seems "easy." (to him, anyway.) ... It works in his plugin (which is the one I'm using to "model" this, so to speak. I'm using his as the "it can be done, but how?" So far, I've gotten the bare bones of the table and so forth, but it won't change when the tabs are clicked, for some reason...

PS: Below the plugin I'm working on is a plugin that I created using W3Schools. That one is close to what I want, but how do I translate the "transition"? The W3Schools one has a transition of 0.3s

It looks so easy, but I can't get it to function properly...

So there are no onclick attributes or click handlers attached to your tabs. So in order for them to do something, you will need to either make an onclick that goes to a function that changes the content or an .click that does it. such as:

$('.pp-alert-welcome.pad-all').html('New Content')
And on a different tab you would have

$('.pp-alert-welcome.pad-all').html('New Content2')

[Alan Vende]

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

Nov 15, 2017 15:07:24 GMT -8 Alan Vende said:

No, I know. I made it so you could see it.

I have a few different plugins with a few different tables, but I'm going to change the permissions of the plugins so the one that is close is the one that is showing for you. I want to show you how close I am... I just cannot get it to even tab any of the content, for some reason--that's where I'm stuck, and you'll see what I mean once it's switched over.

It's switched over to the plugin I'm working on. It has the tabs at the top, but like I said, I cannot get it to change. It just won't do it for some reason. I have it where the table cell and the matching piece of content have the same class, but it won't open correctly.

Also, I would like it so there is a table cell that is not visible within the table, but shows upon opening of the button, if that makes sense. I can't seem to figure out how to do that, either, although by looking at Brian's source code, it seems "easy." (to him, anyway.) ... It works in his plugin (which is the one I'm using to "model" this, so to speak. I'm using his as the "it can be done, but how?" So far, I've gotten the bare bones of the table and so forth, but it won't change when the tabs are clicked, for some reason...

PS: Below the plugin I'm working on is a plugin that I created using W3Schools. That one is close to what I want, but how do I translate the "transition"? The W3Schools one has a transition of 0.3s

It looks so easy, but I can't get it to function properly...

So there are no onclick attributes or click handlers attached to your tabs. So in order for them to do something, you will need to either make an onclick that goes to a function that changes the content or an .click that does it. such as:

$('.pp-alert-welcome.pad-all').html('New Content')
And on a different tab you would have

$('.pp-alert-welcome.pad-all').html('New Content2')

When I put those into the JS section, although those classes are in my HTML, they didn't change on click, for some reason.

Is there something I'm missing? Or would I put those into the Footer with the rest of the code?

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

Nov 15, 2017 16:20:52 GMT -8 Alan Vende said:

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

So there are no onclick attributes or click handlers attached to your tabs. So in order for them to do something, you will need to either make an onclick that goes to a function that changes the content or an .click that does it. such as:

$('.pp-alert-welcome.pad-all').html('New Content')
And on a different tab you would have

$('.pp-alert-welcome.pad-all').html('New Content2')

When I put those into the JS section, although those classes are in my HTML, they didn't change on click, for some reason.

Is there something I'm missing? Or would I put those into the Footer with the rest of the code?

Those are for the onclick or click codes that you need to add. I didn't provide you with a full code, just a snippet.

[Chris]

Nov 15, 2017 7:59:50 GMT -8 Alan Vende said:

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?)

I'm not quite sure why you are hung up on the pagination since all I did was use it as an example to demonstrate the dialog, I could just as easily used the navigation tree or the post options dropdown to show you that something on the page can be placed inside a dialog box, it has nothing to do with PB pagination other than that is what was chosen as the example. Once that point sinks in then the next step is realizing you can create your own static element for use in your own plugin.
More often than not usage of complex dialog content entails specifying a static element (read that as already there, does not need to be created dynamically through script) on the page rather than creating the content "on the fly" as you have been doing. For simple stuff like <p>test</p> on the fly is fine but as the content gets more complex and needs its own handlers to interact with the user (such as the tab effect you say you are trying to achieve) then it is much easier to create a static element that you can then attach events and such without first having to dynamically create it through string manipulation from a javascript source thus making it that much easier to envision the structure and write code for it as well as making it much easier to maintain should you wish to make changes to that structure in the future. A major benefit of this approach is also browser performance, if the structure remains unchanged each time you invoke the dialog then having the browser reparse and repaint the same exact code over and over is absolutely unnecessary.

If you notice, I gave the paginator which only had a class (and no ID)  an ID of "dapaginator" so i can then reference it later when creating the dialog. That ID is purely arbitrary the same way you would decide what to call a variable you wanted to use in your code so don't get hung up on "dapaginator", call it whatever you will. The main point is the structure has to have an ID so you can then reference that ID

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


<p id="myTest" style="display:none">Test</p>

The display:none is optional and keeps it hidden on the page until it gets displayed in the dialog which then automatically removes that display:none

You mentioned Brian's custom miniprofile plugin so I downloaded it to see what you were talking about regarding tabbable structure and all you need to do is go into the plugin build mode and look in the global footer under the components tab to see the structure. The structure is static (drop it in the footer and it appears on the page without having to use javascript to create it on the fly), has an ID of "mp-dialog-holder" so it can be referenced when creating the dialog and there is code that adds events and such so the "tabs" switch to different contents when you click on them (see spoiler). You would of course need to write your own code to match whatever structure you come up with for your dialog. It's a fairly complex structure which would really suck if you had to use markup to create that on the page each time the dialog was open.

SPOILER: Click to show

$(document).ready(function(){

pbp['custom_mp'].run();



$('#mp-dialog-holder > .list .item a').click(function(){

pbp['custom_mp'].window($(this).attr('class'));

});



$('#mp-dialog-holder .button').click(function(){

$(this).hide().parent().children('.example').slideDown();

});



if(pb.data('user').is_staff){

if(!pbp['custom_mp'].settings.show_help)

$('#content').prepend('<div id="mp-custom-install" class="container"><div class="title-bar"><h2>Custom Mini-Profile Creator</h2></div><div class="content pad-all">Thanks for installing the Custom Mini-Profile Creator plugin! <a>Click here to get started.</a><br /><br />Only staff can see this message. To disable this message go to <b>Plugins > Manage > Custom Mini-Profile Creator</b> in your admin area and change the <b>Show Help</b> option.</div></div>');

if(pbp['custom_mp'].settings.show_help <= 1)

$('#pbn-bar').css('width','auto').append('<a id="pbn-mp"><img src="'+pbp['custom_mp'].images.icon+'"></a>');

$('#pbn-mp, #mp-custom-install .title-bar h2, #mp-custom-install > .content > a').click(function(){

pbp['custom_mp'].window('mp-dialog-welcome');

});

}



});

[Alan Vende]

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

Nov 15, 2017 16:20:52 GMT -8 Alan Vende said:

When I put those into the JS section, although those classes are in my HTML, they didn't change on click, for some reason.

Is there something I'm missing? Or would I put those into the Footer with the rest of the code?

Those are for the onclick or click codes that you need to add. I didn't provide you with a full code, just a snippet.

Right, but I thought that since I had those in my HTML already that, if I put them into my JS component, that they would work. What else would be needed? I have the skeleton there. The only thing that is needed now is to make it so it can change on click of the different tabs, which is what I'm stuck on.

Nov 15, 2017 16:50:47 GMT -8 Chris said:

Nov 15, 2017 7:59:50 GMT -8 Alan Vende said:

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?)

I'm not quite sure why you are hung up on the pagination since all I did was use it as an example to demonstrate the dialog, I could just as easily used the navigation tree or the post options dropdown to show you that something on the page can be placed inside a dialog box, it has nothing to do with PB pagination other than that is what was chosen as the example. Once that point sinks in then the next step is realizing you can create your own static element for use in your own plugin.
More often than not usage of complex dialog content entails specifying a static element (read that as already there, does not need to be created dynamically through script) on the page rather than creating the content "on the fly" as you have been doing. For simple stuff like <p>test</p> on the fly is fine but as the content gets more complex and needs its own handlers to interact with the user (such as the tab effect you say you are trying to achieve) then it is much easier to create a static element that you can then attach events and such without first having to dynamically create it through string manipulation from a javascript source thus making it that much easier to envision the structure and write code for it as well as making it much easier to maintain should you wish to make changes to that structure in the future. A major benefit of this approach is also browser performance, if the structure remains unchanged each time you invoke the dialog then having the browser reparse and repaint the same exact code over and over is absolutely unnecessary.

If you notice, I gave the paginator which only had a class (and no ID)  an ID of "dapaginator" so i can then reference it later when creating the dialog. That ID is purely arbitrary the same way you would decide what to call a variable you wanted to use in your code so don't get hung up on "dapaginator", call it whatever you will. The main point is the structure has to have an ID so you can then reference that ID

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


<p id="myTest" style="display:none">Test</p>

The display:none is optional and keeps it hidden on the page until it gets displayed in the dialog which then automatically removes that display:none

You mentioned Brian's custom miniprofile plugin so I downloaded it to see what you were talking about regarding tabbable structure and all you need to do is go into the plugin build mode and look in the global footer under the components tab to see the structure. The structure is static (drop it in the footer and it appears on the page without having to use javascript to create it on the fly), has an ID of "mp-dialog-holder" so it can be referenced when creating the dialog and there is code that adds events and such so the "tabs" switch to different contents when you click on them (see spoiler). You would of course need to write your own code to match whatever structure you come up with for your dialog. It's a fairly complex structure which would really suck if you had to use markup to create that on the page each time the dialog was open.

SPOILER: Click to show

$(document).ready(function(){

pbp['custom_mp'].run();



$('#mp-dialog-holder > .list .item a').click(function(){

pbp['custom_mp'].window($(this).attr('class'));

});



$('#mp-dialog-holder .button').click(function(){

$(this).hide().parent().children('.example').slideDown();

});



if(pb.data('user').is_staff){

if(!pbp['custom_mp'].settings.show_help)

$('#content').prepend('<div id="mp-custom-install" class="container"><div class="title-bar"><h2>Custom Mini-Profile Creator</h2></div><div class="content pad-all">Thanks for installing the Custom Mini-Profile Creator plugin! <a>Click here to get started.</a><br /><br />Only staff can see this message. To disable this message go to <b>Plugins > Manage > Custom Mini-Profile Creator</b> in your admin area and change the <b>Show Help</b> option.</div></div>');

if(pbp['custom_mp'].settings.show_help <= 1)

$('#pbn-bar').css('width','auto').append('<a id="pbn-mp"><img src="'+pbp['custom_mp'].images.icon+'"></a>');

$('#pbn-mp, #mp-custom-install .title-bar h2, #mp-custom-install > .content > a').click(function(){

pbp['custom_mp'].window('mp-dialog-welcome');

});

}



});

I was stuck on the pagination because that's what you had given me as the example, so I thought to use that to see what it did, which is why I asked about it further when it didn't work. I then realized that I already had a dialog box on a Custom Page, and am using that to house the table for the information.

Brian's plugin is what inspired this whole thing. I thought that since he could do it, so could I, but I cannot. I guess I'm not fully grasping it. JS has never been my strongpoint, hence all of the questions... I apologize for being an idiot...

Since you replied to me earlier, I realized that I already had a dialog box, like I said, and I pasted it into a new plugin so I could try to get the dialog box itself to work correctly. I'm now using a PB-styled box to do it instead of creating a popup in its own right. I just don't want to mess up and use something that's already there (like the pagination, to continue with that example), and screw it up...

I apologize again, P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ and Chris, for being clueless to this... Like I said, JS is not my strongpoint. Whenever I've done things like Codecademy to strengthen my skills, I cannot get it to work, even if I use the examples given by Codecademy, which is why I like seeing how things work that others create, but even then sometimes it doesn't sink in... I don't know how to explain that...

I am, however, tweaking Brian's and putting it into a regular container with the standard classes of container boards, title-bar, content. That's where I am now--doing it from a container so I can more easily style it and do forth (put the title in the center, etc.)

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

I still think we need a chat session lol

[Alan Vende]

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

I still think we need a chat session lol

Did I miss that part?

How would we chat?

[Alan Vende]

Oh, Chris , I feel like I should clarify something: I have it to where something pops up on button click, but what I can't get to function is what pops up on the button click. It is like Brian's tabbed table. I'm guessing I need an onclick like the one to open the dialog box initially?

P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓ , I feel like you said that...

But, going off of Brian's code, there are no onclick events within the HTML, so I'm guessing that he coded them into the JS? I attempted looking through his code in the Custom Mini-Profile Creator, which is what makes me think this, since all there is in the Footer is the contents of the Help Window itself.

Based on that, I'm guessing the onclick events have to be coded within the JS?