?
Solved

Unable to redirect after uploading images using drag & drop

Posted on 2012-08-20
11
Medium Priority
?
936 Views
Last Modified: 2012-09-05
Hi, I have been struggling with getting a redirect to work on code been modifying.  If when you read this you think that I really should know the basics of page redirect.  Well yes I do, I would not be posting a simple question on here.  I've been stuck at this point for almost 2 weeks now.  The main page index.asp has an iframe avatar.asp. Idea is simple... drop new avatar picture, this gets uploaded and processed by another file. The writing to the database & upload working fine.  The main page http://www.mymusicwall.co.uk/index.asp and the avatar iframe is http://www.mymusicwall.co.uk/avatar2.asp (attached below as avatar.aspx) To allow for debugging I have disabled security so if you visit the site you can see what striving to achieve..  All I want to be able to do which I honestly thought would be very easy, is that after the successful upload, just reload the iframe avatar.asp with something like a response.redirect("avatar.asp")  Am very frustrated grrr I have had to change the extension of the attachments as your system will not allow extension of .ASP.  As a temporary workaround I have ammended the script avatar2.asp with 15 seconds reload of the avatar working on the <div> element but this is only until you guys can come up with solution for avatar.asp... To assist further I have added text "REDIRECT SHOULD OCCUR HERE" as a point where the redirect/reload of page should occur (I think!)
avatar.aspx
uploadavatar.aspx
0
Comment
Question by:MyMusicWall
  • 5
  • 5
10 Comments
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38357222
How do you get to a page with the avatar iframe - not on index.asp as you indicate above.

Tried register - not there either.
0
 

Author Comment

by:MyMusicWall
ID: 38357236
It is in index.asp, but as it is just an iframe I didnt feel you would need that.  

<iframe width="100%" src="avatar.asp" height="200" scrolling="no"></iframe>

I have just enabled autologin for diagnostics purposes.. So if you open http://www.mymusicwall.co.uk/avatar.asp you can see it without being in an iframe.

When an image is succesfully dropped it does upload correctly (feel free to try it) but the avatar itself is not refreshing.  If you reload the page you will see that it has been uploaded though

Regards
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38357311
I just get an unknown error has occured.

Are you sure the problem is not because of caching?

Have you tried putting a timestamp behind the image name

<img src="/images/newimage.jpg?112344242423" />

To force the browser to refresh the image?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

Author Comment

by:MyMusicWall
ID: 38357337
100% sure, all I want to do is redirect to the same page after it has finished processing.

I have attempted to use response.redirect in the upload.asp page, but this gives me "unknown error has occured", have tried reading up and using java redirect just seems to ignore the code.  The new image name is being read from database, just want to redirect to same page so that the process can read new values.

I have just opened http://www.mymusicwall.co.uk/avatar.asp and dropped image no problem so unsure why you get unknown error has occured :-(
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38357533
Your upload is ajaxing the new image so a server side redirect is not going to do anyting in the callback for the success of the file upload add this
window.location.reload()

Open in new window

You would need to edit application.js to add the call back and then put the above in there.

See if that helps.
I've attached a screenshot of what I see when I try to upload
ee-errorss.jpg
0
 

Author Comment

by:MyMusicWall
ID: 38357580
Hi,  Have tried that but now the page reloads constantly :-(

$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload();

    // Load existing files:
    $.getJSON($('#fileupload form').prop('action'), function (files) {
        var fu = $('#fileupload').data('fileupload');
        fu._adjustMaxNumberOfFiles(-files.length);
        fu._renderDownload(files)
            .appendTo($('#fileupload .files'))
            .fadeIn(function () {
                // Fix for IE7 and lower:
                $(this).show();
            });
    });

    // Open download dialogs via iframes,
    // to prevent aborting current uploads:
    $('#fileupload .files').delegate(
        'a:not([target^=_blank])',
        'click',
        function (e) {
            e.preventDefault();
            $('<iframe style="display:none;"></iframe>')
                .prop('src', this.href)
                .appendTo('body');
        }
    );
      window.location.reload();

});
0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38357610
I wouldn't put it there - no way of testing but try this
$('#fileupload').fileupload({
   done : function() {
       window.loation.reload();
   }
});

Open in new window

0
 

Author Comment

by:MyMusicWall
ID: 38366353
hiya,  I tried this, no error messages but not working though..

/*
 * jQuery File Upload Plugin JS Example 5.0.3
 * https://github.com/blueimp/jQuery-File-Upload
 *
 * Copyright 2010, Sebastian Tschan
 * https://blueimp.net
 *
 * Licensed under the MIT license:
 * http://creativecommons.org/licenses/MIT/
 */

/*jslint nomen: true */
/*global $ */

$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
   done : function() {
       window.location.reload();
   }
});

    // Load existing files:
    $.getJSON($('#fileupload form').prop('action'), function (files) {
        var fu = $('#fileupload').data('fileupload');
        fu._adjustMaxNumberOfFiles(-files.length);
        fu._renderDownload(files)
            .appendTo($('#fileupload .files'))
            .fadeIn(function () {
                // Fix for IE7 and lower:
                $(this).show();
            });
    });

    // Open download dialogs via iframes,
    // to prevent aborting current uploads:
    $('#fileupload .files').delegate(
        'a:not([target^=_blank])',
        'click',
        function (e) {
            e.preventDefault();
            $('<iframe style="display:none;"></iframe>')
                .prop('src', this.href)
                .appendTo('body');
        }
    );

});
0
 

Author Comment

by:MyMusicWall
ID: 38366497
I have spent the last 6hrs trying the code window.location.reload(); in many different places in different .js files, still getting no further with solving the issue.  How else can I give you what you need in order to help sort this out?  Regards  Stephen
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38367021
If you add an alert here - do you get the alert
$('#fileupload').fileupload({
   done : function() {
       alert('here');
       window.location.reload();
   }

Open in new window

0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question