Adding things into the headers without showing it

[Thesealion]

I have seen things like the shop code where they hide the modify headers page and make text areas where you can input things into. How do you make the stuff from the text area go into the right spot in the headers?

My idea is an admin editable affiliate program...

[Jordan]

What is happening is the script hides the table that contains the header and footer, and then dynamically creates a custom table with custom fields that the user can enter. When the user hits "Save", the code then extracts the information from each field and turns it into a long string most likely in JSON format, and then inserts this string into the hidden headers and footers.

I'll try to write an example a little later today.

[Thesealion]

Yea i knew what it did i just didn't know how to write a code like that...

[Jordan]

Ah, okay. I'm about to go eat, but I'll write an example for you a little later today.

[Jordan]

Do you have Skype? I put together a script which does the basics, but as you can see it is probably a little lengthy compared to what you are used to and there's a lot that I need to explain. Don't get overwhelmed with it all, it's organized into functions since there are quite a few things you have to do with an admin editable, but I can explain to you how it all works. I also commented most of it, so you can stick it in your main header and footer and play around to see how it works yourself.

Main Header

<script type="text/javascript">
<!--

var NightsAffiliates = window.NightsAffiliates = function() {

      // ID of the div element which contains the custom affiliate page
      var htmlDivID = "affiliate_admin";

      // Reference to the admin form if it exists
      var adminForm = null;

      // Start AffData
      var data = {
            firstField: "ie",
            secondField: "work with me"
      };
      // Stop AffData

      // Hides the admin table containing the headers and footers
      // and replaces it with your custom page.
      var createPage = function() {

            // If the user has access to the headers and footers
            if(findForm()) {

                  // Set page title if you want with document.title = "asdf";
                 
                  // Hide main table
                  var table = document.getElementsByTagName("table");
                  for(var x = 1; x < table.length; x++) {
                        if(table[x].width == "92%" && table[x+2].cellPadding == "4") {
                              table[x].style.display = "none";
                              break;
                        }
                  }

                  // Load the data into the data fields
                  loadData();
                 
                  // Show the custom table
                  document.getElementById(htmlDivID).style.display = "";
            }
      }

      // Loads the data stored in the JSON "data" object into your custom fields
      // which the user can then customize
      var loadData = function() {
            document.getElementById("firstField").value = data.firstField;
            document.getElementById("secondField").value = data.secondField;
      }

      // Extracts the data from the custom fields and then inserts them as a string
      // into the main header.
      var saveData = function() {
            if(adminForm) {
                  // Grab user's input
                  var field1Value = document.getElementById("firstField").value;
                  var field2Value = document.getElementById("secondField").value;
                 
                  // String which will replace what is currently in the main header
                  var str = "var data = {\n\t\tfirstField: \"" + field1Value + "\",\n\t\tsecondField: \"" + field2Value + "\"\n\t};";
                 
                  // Regular Expression which matches what we need to replace in the main header
                  var regex = new RegExp("\\/\\/\\sStart\\sAffData[\n\r\t\\s]*(var[\\s\\S]*}[\n\r\t\\s]*\\/\\/\\sStop\\sAffData","m");

                  // Match and replace data, and then submit the admin form
                  if(adminForm.header.value.match(regex)) {
                        // Use the alert function for testing to see if you are matching the correct text
                        //alert(RegExp.$1);

                        adminForm.header.value = adminForm.header.value.replace(RegExp.$1, str);
                        adminForm.submit();
                  }
            }
      }

      // Searches for the admin form. If it does not exist, then the user
      // does not have access to the headers and footers.
      var findForm = function() {
            var f = document.getElementsByTagName("form");

            for(var x = 0; x < f.length; x++) {
                  if(f[x].action.match(/headersfooters3/i)) {
                        adminForm = f[x];
                        return true;
                  }
            }

            return false;
      }

      // Inserts panel links on the main admin page
      var createPanelLinks = function() {
            var sectionTitle = "Affiliate Table";
            var pageLinks = [
                  ["Manage", "/index.cgi?action=headersfooters2&id=-&aff=manage"],
                  ["Support Board", "http://nightcodes.proboards.com/"]
            ];

            var div_1 = document.createElement("div");
            var div_2 = document.createElement("div");
                  div_2.style.paddingLeft = "35";

            var b = document.getElementsByTagName("b");

            for(var x = 0; x < b.length; x++){
                  if(b[x].innerHTML == "Customize Your Forum"){
                        var parent = b[x].parentNode;

                        div_1.appendChild(parent.firstChild.cloneNode(true));
                        div_1.appendChild(document.createElement("b"));
                        div_1.lastChild.appendChild(document.createTextNode(" " + sectionTitle));
                        div_1.appendChild(document.createElement("br"));

                        // If the user has admin access
                        if(parent.getElementsByTagName("div")[0].innerHTML.match(/>headers\sand\sfooters</i)){
                              for(var a = 0; a < pageLinks.length; a++){

                                    var link = document.createElement("a");
                                          link.href = pageLinks[1];
                                          link.appendChild(document.createTextNode(pageLinks[0]));

                                    div_2.appendChild(document.createElement("br"));
                                    div_2.appendChild(link);
                              }
                        } else {
                              div_2.appendChild(document.createElement("br"));
                              div_2.appendChild(document.createTextNode("- No Options Available -"));
                        }

                        div_1.appendChild(div_2);
                        parent.appendChild(div_1);

                        break;
                  }
            }
      }

      // Returns public functions that the outside world can call
      return {
     
            // Decides what action to take
            init: function() {
                  switch(pb_action) {
                        case "admin": {
                              createPanelLinks();
                              break;
                        }
                        case "headersfooters2": {
                              if(location.href.match(/ers2&id=-&aff=manage$/i)) {
                                    createPage();
                              }
                              break;
                        }
                  }
            },

            // Should be called by your "Save" button on your custom page
            save: function() {
                  saveData();
            }
      }
}();

