Avoid server call on HTML Object style display property change

Question

What should be done to avoid a server request for the pdf? I have tried visibility=hidden and width=0.

<object class='pdfClass' data='"+conventionId+"/showPdf.html' width='100%' height='600'></object>

function toggleConv() {
    if (...) {
        document.getElementById(conventionId).style.display = 'none';
    } else {
        document.getElementById(conventionId).style.display = ''; //causes a refresh
    }
}

Answer 1

EDIT:

After testing, I found out that the following works in Firefox 13 without reloading:

<object id="test" class='pdfClass' data='https://web3.unt.edu/riskman/PDF/Guidelines_on_Staphylococcal_Infections-Athletics__Revised__06-22-06.pdf' width='100%' height='600'></object>

function toggleConv(o){
    var test = document.getElementById('test');

    if (o == true){
        test.style.width = 0;
        test.style.height = 0;
    } else {
        test.style.width = '100%';
        test.style.height = '600px';
    }
}

http://jsfiddle.net/userdude/KnEYC/2/

---

Original response. Note that the height and width of the element also need to be toggled down to little or nothing to prevent it continuing to taking up the same space.

One technique would be to hide it from view by placing it way off screen:

#test {
    position: relative;
}

function toggleConv(o){
    if (o == true){
        document.getElementById('test').style.left = '-10000px';
        document.getElementById('test').style.top = '-10000px';
    } else {
        document.getElementById('test').style.left = '';
        document.getElementById('test').style.top = '';
    }
}

http://jsfiddle.net/userdude/KnEYC/

Answer 2

If it's in the HTML, it'll load. The only real way, as far as I know, to prevent a request, is to dynamically add the url for the object (or even add the object itself) in your code:

if (...) {
    // Add the data tag here
}