Theme Selector (basic edition)

[Retread]

What this plugin does:

1. Place an icon on the PBN bar.
   
   
2. Clicking the icon sends the user to their Edit Profile - Settings tab.
   
   
3. The Settings tab is temporarily modified.
   
   
4. User selects the desired theme from the dropdown.
   
   
5. Clicking the provided button Saves the theme, then after a 300mS delay, reloads the page.
   
   
6. If desired, the user can repeatedly select different themes and see them displayed.
   
   
7. The user can navigate back to the forum, using the Navigation Menu, Navigation Bar, etc.

Here's the Javascript Component (the only component in the plugin):

/***** Experimental. Use at your own risk!  *****/

// This first section places the Select Theme icon on the PBN bar
// The URL for the user's Settings page has /ThemeSelect appended to it.
$(function() {
   $('#pbn-bar').append(
       $('<a/>').attr({
           href: proboards.dataHash.user.url + '/settings/ThemeSelect',
       }).css({
           cursor: 'pointer',
           'margin-top': '3px',
           display: 'inline-block',
           float: 'left',
           padding: '0px 3px',
       })
       .append($('<img/>')
           .attr({src: '//storage.proboards.com/6994517/images/nqkVSvmtyjbEmTckFTNb.png',
                  alt: 'Select Theme',
                  title: 'Select Theme',
                 })
              ))
       .css('width', 'auto'); // fix PBN bar width

// everything from here to the end pertains to the ThemeSelect 'page'    
   if (window.location.href.indexOf('ThemeSelect') > 0) {
             
// rename title bar.        
       $('div.container.edit-user.confirm-ignore-changes div.title-bar h1').html('Theme Selector (basic edition)').attr({'title': 'No warrantee expressed or implied'});
       
// hide elements that are not needed to switch themes.
       $('form.form_user_edit_settings h3').hide();
       $('.ui-tabMenu').hide();
       $('form.form_user_edit_settings label').hide();
       $('form.form_user_edit_settings label:contains(Forum Theme)').show();
       $('form.form_user_edit_settings div.description').hide();
       $('form.form_user_edit_settings div.description:contains(Displays the available theme of your choice.)').show();
       $('form.form_user_edit_settings span.radio').hide();
       $('form.form_user_edit_settings #drafts.hide').hide();
       $('form.form_user_edit_settings div#bbcode').hide();
       $('form.form_user_edit_settings textarea').hide();
       $('form.form_user_edit_settings select.display-group-id').hide();
       $('form.form_user_edit_settings select[name="time_style"]').hide();
       $('form.form_user_edit_settings select.time-chooser').hide();
       $('form.form_user_edit_settings br').hide();
       $('form.form_user_edit_settings div#cloudinary-settings-wrapper').hide();
       $('form.form_user_edit_settings a.delete-user-link').hide();
       $('.form_user_edit_settings input').hide();
       
// This final section is a bit strange.
// For some reason, when a button is placed anywhere within the form
// it will trigger an event to save the selected theme.
// I exploited this odd behavior then added an onclick,
// (with delay to allow the theme to be saved before leaving),
// to redirect back to the ThemeSelect page.
// another bit of unexpected behavior:
// value does not create the text in this button so I added .html as a workaround.
       
       $('.form_user_edit_settings input:last-of-type').before(
       $('<button>')
           .attr({
               onclick: " setTimeout(function(){  window.location.href= proboards.dataHash.user.url + '/settings/ThemeSelect' }, 300); ", // errors occur regularly with less than 190ms of delay.
               title: 'Click this to save the Theme and view changes.',
               value : 'save and reload', // This doesn't work so I used .html to create text in the button.
           })
           .html('Save Theme & Reload Page')
       )
   }
});
This is currently functional. I'm okay with it the way it is, but I'm open to improving it and learning, hence this thread.

A friend on my home forum helped me with the first section. The rest if it is my own butchery (Chris will probably refer to some of it as 'malformed usage' 😃).

Questions for coders:

As most of you know, I can barely crawl when it comes to Javascript and jQuery. Is there anything obviously lacking or could be done a simpler/better way?

Is there a more elegant way than window.location.href.indexOf ?

Does anyone know why placing any button anywhere within form.form_user_edit_settings cause clicking the button to save account settings regardless of any attributes assigned to the button?

Does anyone know why value doesn't determine the displayed text for the button in this particular instance?

