Thickbox Download Button

[pinyon]

I'm trying to set up a simple inline thickbox window for agreeing to the terms of use for a download file. I found styling the box to hold the TOS content statement rather easy, but don't know how to set up a second button that closes the thickbox AND points the user at a zip file to begin download.

The coding snippit for the "Cancel" button that they click when they don't agree is below. I want to add a second button that begins the download process, and also closes the thickbox popup.

> <div id="hiddenModalContent" style="display:none">
> <p>Big-long terms of service statement for file you want to download.</p>
> <p style="text-align:center"><input type="submit" id="Close" value="&nbsp;&nbsp;Cancel&nbsp;&nbsp;" onclick="tb_remove()" /></p>
> </div>

Since the downloading file is a zip file, I don't think that I have to get very fancy with the coding, because the browser should automatically show the OS Save/Open menu when you direct them to that link? Any ideas on how I can do this? Thanks.

Fagan

[Jesdisciple]

After you kill the TOS window, I think you could just window.location.href = zipUrl; and it will work just like a link.

However, do you have a non-JavaScript version available for JS-disabled users?

[pinyon]

No, I do not have a non-javascript version. We have decided that they will just have to have javascript enabled, or they will have to email/call us to get the data. We decided to use hidden modal content windows, because they are not blocked by most pop-up blockers.

Where would I add the text snippit that you gave? Would I add it somewhere in the statement below, or somewhere else? Here is the thickbox/jquery button code:

<input type="submit" id="Close" value="&nbsp;&nbsp;Cancel&nbsp;&nbsp;" onclick="tb_remove()" />

Is there another SIMPLE solution that I could employ? There seems to be a lot more information about things like this for PHP, but we don't have access to that on these servers. I'm on a university campus that will only let us use IIS servers with ASP and ASP.NET.

Thanks.

[Jesdisciple]

No, I do not have a non-javascript version. We have decided that they will just have to have javascript enabled, or they will have to email/call us to get the data. We decided to use hidden modal content windows, because they are not blocked by most pop-up blockers.

Where would I add the text snippit that you gave? Would I add it somewhere in the statement below, or somewhere else? Here is the thickbox/jquery button code:

<input type="submit" id="Close" value="&nbsp;&nbsp;Cancel&nbsp;&nbsp;" onclick="tb_remove()" />

If your tb_remove functions isn't used for something else, you could put the line inside it. If it is used for something else, I suggest calling it from another function and changing the location in the other function.

FYI, inline event-listeners are a very poor practice, because they mix layout with logic. The best way to listen for an event is to find your element in the DOM and add the event-listener that way.

Is there another SIMPLE solution that I could employ?

I think a one-line assignment is pretty dang simple... Anything else you can find will be the same thing at heart although it may look different.

There seems to be a lot more information about things like this for PHP, but we don't have access to that on these servers. I'm on a university campus that will only let us use IIS servers with ASP and ASP.NET.

...? How have you seen this done with PHP?

[pinyon]

Okay...I know virtually nothing about javascript, and you have pretty much lost me in general. Would I put that javascript snippit that you put before within the anchor tag, or someplace else? If someplace else, how would I call it using that anchor tag?

I have seen other people make similar-looking boxes for downloading images using thickbox on a php server. I read that it simply would not work on an IIS server, so I don't have a copy laying around.

Yes, I'm looking for the EXACT coding that would make it work. I know that this is cheating, I simply do not have the time to learn javascript, and have been stuck with this task. I've asked around campus, and nobody seems to have the time or inclination to provide help yet. Thanks again.

[Jesdisciple]

I can understand having a fast deadline and needing to rush, but I will expect you to be ready to learn by your next question. (I would prefer that you start learning before then, trying to solve the problem without asking. Not that asking is a bad thing, but that trying is good.)

I'll call this script tos.js... If you can think of a better name, go ahead and use it below.

document.getElementById('Close').onclick = function (){
    tb_remove();
    window.location.href = 'URL of the zip file';
};

        <div id="hiddenModalContent" style="display:none">
            <p>Big-long terms of service statement for file you want to download.</p>
            <p style="text-align:center"><input type="submit" id="Close" value="&nbsp;&nbsp;Cancel&nbsp;&nbsp;" /></p>
        </div>
        ... Then at the very end of the body element:
        <script type="text/javascript" src="tos.js"></script>
    </body>

[pinyon]

Okay. I think that I almost have it. In the main page header I have the following javascript code:

  <script type="text/javascipt">
                 function startDownload(file) { 
                var url='http://www.cnhp.colostate.edu/download/gis/' +file;
                window.open(url,'Download');
                }
        </script>

I then tried adding the function above to the JQuery button shown below.

<div id="hiddenModalContent" style="display:none">
<p>…….<input type="submit" id="Close" value="&nbsp;&nbsp;I agree&nbsp;&nbsp;" onclick="tb_remove(); startDownload(L4_elmts04_2009_SF.zip);" /></p>
</div>

So…the window closes as per the JQuery command “tb_remove()”, but the “startDownload” function in my javascript is not calling up the new file.

Any ideas? Thanks.

[Jesdisciple]

You don't need to open a new window for this, at least AFAIK. The assignment to window.location.href should work just like this link (well, except that the empty page wouldn't be opened - that's a forum feature). Please try it the way I showed.

Beyond that, I can't help much without a live example page.

[pinyon]

I got it to download the file, which is great! I also need to do this for 4-5 more elements/links on the same page. Do I need to make separate js files for each separate file? I would prefer that the file would be called within the web page code, to avoid having separate js files for each link.

Another issue, is that I will have two buttons on each inline modal window. One will presumably use the tb_remove() function to simply close the window (they don't agree to the TOS), and the other will both close the window and start the download process.

Here is the url to my test page.



Thanks much, much.

[Jesdisciple]

Note that your test page is pretty mixed up... The buttons have the same "Close" ID, and work in the opposite way from what they say.

No, you don't need separate files. But JS directly inside HTML is a bad idea unless it's the only way - which it's not in this case.

I also need to do this for 4-5 more elements/links on the same page.

Do these other elements do the same thing as the ones you've already shown, just with different data?

I suggest that you change the <p> with the buttons to a <div>. Then replace my above code with this... (I couldn't find any definition of the tb_elmnt function so I'm ignoring it.)

cantThinkOfAGoodName('#hiddenModalContent', 'URL of the zip file');
function cantThinkOfAGoodName(tos, url){
	tos = $(tos);
	tos.find('input#Close').click(tb_remove);
	tos.find('input#Agree').click(function (){
	    tb_remove();
	    window.location.href = url;
	});
}