delay javascript function until after file has been uploaded on asp page

Question

Can someone please tell me how to delay the resetting of a div background-image until a file upload has completed? All the parts individually work, however I have to delay the setting of the background by having an alert pop up and then leave a while before clicking ok - I can't have since a user will not know how long to leave before pressing... Any help appreciated though I should say that I briefly looked at jquery/ajax but found that it would only work in IE once before requiing a page refresh

Html...

<iframe id="MyFrame" name="MyFrame" style="display:none;"></iframe>
<form id="browseform" method="post" action="disp_photosave.asp" enctype="multipart/form-data"  target="MyFrame">
    <p>Please select your photo...</p>
    <img src="Images/button_browse.gif">
        <input type="hidden" name="tab" value="0">
        <input type="file"  id="upload" name="filesent" onchange="this.form.submit(); load_bk_photo()">
        <input type="hidden" name="tempid" value="<%=(TId)%>">
        <input type="hidden" name="side" value="<%=(strSide)%>">
        <input type="hidden" name="varid" value="<%=(Request.querystring("varid"))%>">
        <input type="hidden" name="prodid" value="<%=(Request.querystring("prodid"))%>">
</form>

javascript...

function load_bk_photo(){
    var activeId = '<%=(activeTempStoreId)%>'
    var redStr_id = "side1"
    d = new Date();
    time_temp = d.getTime();
    photoUrl = "photos/merged_"+activeId+"_"+redStr_id+".png?"+d.getTime()
        alert ("timebbb = "+time_temp )
    $('#resizable-img').css('background-image','url("' + photoUrl + '")');
    $('#resizable-img').css('display','block');
}

vbscript on disp_photosave.asp...

<%
Set Upload = Server.CreateObject("csASPUpload.Process")
Set Image = Server.CreateObject("csImageFile.Manage")

prodid = prodSet.Fields.Item("id").Value
redStr = "side1"
fieldPrefix = "front_"

If Upload.FileQty > 0 Then
    Image.ReadVariant Upload.FileData(0)
    Image.WriteFile Server.MapPath("this works ok"
      Image.ResizeFit scale_width, scale_height
      Image.WriteFile Server.MapPath("this works ok"
    storeHeight = Image.Height
    storeWidth = Image.Width

    Set MyConn=Server.CreateObject("ADODB.Connection")
        MyConn.Open "dsn=xxx;uid=xxx;password=xxx;"
        SQLString = "this works ok"
        MyConn.Execute(SQLString)
        MyConn.Close
    Set MyConn = Nothing
End if
%>

I also need to return the value storeHeight and storeWidth to the main page to use later so if anyone can advise me on that too.

Thanks in advance for any help.

Jasper · Accepted Answer · 2012-01-11 21:33:46Z

1

Your load_bk_photo function has some issues (missing semi-colons, creating global variables), try changing to this:

function load_bk_photo(){

    //we can use the `var` keyword once and separate each variable declaration by a comma, then finish all the declarations with a semi-colon
    var activeId  = '<%=(activeTempStoreId)%>',
        redStr_id = "side1",
        d         = new Date(),
        time_temp = d.getTime(),
        photoUrl  = "photos/merged_" + activeId + "_" + redStr_id+".png?" + time_temp;

    alert ("timebbb = " + time_temp );

    //you can use one `.css()` function call to do both operations
    $('#resizable-img').css({
        'background-image' : 'url("' + photoUrl + '")',
        display            : 'block'
    });
}

You were creating global variables which is only necessary if you are changing the value of variables outside the scope of this function.

Onto your main question, you can set a load event handler for the <iframe> element as a callback function on your upload:

$('#MyFrame').on('load', function () {
    //The iframe has loaded and you can do what you want, including get the contents of the iframe (server-response)
    var response = $(this).contents().find('body').text();
});

Make sure to set this binding before the source of the <iframe> is changed.

Note that .on() is new in jQuery 1.7 and in this case is the same as .bind().

.on(): http://api.jquery.com/on

UPDATE

I don't know asp classic but if you output something like storeWidth|storeHeight in your asp code then you can get that response in you JavaScript and do what you want with it:

$('#MyFrame').on('load', function () {
    //The iframe has loaded and you can do what you want, including get the contents of the iframe (server-response)
    var response = $(this).contents().find('body').text().split('|');
    alert(response[0] + 'x' + response[1] + 'px');
});

edited Jan 11, 2012 at 21:33

answered Jan 11, 2012 at 21:27

Jasper

76.1k14 gold badges153 silver badges148 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mark_54 Over a year ago

THanks Jasper. My javascript coding is pretty new so thanks for the corrections. Can you tell me what you mean by 'bind before...' Probably a stupid question but I'm uncertain what you mean. Thanks.

Jasper Over a year ago

What I meant is that you need to bind the event handler to the iframe before submitting your form to it. If you submit the form and then bind to the load event; the load event may fire before you actually setup the event handler for the event. In a nutshell, put the $('#MyFrame').on('load'... code in a document.ready handler ($(function () {$('#MyFrame').on('load'...})). This will ensure the binding has taken place before the event is fired and after the DOM is ready for manipulation.

Mark_54 Over a year ago

Hi Jasper. I'm not getting on well with this I'm afraid. I've put the code in as you've suggested but no joy. Can you clarify if this code then has to have the 'load_bk_photo()' called from it? I'm stuck having to try to save our website because the web development company went bust! I've a steep learning curve...

user400654 · Accepted Answer · 2012-01-11 21:33:24Z

0

I would use a global callback method:

JavaScript:

window.uploadComplete = function (returnData) {
    $('#resizable-img').css('background-image','url("' + returnData.photoUrl + '")');
    $('#resizable-img').css('display','block');  
    alert(returnData.storeHeight + "|" + returnData.storeWidth);
}

And in ASP, return this to the iFrame:

<script>
parent.uploadComplete({photoUrl: "urltophoto",storeHeight: "<value from asp var>", storeWidth: "<value from asp var>"});
</script>

edited Jan 11, 2012 at 21:33

answered Jan 11, 2012 at 21:24

user400654

95.1k16 gold badges168 silver badges188 bronze badges

4 Comments

Mark_54 Over a year ago

Hi Kevin. Thanks for you reply. I'm not familiar with the global callback - I'll read up on it a little. Hopefully it will get the data I need back. I'll try it in the morning. Thanks.

Mark_54 Over a year ago

Kevin, I tried this but must be doing something wrong. The uploadComplte does fire (no alert appearing). Is there a position it needs to go in the calling page? The asp code is placed after the file upload in the asp file (and both before and after the Set Upload=Nothing command. Any ideas? (Just to be clear the disp_photosave.asp is a separate page that the iframe is calling and I've put the asp code in there.)

Mark_54 Over a year ago

Hi Kevin. I can't get this to return the values to the calling page I'm afraid. The asp page only contains <% vbscript %> so can the 'parent.upload..' line of code work as is or is there anything else to add? Sorry for the dumb question but, as I said to Jasper I'm stuck having to try to save our website because the web development company went bust and I'm trying to pick up the pieces!

Mark_54 Over a year ago

Kevin, I got it to work. I, stupidly, put the parent.upload..' code in the vbscript instead of at the end (outside the <% %>. Many thanks for your help. I'm sure I'll ask more questions.

Collectives™ on Stack Overflow

delay javascript function until after file has been uploaded on asp page

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related