//-->
</script>

<div id="affiliate_admin" style="display: none;">
      <table width="92%" cellspacing="0" cellpadding="0" align="center">
            <tr>
                  <td valign="top" width="100%">
                        Affiliate Page<br />
                        <input type="text" id="firstField" value="" /><br />
                        <input type="text" id="secondField" value="" /><br />
                        <input type="button" id="saveButton" value="Save" onclick="NightsAffiliates.save()" />

                  </td>
            </tr>
      </table>
</div>

Main Footer

<script type="text/javascript">
<!--

NightsAffiliates.init();

//-->
</script>

[Thesealion]

I actually don't have skype...nor any other chatting program...parents don't like me doing that stuff.

Also you are correct i have no idea how you did some of that stuff...

[Jordan]

I'll try to explain it in more detail in this post. You may want to start your own code and just use my code as a reference because this code does pretty much everything you will have to figure out yourself.

This creates a global variable that is a function object that will contain all your functions that you will use to make the code run. An admin editable has to do a lot of things, so it is best to organize everything into one object.

var NightsAffiliates = window.NightsAffiliates = function() {

As you will see below the script, there is an HTML div with an id of "affiliate_admin". That div contains all the HTML that will appear on your custom page, and I created a variable to contain its ID so if you ever want to change it you only have to change it here and in the div.

      var htmlDivID = "affiliate_admin";

Whenever a user visits your custom page, they will need to be on the main header and footer page which has a <form> used to submit the data in the header and footer to the Proboards server. This variable points to that form if it is found when the findForm() function is called. If it is never found, then that means the user does not have access to the header and footer page.

      var adminForm = null;

This next part is where the magic happens. This is where the data that the user enters on your custom page is stored, but it's all done with Javascript. I have two comments above and below the variable to help the script find this section of text and update it in the saveData() function. If you add to this then you will need to update your regular expression which I can help you do.

      // Start AffData
      var data = {
            firstField: "ie",
            secondField: "work with me"
      };
      // Stop AffData

This function gets called when a user goes to your custom page. All it does is check to see if the user has access to the admin form that I went over above, and then hides the main table, and displays your hidden div.

      // and replaces it with your custom page.
      var createPage = function() {

            // If the user has access to the headers and footers
            if(findForm()) {

                  // Set page title if you want with document.title = "asdf";
                 
                  // Hide main table
                  var table = document.getElementsByTagName("table");
                  for(var x = 1; x < table.length; x++) {
                        if(table[x].width == "92%" && table[x+2].cellPadding == "4") {
                              table[x].style.display = "none";
                              break;
                        }
                  }

                  // Load the data into the data fields
                  loadData();
                 
                  // Show the custom table
                  document.getElementById(htmlDivID).style.display = "";
            }
      }

This function is called in the createPage() function, and it grabs the data stored in your main header in the "data" object, and inserts it into your custom page input fields. If you didn't do this, then the fields would be blank and the user would have to remember what they typed in last time.

      var loadData = function() {
            document.getElementById("firstField").value = data.firstField;
            document.getElementById("secondField").value = data.secondField;
      }

This does the opposite of loadData(), but it's a little bit trickier. It grabs the values in the input fields on your custom page, but then you have to place them in your main header where your "var data = {" is. To do this, I created a string variable called "str" which is identical to the data variable text in your main header, except that it contains the new values the user typed in. Then I create a regular expression to match the text currently in your main header, and replace it. Then I submit the form to save the it. This is the hardest function to make.

      var saveData = function() {
            if(adminForm) {
                  // Grab user's input
                  var field1Value = document.getElementById("firstField").value;
                  var field2Value = document.getElementById("secondField").value;
                 
                  // String which will replace what is currently in the main header
                  var str = "var data = {\n\t\tfirstField: \"" + field1Value + "\",\n\t\tsecondField: \"" + field2Value + "\"\n\t};";
                 
                  // Regular Expression which matches what we need to replace in the main header
                  var regex = new RegExp("\\/\\/\\sStart\\sAffData[\n\r\t\\s]*(var[\\s\\S]*}[\n\r\t\\s]*\\/\\/\\sStop\\sAffData","m");

                  // Match and replace data, and then submit the admin form
                  if(adminForm.header.value.match(regex)) {
                        // Use the alert function for testing to see if you are matching the correct text
                        //alert(RegExp.$1);

                        adminForm.header.value = adminForm.header.value.replace(RegExp.$1, str);
                        adminForm.submit();
                  }
            }
      }

This is the function that finds the admin form if it exists. We need to find the form so we can call submit() on it like we did in the previous function. This form also contains the header and footer.

      // Searches for the admin form. If it does not exist, then the user
      // does not have access to the headers and footers.
      var findForm = function() {
            var f = document.getElementsByTagName("form");

            for(var x = 0; x < f.length; x++) {
                  if(f[x].action.match(/headersfooters3/i)) {
                        adminForm = f[x];
                        return true;
                  }
            }

            return false;
      }

This is just a function I copied from one of my old codes, and all it does is insert some links on the main admin page so the user can click them to get to your custom page. All you need to modify is the sectionTitle variable and the pageLinks array.

Important Note: You have to give your custom page a unique URL, but it still needs to be on the main header and footer page. As you can see in the red below, the URL points to the main header and footer page, and it also tags on "&aff=manage". This can be whatever you want it to be. You just need to be able to check for it in a location check when your script starts so it knows if you are on your custom page or not.

      var createPanelLinks = function() {
            var sectionTitle = "Affiliate Table";
            var pageLinks = [
                  ["Manage", "/index.cgi?action=headersfooters2&id=*&aff=manage"],
                  ["Support Board", "http://nightcodes.proboards.com/"]
            ];

            var div_1 = document.createElement("div");
            var div_2 = document.createElement("div");
                  div_2.style.paddingLeft = "35";

            var b = document.getElementsByTagName("b");

            for(var x = 0; x < b.length; x++){
                  if(b[x].innerHTML == "Customize Your Forum"){
                        var parent = b[x].parentNode;

                        div_1.appendChild(parent.firstChild.cloneNode(true));
                        div_1.appendChild(document.createElement("b"));
                        div_1.lastChild.appendChild(document.createTextNode(" " + sectionTitle));
                        div_1.appendChild(document.createElement("br"));

                        // If the user has admin access
                        if(parent.getElementsByTagName("div")[0].innerHTML.match(/>headers\sand\sfooters</i)){
                              for(var a = 0; a < pageLinks.length; a++){

                                    var link = document.createElement("a");
                                          link.href = pageLinks[1];
                                          link.appendChild(document.createTextNode(pageLinks[0]));

                                    div_2.appendChild(document.createElement("br"));
                                    div_2.appendChild(link);
                              }
                        } else {
                              div_2.appendChild(document.createElement("br"));
                              div_2.appendChild(document.createTextNode("- No Options Available -"));
                        }

                        div_1.appendChild(div_2);
                        parent.appendChild(div_1);

                        break;
                  }
            }
      }

Don't get confused by this return statement. Remember that we are in a function called NightsAffiliates, and so when this function executes it will create all the previous functions we just went over, but they will all be private meaning the outside world cannot call them. Only functions in this object can call each other. However, the "return" statements returns two public functions below to the outside world. If this confuses you, it's okay. It's just a good organization practice that I wanted you to see since I doubt you've seen it yet.

      return {

This function should be called on every page, and it decides what functions should be called. If you are on the admin page it calls createPanelLinks() so the user can see your links, if you are on the custom page, then it calls the createPage() function.

            init: function() {
                  switch(pb_action) {
                        case "admin": {
                              createPanelLinks();
                              break;
                        }
                        case "headersfooters2": {
                              if(location.href.match(/ers2&id=\*&aff=manage$/i)) {
                                    createPage();
                              }
                              break;
                        }
                  }
            },

This function calls your private save function. Whenever the user presses "Save" on your custom page, this function gets called.

            save: function() {
                  saveData();
            }
      }
}();

