How do I load a my Java Applet on a Click event?

Question

I have a div where I load a Java Applet, but the new version of Java is giving an unsigned certificate error:

I would like to know if I can restrict the loading of my Java Applet ( DeployJava.RunApplet ), currently instantiated while the page is loaded, to only load when user clicks the View in 3D button?

Applet Loading Code:

<div id="appletContainer" runat="server" style="width:(document.body.clientWidth - 270);height:300" clientidmode="Static">
    <script type="text/javascript">
        var showCI = 0;                                        
        if (document.getElementById("hdnHas3D").value == "1" && !isAppleMobile()) {
            var J3DStyleID = document.getElementById("hdn3DStyleID").value;
            var code = "com.wirefusion.player.AppletPlayer";
            var archiveList = "Some achive List";                                         
            var width = document.body.clientWidth - 270;
            var height = 300; 

            var attributes = {
                id: "appletContainerX",
                name: J3DStyleID,
                code: code,
                codebase: ".",
                width: width,
                height: height,
                mayscript: "true"
            };
            var parameters = {
                progressFunc: "handleAppletProgress",
                archive: archiveList,
                java_arguments: "-Xmx200m",
                regid: "6050-25",                                                
                resourcefolder: "/RichContent/3D_Vehicles/J3D/Vehicles/" + J3DStyleID + "/",
                preloadfile: J3DStyleID + ".jar",
                environmentType: "WEBSITE",
                environmentWidth: width,
                environmentHeight: height,
                groupsXMLFile: "../../Resources/groups.xml",
                vehicleXMLFile: J3DStyleID + ".xml"
            };
            var version = '1.6.0_20'; 
            if (deployJava.versionCheck(version + '+')) {
                docWriteWrapper(function () {
                    deployJava.runApplet(attributes, parameters, version);
                });                                               
            } else {
                if (document.getElementById("iframeContainer").style.display != "none") {
                    alert("Unable to load Interactive mode");
                    showCI = 1;

                }
            }
        }
    </script>
</div>

Answer 1

Don't include the regular <applet> (or <object> ) tag in your HTML. Instead follow this tutorial on how to do dynamically add it to your page, using JavaScript.

HTML 4

function loadApplet(code,codebase,width,height,alt){
    var placeholder=document.getElementById('placeholder');
    if(window.opera){
        placeholder.innerHTML='<applet code="'+code+'" codebase="'+codebase+'" width="'+width+'" height="'+height+'" alt="'+alt+'"></applet>';
    }else{
        var a=document.createElement('applet');
        a.setAttribute('code',code);
        a.setAttribute('codebase',codebase);
        a.setAttribute('width',width);
        a.setAttribute('height',height);
        a.setAttribute('alt',alt);
        placeholder.appendChild(a);
    }
}

HTML 5

function loadApplet(code,codebase,width,height,alt){
    var placeholder=document.getElementById('placeholder');
    var a = document.createElement('object');
    a.setAttribute('type','application/x-java-applet');
    a.setAttribute('width',width);
    a.setAttribute('height',height);
    a.setAttribute('alt',alt);

    var codeParam = document.createElement('param');
    codeParam.setAttribute('name','code');
    codeParam.setAttribute('value',code);
    a.appendChild(codeParam);

    var codebaseParam = document.createElement('param');
    codebaseParam.setAttribute('name','codebase');
    codebaseParam.setAttribute('value',codebase);
    a.appendChild(codebaseParam);

    placeholder.appendChild(a);
}

In your HTML create a placeholder DIV , ie where you want to it to be loaded into, and a link to load your applet. You will need to customise the values in the load link to your values of the Applet.

<div id="placeholder"></div>
<input type="button" value="Load Applet" onclick="loadApplet('TestApplet.class','.','200','300','demo applet')" />

The linked tutorial explains more about how to make it pretty. The code above is just simply the concept.

---

Update since modification of question

Your code appears to load the applet using JavaScript already. The problem is the script is being run as soon as the page is loaded and not when the user clicks on the View in 3D button.

To prevent it running immediately, you can wrap the loader code in a function called loadApplet . So explained in pseudo code:

function loadApplet() {
    // Your existing applet loading code
}

So using your included source code, I have wrapped it with a function, which will prevent it running when your page is loaded.

<div id="appletContainer" runat="server" style="width:(document.body.clientWidth - 270);height:300" clientidmode="Static">
    <script type="text/javascript">
        // Wrap your code with a function called loadApplet
        function loadApplet() {
            // Your applet loading code:
            var showCI = 0;                                        
            if (document.getElementById("hdnHas3D").value == "1" && !isAppleMobile()) {
                var J3DStyleID = document.getElementById("hdn3DStyleID").value;
                var code = "com.wirefusion.player.AppletPlayer";
                var archiveList = "Some achive List";                                         
                var width = document.body.clientWidth - 270;
                var height = 300; 

                var attributes = {
                    id: "appletContainerX",
                    name: J3DStyleID,
                    code: code,
                    codebase: ".",
                    width: width,
                    height: height,
                    mayscript: "true"
                };
                var parameters = {
                    progressFunc: "handleAppletProgress",
                    archive: archiveList,
                    java_arguments: "-Xmx200m",
                    regid: "6050-25",                                                
                    resourcefolder: "/RichContent/3D_Vehicles/J3D/Vehicles/" + J3DStyleID + "/",
                    preloadfile: J3DStyleID + ".jar",
                    environmentType: "WEBSITE",
                    environmentWidth: width,
                    environmentHeight: height,
                    groupsXMLFile: "../../Resources/groups.xml",
                    vehicleXMLFile: J3DStyleID + ".xml"
                };
                var version = '1.6.0_20'; 
                if (deployJava.versionCheck(version + '+')) {
                    docWriteWrapper(function () {
                        deployJava.runApplet(attributes, parameters, version);
                    });                                               
                } else {
                    if (document.getElementById("iframeContainer").style.display != "none") {
                        alert("Unable to load Interactive mode");
                        showCI = 1;

                    }
                }
            }

        }
    </script>
</div>

Then to your View in 3D element you must add an onclick attribute calling the loadApplet() function. For example:

<input type="button" value="Show in 3D" onclick="loadApplet()" />

Note: It may be the case that your View in 3D button already has an onclick attribute wired to a function that brings your applet into view, in which case you would still want this to be called after your load function. I have used showApplet() as an example, this is most likely different for you.

<input type="button" value="Show in 3D" onclick="loadApplet(); showApplet();" />

If you provide the code for your Show in 3D button, I can better assist you here.