Sending Button Id to different Page

Question

For example I have different id's like temp1,temp2,temp3 etc for different buttons to uniquely identify them.

Is it possible to send the Id from one page (Page 1) to another Page 2, where(on Page 2) I have defined the following code , considering that a button with temp1 is clicked by the user on Page 1.

<script>

var button = $.getUrlVars()['button'];

$("#temp1").click(function() {
    $("#sTinyMceEditorId").load("Folder/firsttemplate.html");
});
</script>

<script>
$("#temp2").click(function() {
    $("#sTinyMceEditorId").load("Folder/secondtemplate.html");
});
</script>

<script>
$("#temp3").click(function() {
    $("#sTinyMceEditorId").load("Folder/thirdtemplate.html");
});
</script>

The above code is defined on the Page 2. So, I am supposing that if somehow I can get the particular id transferred to Page 2 where the above code snippet is defined , then the corresponding script tag willbe initiated and the corresponding template will be loaded into the TinyMCeEditor (with the id sTinyMceEditorId)

I am wondering if this approach would work? Also, is the above way of defining separate script tags for each temp id's good?

Thanks

Some Information if that helps in answering:

Version of TinyMce I am using is 4.0.8 It's a ColdFusion 9 on which I am working on and inside Sessions. Perhaps this has nothing to do with my question above as all the stuff I think can be done using jQuery and java script.

Answer 1

You can pass the button id via a get parameter to the next page and then read it with jQuery.

On Page 1 format your links like this

<a href="page2.html?button=temp1">Button 1</a>

On Page 2

var button = $.getUrlVars()['button'];

Which will store the value 'temp1' into the variable button

Or something similar to that.

EDIT: I wrote the code for you below, but you're going to want to brush up on your JavaScript.

On Page 2

<script type="text/javascript">
var button = $.getUrlVars()['button'];

//these values should correspond to the values you are passing in your get parameters.
switch(button){
    case 'temp1':
        $("#sTinyMceEditorId").load("Folder/firsttemplate.html");
        break;
    case 'temp2':
        $("#sTinyMceEditorId").load("Folder/secondtemplate.html");
        break;
    case 'temp3':
        $("#sTinyMceEditorId").load("Folder/thirdtemplate.html");
        break;
    default:
        alert("Button id not recognized.");
        break;
}
</script>

EDIT: The getUrlVars function as an extension of jQuery - forgot to include.

    $.extend({
    getUrlVars: function(){
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++){
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }
})