This is the HTML for your custom page that you will want to modify.

<div id="affiliate_admin" style="display: none;">
      <table width="92%" cellspacing="0" cellpadding="0" align="center">
            <tr>
                  <td valign="top" width="100%">
                        Affiliate Page<br />
                        <input type="text" id="firstField" value="" /><br />
                        <input type="text" id="secondField" value="" /><br />
                        <input type="button" id="saveButton" value="Save" onclick="NightsAffiliates.save()" />

                  </td>
            </tr>
      </table>
</div>

This starts your script.

<script type="text/javascript">
<!--

NightsAffiliates.init();

//-->
</script>

[Thesealion]

wait so this is the url to the main header /index.cgi?action=headersfooters2&id=*?

That takes me to the global header...


this is the main header url /index.cgi?action=headersfooters2&id=-

[Jordan]

Ah, yes, you're right. Let me know if you need me to explain something.

[Bennett 🚀]

Well Jordan, you use OOP too, which can be confusing to those just starting out in it! I for one do not get javascript OOP, whereas, I get PHP oop.

[Jordan]

My hope was that people could take the code, specifically the contents of the functions, and make it their own way. Although Javascript doesn't use classical inheritance like php, C++ and Java do, it isn't entirely different. The only thing you really need to know about the structure of the code above is that all the functions that start with "var" are private, and the two functions inside the "return" statement are public functions that can call the private functions.