Can anyone suggest a better way than a fixed timeout, to wait until the theme has been saved before reloading the page?

Theme Selector basic edition.pbp (1.51 KB)

[Chris]

Oct 23, 2020 12:11:12 GMT -8 Retread said:

Questions for coders:

As most of you know, I can barely crawl when it comes to Javascript and jQuery. Is there anything obviously lacking or could be done a simpler/better way?

Is there a more elegant way than window.location.href.indexOf ?

Does anyone know why placing any button anywhere within form.form_user_edit_settings cause clicking the button to save account settings regardless of any attributes assigned to the button?

Does anyone know why value doesn't determine the displayed text for the button in this particular instance?

Can anyone suggest a better way than a fixed timeout, to wait until the theme has been saved before reloading the page?

View Attachment

indexOf was quickest last time I saw any benchmarks on the subject.

The <button> element defaults to a type="submit" attribute unless you specify a different type such as type="reset" or type="button". Also if you do not specify the id of an existing <form> in the form attribute of the button then by default the button will adopt any form that might be wrapping it. These two things put together mean a button dropped naked into a form will submit that form in the absence of explicit attributes saying different.

<button type="button" form="thatotherform" value="buttonvalue">Click Me!</button>

Unlike the <input type="button"> the <button></button> can contain markup within it so the value attribute is not used on this element as dual purpose serving as both the caption for the button as well as form data like its input cousin.


As for that hit or miss timeout, it would be better to listen for the completion of the ajax communication between the browser and PB server to identify the precise time when a theme has been saved, I'd suggest jQuery's ajaxComplete for that task.

Finally, reloading of a page has always been frowned upon since it deprives the user a chance to view the ads. In this case however since it is tied to a user action it probably is allowed provided the results of said action was unambiguous (i.e. not a secondary hidden action piggybacking on a primary). Although changing to a new theme would intuitively lead one to believe (imho) they would see an immediate change when applied, this historically has not been the case with Proboards, so to disambiguate this new behavior it might be wise to place a small warning near the crime scene to alert the user that this will indeed reload the page.

[Retread]

Chris , thanks a million for that detailed description on the default properties of the button element. That will help me immensely with another matter I'm working on.

Oct 25, 2020 0:15:07 GMT -8 Chris said:

As for that hit or miss timeout, it would be better to listen for the completion of the ajax communication between the browser and PB server to identify the precise time when a theme has been saved, I'd suggest jQuery's ajaxComplete for that task.

This is new territory for me. I came up with does seem to work but I'm wondering if I can and should somehow identify the specific ajax request?

Looking at the syntax:
$(document).ajaxComplete(function(event,xhr,options))
Can I name an event when I use ajaxStart on the empty function I'm using to initiate a request, then specify it in ajaxComplete?

Anyway, here's where I am at the moment and it seems to work.

SPOILER: Click to show

/***** Experimental. Use at your own risk!  *****/

// This first section places the Select Theme icon on the PBN bar
// The URL for the user's Settings page has /ThemeSelect appended to it.
$(function() {
   $('#pbn-bar').append(
       $('<a/>').attr({
           href: proboards.dataHash.user.url + '/settings/ThemeSelect',
       }).css({
           cursor: 'pointer',
           'margin-top': '3px',
           display: 'inline-block',
           float: 'left',
           padding: '0px 3px',
       })
       .append($('<img/>')
           .attr({src: '//storage.proboards.com/6994517/images/nqkVSvmtyjbEmTckFTNb.png',
                  alt: 'Select Theme',
                  title: 'Select Theme',
                 })
              ))
       .css('width', 'auto'); // fix PBN bar width

   
// everything from here to the end pertains to the ThemeSelect 'page'    
   if (window.location.href.indexOf('ThemeSelect') > 0) {
             
// rename title bar.        
       $('div.container.edit-user.confirm-ignore-changes div.title-bar h1').html('Theme Selector (basic edition)').attr({'title': 'No warrantee expressed or implied'});
       
// hide elements that are not needed to switch themes.
       $('form.form_user_edit_settings h3').hide();
       $('.ui-tabMenu').hide();
       $('form.form_user_edit_settings label:not(:contains(Forum Theme)) ').hide();
       $('form.form_user_edit_settings div.description:not(:contains(Displays the available theme of your choice.))').hide();
       $('form.form_user_edit_settings span.radio').hide();
       $('form.form_user_edit_settings #drafts.hide').hide();
       $('form.form_user_edit_settings div#bbcode').hide();
       $('form.form_user_edit_settings textarea').hide();
       $('form.form_user_edit_settings select.display-group-id').hide();
       $('form.form_user_edit_settings select[name="time_style"]').hide();
       $('form.form_user_edit_settings select.time-chooser').hide();
       $('form.form_user_edit_settings br').hide();
       $('form.form_user_edit_settings div#cloudinary-settings-wrapper').hide();
       $('form.form_user_edit_settings a.delete-user-link').hide();
       $('.form_user_edit_settings input').hide();
       
//  Poised to reload page upon ajaxComplete
       $(document).ajaxComplete(function(){
 window.location.href= proboards.dataHash.user.url + '/settings/ThemeSelect';
});  
       
// Save theme selection and initiate ajax communication        
       $('.form_user_edit_settings input:last-of-type').before(
       $('<button>')
           .attr({
               onclick: "ajaxStart(function(){}); ",
               title: 'Click this to save Theme and view changes.',
               value : 'save and reload',
           })
           .html('Save Theme selection & Reload page')
       )
   }
});

