CODEWITHSUNDEEP
javascript
mkohanek
mkohanek

Reputation: 79

Looking for a way to edit a JavaScript file as it is added to the page

I am not sure the best way to word this, or even if it is possible. Any suggestions are welcome.

We have a JavaScript file on our site that creates an Object, sets values on the Object, and calls a method on the Object to submit the values. This JavaScript is added to all pages on our website. The problem I have is that each page on the site needs to set some of its own values on the Object.

So here is an example of the JavaScript file:

<javascript>
    Object obj;
    obj.setVal1 = 1;
    obj.setVal2 = 2;
    obj.submitValues;
</javascript>

Currently, pages just add a JavaScript tag somewhere in the page that tries to add more values to the Object:

<javascript>
    obj.setCustVal1 = 1;
    obj.setCustVal2 = 2;
</javascript>

The problem is, sometimes the JavaScript file loads and fires before the custom values have had a chance to be added to the Object. Honestly, I am not sure how any of the values ever make it into this call, though they definitely do. I have vastly oversimplified this - the JavaScript file gets added to the page using document.write or something like that, for example. So there is more to it than I wrote here, I am just trying to make it easy to understand.
So I am looking for a way that a page owner might be able to insert some values into this JavaScript file from his page. Can the page owner maybe add something to the top of his page that the JavaScript file searches for on load, and adds whatever it finds into some placeholder within that JavaScript file? That is how I would solve it without knowing if that is even possible. I am no JavaScript expert, I am just trying to help come up with a solution. I have kind of just been pulled into this further than I should be, so I am hoping to get some help here if possible.

I realize this may be a complicated answer - so feel free to just tell me to go research 'x' - I am willing to do that, I just do not know where to start. My native language is PL/SQL, not JavaScript :)

Upvotes: 1

Views: 44

Answers (2)

Patrick Evans
Patrick Evans

Reputation: 42736

Have your submit call check to see if the page has defined a function, and if so pass it the obj and execute the function. The function would then add its values and then return. The submit would then continue on. The page script would have to be placed before the included js file.

Script on page

<script>
  function customValues(obj){
     obj.custVal1 = 1;
     obj.custVal2 = 2;
  }
</script>
<script type="text/javascript" src="js.file"></script>

And in your js file

 //wherever your submitValues function is
 function submitValues(){
    if(window.customValues){
       window.customValues(this);
    }
    ...
    //do the submit
 }
 ...
 Object obj;
 obj.setVal1 = 1;
 obj.setVal2 = 2;
 obj.submitValues();

This way if the page defines a function the values get set, and if it doesnt the submit function will just continue on.

Upvotes: 2

Igor Milla
Igor Milla

Reputation: 2786

Maybe you can swipe the order of them. And make it to something like this. 

<script>
var customVars = {};
 customVars.var1 = 1;
 customVars.var2 = 2; 
</script>

and after this to load your main script which will do something like this:

<javascript>
    Object obj;
    obj.setVal1 = 1;
    obj.setVal2 = 2;
    obj.customValues = customVars; 
    obj.submitValues;
</javascript>

Upvotes: 2

Related Questions