Question

I have a html page which lists all the file names in a folder and common file-operations as anchor tags next to them.When a user clicks a file operation say delete,the user is prompted if he is sure he would like to delete the selected file.It works almost flawlessly but,when a file name that has spaces and special chars ex:(My Track [Ezee’s].mp3) is encountered it fails.Is there a workaround to this.Any help or pointers in the right direction would be greatly appreciated.Thanks

HTML

    <tr class="filetable_entry_alt">
<td>
    <input type="checkbox" name="sample10 with spaces (ezee's).jpg" value="file">
</td>
<td>
    <a href="/mnt/sdcard/DCIM/sample10 with spaces (ezee's).jpg" title="sample10 with spaces (ezee's).jpg" class="thumb" rel="cb">
        <img src="/thumbnail.wft?image=/mnt/sdcard/DCIM/sample10 with spaces (ezee's).jpg&amp;kind=micro&amp;lm=1308828676000" alt="">
        <b>
            <img src="/thumbnail.wft?image=/mnt/sdcard/DCIM/sample10 with spaces (ezee's).jpg&amp;kind=micro&amp;lm=1308828676000" alt="" style="width:150px; height:150px;">
        </b>
    </a>
</td>
<td>
    <a href="/mnt/sdcard/DCIM/sample10 with spaces (ezee's).jpg" title="sample10 with spaces (ezee's).jpg">
        sample10 with spaces (ezee's).jpg
    </a>
</td>
<td>
    06/23/11 12:31 PM
</td>
<td>
    1.76 MB
</td>
<td>
    <a href="#" onclick="return confirmDel('/mnt/sdcard/DCIM/sample10 with spaces (ezee's).jpg', '/mnt/sdcard/DCIM/?');">
        delete
    </a> | 
    <a href="#" onclick="return confirmRen('/mnt/sdcard/DCIM/','sample10 with spaces (ezee's).jpg','/mnt/sdcard/DCIM/?');">
        rename
    </a>|
     <a href="#" onclick="return confirmCopy('/mnt/sdcard/DCIM/','sample10 with spaces (ezee's).jpg', '/mnt/sdcard/DCIM/?');">
        copy
    </a>
</td>

JS code

var selectedFile = 'noFile';
var selectedFile2 = 'noFile';

function confirmDel(t, p) {

    var confirmDeltxt = 'Are you sure you want to delete ' + t + '?';
    selectedFile = decodeURIComponent(t);
    selectedFile2 = decodeURIComponent(p);
    jQuery.prompt(confirmDeltxt, {
        callback: confirmDelcallback,
        buttons: {
            Delete: 'ok',
            Cancel: 'cancel'
        }
    });
    return false;

}

function confirmDelcallback(v, m, f) {
    if (v != undefined && v == 'ok') {

        var form = document.forms.filelist;
        form.action.value = 'delete';
        form.data_file.value = selectedFile2 + "/" + selectedFile;
        form.submit();


    }
}


function confirmRen(p, f, cp) {

    selectedFile = decodeURIComponent(p);
    selectedFile2 = decodeURIComponent(f);

    var confirmRentxt = 'Enter new file name:<br /><br /><input type="text"       id="newPath" name="newPath" value="' + f + '" />';


    jQuery.prompt(confirmRentxt, {
        submit: confirmRensubmit,
        callback: confirmRencallback,
        buttons: {
            Rename: 'ok',
            Cancel: 'cancel'
        }
    });
    return false;
}

function confirmRensubmit(v, m, f) {
    an = m.children('#newPath');

    if (v == 'ok') {
        if (f.newPath == "") {
            an.css("border", "solid #ff0000 1px");
            return false;
        }
    }
    return true;

}

Answer 1

You must escape ‘ in lines like this when you output HTML. Resulting HTML should look like this:

onclick="return confirmCopy('/mnt/sdcard/DCIM/',
                            'sample10 with spaces (ezee\'s).jpg', 
                            '/mnt/sdcard/DCIM/?');"

(new rows just for better appearance)

How you will do that depends on your server side language, but replacing ‘ with \’ should be enough.