Oct 25, 2020 0:15:07 GMT -8 Chris said:

Finally, reloading of a page has always been frowned upon since it deprives the user a chance to view the ads. In this case however since it is tied to a user action it probably is allowed provided the results of said action was unambiguous (i.e. not a secondary hidden action piggybacking on a primary). Although changing to a new theme would intuitively lead one to believe (imho) they would see an immediate change when applied, this historically has not been the case with Proboards, so to disambiguate this new behavior it might be wise to place a small warning near the crime scene to alert the user that this will indeed reload the page.

I reckon in this case it will be okay. In the normal Edit Profile Settings tab, when the Save Account Settings button is clicked, we stay on the same page and no new ads are displayed. I guess an ajax request is initiated and there's a forum request that occurs?


When the user is first delivered to the ThemeSelect page, they see ads, just as they would if they went to the Edit Profile Settings tab. By re-navigating to the ThemeSelect page after clicking the button, they get a fresh set of ads.

Regarding a warning at the scene of the crime, does the text in the button seem to have that covered? Here's a screenshot (with ad nodes intentionally removed in the browser for brevity).

[Chris]

Oct 25, 2020 13:07:08 GMT -8 Retread said:

This is new territory for me. I came up with does seem to work but I'm wondering if I can and should somehow identify the specific ajax request?

Looking at the syntax:

$(document).ajaxComplete(function(event,xhr,options))

Can I name an event when I use ajaxStart on the empty function I'm using to initiate a request, then specify it in ajaxComplete?

ajaxStart would be a different phase occurring prior to when the actual request gets sent, but that won't solve your problem since the reason we would be using ajaxComplete is to know when the request has been completed. The request could take 7ms for one person and 240ms for someone else so not using a fixed time unit like you were was the gist, it might work well for you but not so well for another.
Since every ajax request has its own endpoint you can generally distinguish among them by examining the URL in your ajaxComplete function to see if this particular request is the one you are after: options.url === "https://the/gURL/I/want"
You can see the list of possible ajax endpoint urls by examining proboards.routeMap in your console then use the route method to grab the particular one you want. In this case the route we are monitoring for theme id updates would be edit_unified which currently has an endpoint of '/user/:user_id/edit'. Note that the part that starts with a colon (":user_id") is a variable that would be filled in by a supplied value: options.url === proboards.route('edit_unified', {user_id:pb.data('profileUserId')})

ETA: It might be worthwhile to also record the current theme prior to communication in order to use for comparison in the response to ensure the theme has indeed changed before doing the deed since edit_unified changes several options not just theme and could conceivably be triggered by some other code.

Oct 25, 2020 13:07:08 GMT -8 Retread said:

Anyway, here's where I am at the moment and it seems to work.

SPOILER: Click to show

/***** Experimental. Use at your own risk!  *****/