I'll go over the save function a little more in case Nightwalker or anyone else wants to make their own admin editable and just need to know how to save something.

---

The first thing you want to do is make sure the user has access to the header and footer. This variable I created will be null if it doesn't exist.

if(adminForm) {

Next, grab the user's input from the custom page.

var field1Value = document.getElementById("firstField").value;
var field2Value = document.getElementById("secondField").value;

Now you want to construct the string that you will store in your header or footer. This is going to replace what is currently already in there. You may have noticed that I have line breaks and tabs in there so it is spaced out like the code already in the header/footer. This is nice when you are developing the code, but when you are finished it can just be one long line, but you may have to modify your regular expression below.

var str = "var data = {\n\t\tfirstField: \"" + field1Value + "\",\n\t\tsecondField: \"" + field2Value + "\"\n\t};";

Below is the hardest line in the code, and you'll need to learn how to use regular expressions to make your own. Basically what is happening is we are matching a sub string within the header, and we enclose what we want to extract (and become RegExp.$1) in parenthesis: (var[\\s\\S]*}.

The first section matches the starting comments (// Start AffData), and since the / character is a reserved character in regular expressions, we have to escape it with two \\. Then, we match a whitespace with \\s. Then we match 1 or more newlines, carriage returns (for IE), tabs, and whitespace with [\n\r\t\\s]* . Always remember to search for carriage returns (\r) when you are trying to match a newline since IE ends lines with a newline and carriage return (\n\r) and not just a newline (\n). The next part matches the actual data we are looking for which is why we enclose it in parenthesis to save it and have it placed into RegExp.$1. We start out with the keyword "var", and then match all characters [\\s\\S] 1 or more times all the way to the end: }; . Then we match the ending whitepace and comments. We also set the search type to "m" which means we can search over multiple lines of text.

var regex = new RegExp("\\/\\/\\sStart\\sAffData[\n\r\t\\s]*(var[\\s\\S]*}[\n\r\t\\s]*\\/\\/\\sStop\\sAffData","m");

Here, you need to match and replace the data, and then submit the admin form to save your header and footer. What happens is first we check the main header to see if it matches our regular expression, and if it does, then we set the header's value (which is a string) to itself but with the new sub string which is done by the replace() function. Notice that the old string is RegExp.$1. RegExp is an object that contains the last nine (RegExp.$9) corresponding matches in parenthesis in the regular expression.

if(adminForm.header.value.match(regex)) {
    adminForm.header.value = adminForm.header.value.replace(RegExp.$1, str);
    adminForm.submit();
}

[Nero]

Not exactly sure about this JavaScript thing that is used here at PB, but it seems mostly the same as HTML

for HTML if you want to type something and not show it, then you just do this

<!=text here-->

[Jordan]

Javascript is a scripting language which is much more complex than HTML which is just a markup language. It's nothing like HTML. ;P

If you find the posts above to be easy to understand while not knowing any programming languages, then you're extremely intelligent.

[Bennett 🚀]

Jan 26, 2011 15:58:22 GMT -8 Nero said:

Not exactly sure about this JavaScript thing that is used here at PB, but it seems mostly the same as HTML

for HTML if you want to type something and not show it, then you just do this

<!=text here-->

If you're talking about javascript scripts like:

<script type='text/javascript'><!--
//--></script>

the <!--
//-->
hides code from old browsers

[Thesealion]

I actually just started looking at this again. I don't know if you can still look at this with me though. I will probably not spend a lot of time on this but i am interested in trying again. Last time i didn't really understand it but i think i understand more now. So what if i wanted to add something to the data part instead of replacing the whole thing?