PDA

View Full Version : Thickbox Download Button



pinyon
07-09-2009, 09:50 PM
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
07-10-2009, 12:23 AM
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
07-10-2009, 04:48 PM
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
07-10-2009, 05:17 PM
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
07-10-2009, 07:02 PM
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
07-10-2009, 07:24 PM
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
07-10-2009, 08:45 PM
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
07-10-2009, 10:33 PM
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 (http://www.php.net/get/php-5.3.0.tar.gz/from/us.php.net/mirror) (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
07-10-2009, 11:10 PM
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 (http://www.cnhp.colostate.edu/template.asp) is the url to my test page.



Thanks much, much.

Jesdisciple
07-11-2009, 12:23 AM
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;
});
}

pinyon
07-13-2009, 06:18 PM
I got that to work, but found it to be pretty clunky for updating multiple download files in the future.

I found another solution that works for now. There is something about the content being part of a thick-box inline modal window that precludes using javascript functions that are not already embedded entirely within the JQuery/Thickbox js files.

Since I'm a javascript beginner, and want to cut down on the amount of coding that I need to do when I need to update 6-7 new download files only twice per year, I kept it super simple.

I took an idea from another forum about changing the type from "submit" to "button", and used onlclick="window_open()" to just open the new file. It works in IE6-8, and the last couple of versions of Firefox/Safari/Opera (we have clients with older GIS/database software that require older browsers and older versions of java to function).


<input type="button" id="Close" onclick="window.open('/download/gis/L4_elmts04_2009_SF.zip')" value="&nbsp;&nbsp;I Agree&nbsp;&nbsp;" />
The first button above uses a simple window.open() command attached to a button (not submit), without linking to another function located anywhere on the site (on the web page, JQuery, or other js scripts).



<input type="submit" id="Close" value="&nbsp;&nbsp;Don't Agree&nbsp;&nbsp;" onclick="tb_remove(); " />
The second button uses the native Thickbox/JQuery tb_remove() function to close the window if they dissagree. The native "close window" command at the top of thickbox modal window allows them to close it.

Since I'm trying to get the user to download a zip file, the OS-based "Save/Open" automatically window pops up whenever you link directly to the zip file.

I know that this is sloppy, but it seems to work. Any reasons why I should not use it? I would prefer to do a straight-up asp page hooked to a database, but was over-ruled by my boss (pop-up blocking issues, they WANT a modal content window).

Thanks.

Jesdisciple
07-13-2009, 10:04 PM
I mainly don't like the HTML event-handlers. The very solid "best-practices" consensus is to avoid those as much as possible.

Also, I think window.open will be blocked by some pop-up blockers.

EDIT: How was my solution clunky for updating? You only need to change the string in the JS...

pinyon
07-14-2009, 06:03 AM
The only reason that the coding was clunky for me, was because I was going to have to update the asp/html page, and then the js files separately. Essentially naming the same file twice on each update.

I would prefer to run it as a call using a sql server/asp.net call, so that I could pull it up using a database. Then, I could just update the database field once. Unfortunately, I have not found an modal-content window that will perform this function.

Popup blockers definitely block sized asp pages, which so far, is a no-go. Hopefully, I can talk my boss and other members of management into foregoing the popup concept later.

Thanks for the help. Your fixes pointed out what was not working, and helped me figure out something that would. Actually...most of your fixes worked in Firefox, Opera, and Safari, but not in legacy versions of IE6-7. We have clients that use older software that can't be updated beyond IE 6, so it simply had to work with those browsers. Very complicated, sorry. Thanks again.

Jesdisciple
07-14-2009, 04:20 PM
Just one final note... Server-side languages like ASP can write any client-side languages (e.g., JS and CSS), not just HTML. This is I how I like to keep my JS consistent with PHP. I think all you need is add a .asp extension and send a "Content-type:text/javascript" header.