// This first section places the Select Theme icon on the PBN bar
// The URL for the user's Settings page has /ThemeSelect appended to it.
$(function() {
   $('#pbn-bar').append(
       $('<a/>').attr({
           href: proboards.dataHash.user.url + '/settings/ThemeSelect',
       }).css({
           cursor: 'pointer',
           'margin-top': '3px',
           display: 'inline-block',
           float: 'left',
           padding: '0px 3px',
       })
       .append($('<img/>')
           .attr({src: '//storage.proboards.com/6994517/images/nqkVSvmtyjbEmTckFTNb.png',
                  alt: 'Select Theme',
                  title: 'Select Theme',
                 })
              ))
       .css('width', 'auto'); // fix PBN bar width

   
// everything from here to the end pertains to the ThemeSelect 'page'    
   if (window.location.href.indexOf('ThemeSelect') > 0) {
             
// rename title bar.        
       $('div.container.edit-user.confirm-ignore-changes div.title-bar h1').html('Theme Selector (basic edition)').attr({'title': 'No warrantee expressed or implied'});
       
// hide elements that are not needed to switch themes.
       $('form.form_user_edit_settings h3').hide();
       $('.ui-tabMenu').hide();
       $('form.form_user_edit_settings label:not(:contains(Forum Theme)) ').hide();
       $('form.form_user_edit_settings div.description:not(:contains(Displays the available theme of your choice.))').hide();
       $('form.form_user_edit_settings span.radio').hide();
       $('form.form_user_edit_settings #drafts.hide').hide();
       $('form.form_user_edit_settings div#bbcode').hide();
       $('form.form_user_edit_settings textarea').hide();
       $('form.form_user_edit_settings select.display-group-id').hide();
       $('form.form_user_edit_settings select[name="time_style"]').hide();
       $('form.form_user_edit_settings select.time-chooser').hide();
       $('form.form_user_edit_settings br').hide();
       $('form.form_user_edit_settings div#cloudinary-settings-wrapper').hide();
       $('form.form_user_edit_settings a.delete-user-link').hide();
       $('.form_user_edit_settings input').hide();
       
//  Poised to reload page upon ajaxComplete
       $(document).ajaxComplete(function(){
 window.location.href= proboards.dataHash.user.url + '/settings/ThemeSelect';
});  
       
// Save theme selection and initiate ajax communication        
       $('.form_user_edit_settings input:last-of-type').before(
       $('<button>')
           .attr({
               onclick: "ajaxStart(function(){}); ",
               title: 'Click this to save Theme and view changes.',
               value : 'save and reload',
           })
           .html('Save Theme selection & Reload page')
       )
   }
});

Oct 25, 2020 0:15:07 GMT -8 Chris said:

Finally, reloading of a page has always been frowned upon since it deprives the user a chance to view the ads. In this case however since it is tied to a user action it probably is allowed provided the results of said action was unambiguous (i.e. not a secondary hidden action piggybacking on a primary). Although changing to a new theme would intuitively lead one to believe (imho) they would see an immediate change when applied, this historically has not been the case with Proboards, so to disambiguate this new behavior it might be wise to place a small warning near the crime scene to alert the user that this will indeed reload the page.

I reckon in this case it will be okay. In the normal Edit Profile Settings tab, when the Save Account Settings button is clicked, we stay on the same page and no new ads are displayed. I guess an ajax request is initiated and there's a forum request that occurs?


When the user is first delivered to the ThemeSelect page, they see ads, just as they would if they went to the Edit Profile Settings tab. By re-navigating to the ThemeSelect page after clicking the button, they get a fresh set of ads.

Regarding a warning at the scene of the crime, does the text in the button seem to have that covered? Here's a screenshot (with ad nodes intentionally removed in the browser for brevity).

The button also being the warning is brilliant.

I haven't actually executed the code except in my head but I would expect you get an error on button click since there is no ajaxStart on the global window object being it is actually a method on jQuery's prototype chain window.jQuery.fn.ajaxStart

My understanding is it is not a matter of whether the user sees a new set of ads upon page reload but whether they would have been given a chance to interact with that original ad if they so chose (in this case I think they have been given that opportunity). The advertising companies are paying for that opportunity when the roulette wheel spins so any code that interferes with that opportunity is basically going against TOS.

[Retread]

Yogi has been trying to instill some good habits in me so I cleaned up the coding a bit. Here's where I currently stand:

SPOILER: Click to show

/***** Experimental. Use at your own risk!  *****/

