Question

I would like to know is it possible to add css to one of the elements in .aspx fle from the handler.

This is my handler:

Private Sub UploadWholeFile(ByVal context As HttpContext, ByVal statuses As List(Of FilesStatus))
        For i As Integer = 0 To context.Request.Files.Count - 1
            Dim file = context.Request.Files(i)
            file.SaveAs(ingestPath & Path.GetFileName(file.FileName))
            Thread.Sleep(1000)
            Dim fname = Path.GetFileName(file.FileName)
            statuses.Add(New FilesStatus With {.thumbnail_url = "Thumbnail.ashx?f=" & fname, .url = "Upload.ashx?f=" & fname, .name = fname, .size = file.ContentLength, .type = "image/png", .delete_url = "Upload.ashx?f=" & fname, .delete_type = "DELETE", .progress = "1.0"})
        Next i
    End Sub

And I have a button which is actually in template file in my default.aspx page a shown below:

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
    <td><img src="img/paperclip.png"/></td>
        <td class="imagename"><span>{%=file.name%}</span></td>
        {% if (file.error) { %}
            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
        {% } else if (o.files.valid && !i) { %}

            <td class="start" style="visibility:hidden">{% if (!o.options.autoUpload) { %}
                <button class="btn btn-primary">
                    <i class="icon-upload icon-white"></i>
                    <span>{%=locale.fileupload.start%}</span>
                </button>
            {% } %}</td>
        {% } else { %}
            <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
            </button>
        {% } %}</td>
    </tr>
{% } %}
</script>

Now I would like to change the button to image.
So how do I do that from the handler?

If I click the below button I need to change the icon for the btn-warning

<button type="submit" class="btn btn-primary start">
                    <i class="icon-upload icon-white"></i>
                    <span>Start upload</span>
</button>

Answer 1

It would be easier if you changed the button to an image client-side, when the user clicks it. (It looks like that’s really what you’re after)

<button class="btn btn-primary" onclick="changeToImage();">

function changeToImage()
{
    $('.btn-warning').replaceWith('<img src="/wherever.jpg"/>');
}

Swap button for image (Jquery)