retrieve filename javascript/jquery

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;

}

Viktor S. · Accepted Answer · 2012-09-10 14:40:40Z

2

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.

answered Sep 10, 2012 at 14:40

Viktor S.

12.8k1 gold badge30 silver badges56 bronze badges

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

Comments

hndr · Accepted Answer · 2012-09-10 14:45:26Z

0

First of all, I am not sure why are you playing with /mnt/sdcard stuff in a web page, but if your editor have a syntax highlighting feature you would immediately see that your code are a mess. here is an example:

<a href="#" onclick="return confirmDel('/mnt/sdcard/DCIM/sample10 with spaces (ezee's).jpg', '/mnt/sdcard/DCIM/?');">
    delete
</a>

i am not even sure some those are a valid file path. that aside, what you need to do is to escape the characters. For example,

onclick="return confirmDel('/etc/ezze\'s.jpg');"

I am not sure about your jquery codes, but it seems quite messy as well, its better if you check it.

answered Sep 10, 2012 at 14:45

hndr

76515 silver badges29 bronze badges

2 Comments

kalz Over a year ago

thanks for pointing that out."/mnt/sdcard/" because I am generating the html pages on the fly,based on the requested uri on android web server. On click "return confirmDel('filename','filename.getparent()/?') is fetched programatically so I believe I must escape the programatically fetched strings.Probably I have to do it in java then.Had a look around in the meantime.StringEscapeUtils looks like a good option.

hndr Over a year ago

i am not sure what does it have to do with Java , but if those HTML are generated by the server-side code, and you are using Java on the server side, then yes, you should do it in Java.

Collectives™ on Stack Overflow

retrieve filename javascript/jquery

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related