// Place the Select Theme icon on the PBN bar.
// The URL for the current user's Settings page has /ThemeSelect appended to it.
$(function() {
   $('#pbn-bar').append(
       $('<a/>').attr({
           href: proboards.dataHash.user.url + '/settings/ThemeSelect',
       })
       .css({
           cursor: 'pointer',
           'margin-top': '3px',
           display: 'inline-block',
           float: 'left',
           padding: '0px 3px',
       })
       .append($('<img/>')
               .attr({src: '//storage.proboards.com/6994517/images/nqkVSvmtyjbEmTckFTNb.png',
                      alt: 'Select Theme',
                      title: 'Select Theme',
                     })
              ))
       .css('width', 'auto'); // fix PBN bar width
   
   // everything from here to the end pertains to the ThemeSelect 'page'    
   if (window.location.href.indexOf('ThemeSelect') < 0) {return;}
   
   // rename title bar.
   $('div.container.edit-user.confirm-ignore-changes div.title-bar h1').text('Theme Selector (basic edition)').attr({'title': 'No warrantee expressed or implied'});
       
// hide elements that are not needed to switch themes.
   var $form = $('form.form_user_edit_settings');
       $('h3', $form).hide();
       $('.ui-tabMenu').hide();
       $('label:not(:contains(Forum Theme))',$form).hide();
       $('div:not(:contains(Displays the available theme of your choice.))',$form).hide();
       $('select:not(.theme-chooser)',$form).hide();
       $('a.delete-user-link',$form).hide();
       $('br',$form).hide();
       $('span.radio',$form).hide();
       $('textarea',$form).hide();
       $('input',$form).hide();

   //  Poised to reload page upon ajaxComplete
   $(document).ajaxComplete(function(){
       window.location.href= proboards.dataHash.user.url + '/settings/ThemeSelect';
   });  
       
// Save theme selection and initiate ajax communication    
       $('.form_user_edit_settings input:last-child').before(
           $('<button type="submit">')
           .attr({
               title: 'Click this to save Theme and view changes.',
           })
           .css({
               'margin-top':'-3px',
           })
           .text('Save Theme selection & Reload page')
       )
});

Oct 31, 2020 0:07:49 GMT -8 Chris said:

ETA: It might be worthwhile to also record the current theme prior to communication in order to use for comparison in the response to ensure the theme has indeed changed before doing the deed since edit_unified changes several options not just theme and could conceivably be triggered by some other code.

There's always value in looking at all the what ifs but so far I haven't found any possible problems. What I do know is that what's going on in other browser tabs won't affect what's happening in this tab. And the only way to initiate the communication in this tab is to click the button. Whatever is in the select will be the saved theme, regardless if it is the same or different than the current theme. The only way to change what's in the select is to actively change it. And there are no other selects or inputs available for us to change, since they are all hidden.

Oct 31, 2020 0:07:49 GMT -8 Chris said:

I haven't actually executed the code except in my head but I would expect you get an error on button click since there is no ajaxStart on the global window object being it is actually a method on jQuery's prototype chain window.jQuery.fn.ajaxStart

It doesn't cause an error but it didn't seem to do anything useful either.

This bit is looking for completion of any ajax communication. And I don't think there is any other communication that will occur when on that 'page' other than that which is initiated by the submit?
//  Poised to reload page upon ajaxComplete
       $(document).ajaxComplete(function(){
 window.location.href= proboards.dataHash.user.url + '/settings/ThemeSelect';
});  

I'm almost tempted to leave it as-is but I think I could learn something, by attempting to specify which event we're listening for. Plus there's the matter of doing things 'right'. I tried replacing that with this:
   //  Poised to reload page upon ajaxComplete
       $(document).ajaxComplete(function( event, xhr, settings ){
           if (options.url === proboards.route('edit_unified', {user_id:proboards.dataHash.user.url})){
               window.location.href= proboards.dataHash.user.url + '/settings/ThemeSelect';
           }
       });  
But when clicking the button, the theme is saved (the saved thingy displays and if we navigate to a different page we see the new theme) but the page doesn't reload.

The console shows this error:

SPOILER: Click to show


