Question

I have this html form

<form action="upload/" id="upload" name="upload">
// other form data
</form>

and this in html on page where i can switch form attributes

<a href="#" id="startDownload">Download</a>
<a href="#" id="startUpload">Upload</a>

and my javascript

$("#startUpload").click(function( {
    $("form").attr('action','upload/').attr('id','upload');
});

$("#startDownload").click(function( {
    $("form").attr('action','download/').attr('id','download');
});

$(function() {
    $('#upload').uploadThis({
        // other code here
    });
$(function() {
    $('#download').downloadThis({
        // other code here
    });

my problem is when i click on href #startUpload this is attached with $(‘#upload’).uploadThis({}) function and it works but when i click on #startDownload it is not attaching this $(‘#upload’).downloadThis({}) function and not getting called.

thanks for any help.

Answer 1

I’m not sure exactly what is the wanted behavior but changing IDs of elements always brings the same sort of issues.

You are doing this:

$(function() {
    $('#upload').uploadThis({
        // other code here
    });
});

$(function() {
    $('#download').downloadThis({
        // other code here
    });
});

$(<Function>); is a shorthand for $(document).ready(<Function>);

The thing is that when you’re document is ready, it will execute both your handlers above but at that time, only an element with ID #upload exists, $('#download') will actually be an empty selection.

What you could do is call $('#upload').uploadThis() and $('#download').downloadThis() in your respective .click() handlers after changing the IDs.

$("#startUpload").click(function( {
    $("form")
       .attr({ 'action': 'upload/', 'id': 'upload' })
       .uploadThis(...);
});

Note: if those are plugins you wrote yourself, be sure that they won’t initialize each time you call them.

Hope I’m clear enough :o)