Uncaught ReferenceError: options is not defined
   <anonymous> https://storage.proboards.com/7181360/js/VykrUPknzLvSdWvwUyso.js:46
   dispatch https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   r https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   trigger https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   trigger https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   i https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   u https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   send https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   ajax https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   ajax https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   standard_user_edit_common https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   submit https://imageswap3.boards.net/user/1/settings/ThemeSelect:1427
   _submit https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   _create https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   dispatch https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   r https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   add https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   on https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   each https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   each https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   on https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   bind https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   _create https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   _createWidget https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   o][t https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   r.widget.bridge/r.fn[a]/< https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   each https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   each https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   a https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   <anonymous> https://imageswap3.boards.net/user/1/settings/ThemeSelect:1423
   ready https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   i https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   fireWith https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   ready https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   D https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   bindReady https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   ready https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   init https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   I https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   support https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   <anonymous> https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
   <anonymous> https://storage.proboards.com/forum/js/proboards.combined_1091.js:1
VykrUPknzLvSdWvwUyso.js:46:17

Can you suggest some clues as to how to proceed from here?

[Chris]

Since your signature for ajaxComplete uses "settings" as the variable name of the third parameter instead of "options" then that would have to be adjusted accordingly

[Retread]

(third parameter)

SPOILER: Click to show

Okay, this doesn't throw an error in the console but it doesn't reload the page:

/* This section doesn't reload the page    */
   //  Poised to reload page upon ajaxComplete
       $(document).ajaxComplete(function( event, xhr, options ){
           if (options.url === proboards.route('edit_unified', {user_id:proboards.dataHash.user.url})){
               window.location.href= proboards.dataHash.user.url + '/settings/ThemeSelect';
           }
       });
   /* End of Section */

Upon pressing the button, I get a new line in the console that looks like this:

XHR POST https://imageswap3.boards.net/user/1/edit/update

Clicking that expands it. Then clicking the Response tab shows a JSON entry I suppose might help us. I expanded and copied that but unfortunately most of the indentation doesn't keep.


XHRPOSThttps://imageswap3.boards.net/user/1/edit/update
[HTTP/2 200 OK 232ms]

   
   pb_data Object { forum_url: "imageswap3.boards.net", maintenance_mode: 0, image_path: "//storage.proboards.com/forum/images", … }
   forum_url "imageswap3.boards.net"
   route Object { name: "update_unified", params: {…} }
   name "update_unified"
   params Object { user_id: "1" }
   user_id "1"
   locale_settings Object { thousands_separator: ",", amcharts_date_format: "MM/DD/YYYY", input_date_placeholder: "mm/dd/yyyy", … }
   thousands_separator ","
   amcharts_date_format "MM/DD/YYYY"
   input_date_placeholder "mm/dd/yyyy"
   input_time_format 12
   input_time_placeholder "hh:mm pp"
   input_date_format "%m/%d/%Y"
   input_date_regex "^(\\d{2})/(\\d{2})/(\\d{4})$"
   maintenance_mode 0
   image_path "//storage.proboards.com/forum/images"
   default_avatar "//storage.proboards.com/forum/images/defaultavatar.png"
   search_system 1
   ad_free 1
   insite_path ""
   content_score 0

I don't know if I'm even looking in the right place.
I thought maybe
proboards.route should be changed to proboards.route.params
and/or
edit_unified should be changed to update_unified
but changing either or both of those still won't satisfy the if.


If it helps, here's a copy of the plugin in its semi-functional state:

Theme Selector basic edition broken.pbp (1.35 KB)

[Chris]

Nov 1, 2020 10:44:46 GMT -8 Retread said:

Okay, this doesn't throw an error in the console but it doesn't reload the page:

/* This section doesn't reload the page    */
   //  Poised to reload page upon ajaxComplete
       $(document).ajaxComplete(function( event, xhr, options ){
           if (options.url === proboards.route('edit_unified', {user_id:proboards.dataHash.user.url})){
               window.location.href= proboards.dataHash.user.url + '/settings/ThemeSelect';
           }
       });
   /* End of Section */

The "update_unified" appears to be the correct ajax call. You're however passing in the **URL** of the user rather than the **ID**
It's a simple matter of running the command in a console to see the results:

• proboards.route('update_unified')
  yields: /user/:user_id/edit/update
  
  
• proboards.route('update_unified', {user_id:proboards.dataHash.user.url});

/* note: proboards.dataHash.user.url == "/user/1234"  */
  yields: /user//user/1234/edit/update
  
  
• proboards.route('update_unified', {user_id:pb.data('profileUserId')});

/* note: pb.data('profileUserId') == pb.data('profile_id') == "1234" */
/* note2: proboards.dataHash.user.id refers to the logged in viewer and not necessarily the id of the profile being viewed although in this case the two are one in the same since staff cannot edit a user's setting page for them */
  yields:/user/1234/edit/update ✅

In any event you can always set a breakpoint or drop a debugger statement within your function to see the values that lead to the decisions being made in your conditionals

[Retread]

Nov 1, 2020 22:33:33 GMT -8 Chris said:

The "update_unified" appears to be the correct ajax call.

Well at least I got one thing right.

Nov 1, 2020 22:33:33 GMT -8 Chris said:

You're however passing in the **URL** of the user rather than the **ID**
It's a simple matter of running the command in a console to see the results

Ah, that explains it.

...and gives me awareness of a handy tool.

Now I'm ready to publish. But while we're here, could you elaborate more or link me to somewhere so I might better understand this:

Nov 1, 2020 22:33:33 GMT -8 Chris said:

In any event you can always set a breakpoint or drop a debugger statement within your function to see the values that lead to the decisions being made in your conditionals

If I understand correctly, I could insert the debugger statement here:
// Poised to reload page upon ajaxComplete
$(document).ajaxComplete(function(event, xhr, options) {
if(options.url === proboards.route('update_unified', {
user_id: pb.data('profileUserId')
})) debugger;{
window.location.href = proboards.dataHash.user.url + '/settings/ThemeSelect';
}
});

Then, and only when I'm in the browser console, the execution will pause at that point.

But what do I do in the console to see the values involved?

[Chris]

Nov 2, 2020 9:02:08 GMT -8 Retread said:

Nov 1, 2020 22:33:33 GMT -8 Chris said:

The "update_unified" appears to be the correct ajax call.

Well at least I got one thing right.

Nov 1, 2020 22:33:33 GMT -8 Chris said:

You're however passing in the **URL** of the user rather than the **ID**
It's a simple matter of running the command in a console to see the results

Ah, that explains it.

...and gives me awareness of a handy tool.

Now I'm ready to publish. But while we're here, could you elaborate more or link me to somewhere so I might better understand this:

Nov 1, 2020 22:33:33 GMT -8 Chris said:

In any event you can always set a breakpoint or drop a debugger statement within your function to see the values that lead to the decisions being made in your conditionals

If I understand correctly, I could insert the debugger statement here:
// Poised to reload page upon ajaxComplete
$(document).ajaxComplete(function(event, xhr, options) {
if(options.url === proboards.route('update_unified', {
user_id: pb.data('profileUserId')
})) debugger;{
window.location.href = proboards.dataHash.user.url + '/settings/ThemeSelect';
}
});

Then, and only when I'm in the browser console, the execution will pause at that point.

But what do I do in the console to see the values involved?

The debugger statement is just that a statement that gets executed by the parser with its sole job being to halt execution at the point where it has been encountered and pass control to a debugger if one has attached itself to the environment.

Remembering that the debugger statement is a statement unto itself then where you currently have it has drastically changed the logic of that coding since it now says if options.url === blah then execute the debugger statement. The block of statement within those curly brackets that once was executed depending on whether the condition evaluated to true or false is now executed every time because it is now just a block of statements and no longer tied to the conditional since another statement has taken its spot in the conditional. If the debugger statement had been inserted after the opening curly bracket of the conditional then it would have become part of the block and issued a breakpoint whenever the conditional evaluated to true.

When I insert debugger statements into functions I find I usually place it directly after the opening curly brackets of the function so I can immediately examine and verify that the parameters being passed in is what is being expected then if there are more questions I'd single step through each line of execution (or set a soft breakpoint at some area of interest) to be sure the logic is performing as designed.

The debugger statement however requires modifying the code in order to insert whereas the browser's integrated development environment allows you to select any statement in the source and set a soft breakpoints even on code that you have no permission to modify such as the the Proboards framework.




As for seeing values you simply hover your mouse over the variable in most browser environments once you're in step mode to see what current value is contained within that variable or you could just type the variable in a console to see what value it outputs. Some of the better ones also have sidebars listing the variables within that scope or if there are closure variables you can inspect those as well going all the way up to the root/global
(window) scope

[Retread]

Okay, so I went through the exercise of moving the debugger statement and was successful with that.

Then I removed the debugger statement and tried the method within the browser's debugger. It took me a minute or two to realize I needed to navigate through the sources to storage.proboards.com and then to the .js for the plugin. But once there I was able to insert the breakpoint at the desired location (the link you provided to MDN made it clear the line number was where I needed to bring up that context menu.

Also, I noticed that just clicking on the line number will insert a breakpoint. At least it does in Firefox.

So all is well here and I can't thank you enough!