node.context.nextElementSibling.value nothing in IE8

Hi,

I am building an sftp application. It has requirements to upload and download. To upload, a target folder that exists on the server needs to be set.

I have a jQuery folder tree that dynamically creates a tree view of a directory on the server. Currently in Firefox, Opera, and Chrome if someone clicks on a branch of the tree on the afterClick event I am able to get the target path by using the DOM via node.context.nextElementSibling.value; The code for the afterClick is:

afterClick:function(node){
                //get the path from the input located within the clickon node
                [COLOR=DarkGreen][B]var full_path = node.context.nextElementSibling.value;[/B][/COLOR]

                if (typeof full_path != "undefined") {
                    var folder_target_path;
                    //find if path contains a (.) period to designate it has a file within the path
                    // if so then remove the file part of the path
                    var pathRE = /\\./;
                    if (full_path.match(pathRE)){
                        folder_target_path = full_path.replace(/\\/[^\\/]*$/, '');
                    } else {
                        //set the folder path as is. File was not included in the path
                        folder_target_path = full_path;
                    }
                    var str_arr;
                    var end_folder = '';
                    str_arr = folder_target_path.match(/\\/[^\\/]*$/);
                    end_folder = str_arr[0].replace(/\\//g, '');
                    var upload_target_path = "<input type='hidden' name='upload_target_path' value='" + folder_target_path + "' />";
                    $span_value_start = '<span style="color: green; font-weight: bold">';
                    $span_value_end = '</span>'
                    $('span#target_input').html(
                            $span_value_start 
                            + end_folder
                            + upload_target_path
                            +$span_value_end
                    );
                    $('#upload_blanket').hide();
                }
        }

This is what the file tree dynamically created by jQuery looks like – firefug output:

And what the hidden input looks like after the file tree has been selected as the target:

The problem I am having is that IE8 does not see the

node.context.nextElementSibling.value

so the target path is not set.

Do you have any ideas where I can find the value for the selected (not to be confused with submitted) tree branch and like node.context.nextElementSibling.value grab the value of the input next door to the clicked on li input?

In the case you can help, I’ve attempted to make a fairly complex application as simple for you to understand - hopefully it is enough ;).

Your ideas are appreciated.

Regards,
Steve

nextElementSibling is only supported in IE9. But if you have jQuery you might as well use its next() method.

Also, what is context? Is it a custom property?

Hi Raffles

Thanks for clarifying, I will try next() in jQuery. I kind of stinks, but prior to using nextSibling I checked msdn.technet.com and they had a chart where it said this selector was supported since i.e.7 :nono:

context is derived by jQuery, it was one of the few locations I found in firebug that I could reference the inputs value before the POST.

Regards
Steve

Just a FYI

I added a class to the dynamically created input:

<input type="checkbox" value="/var/www/DA_SFTP/clients/liviam/test" name="selectedTargets[]" class="current_target">

And then just reference with jQuery in the ever so much easier way:

var full_path = $(".current_target").val();

This works ie6 - ie9.

Cheers,
Steve

msdn.technet.com is not wrong. nextSibling is supported by IE since IE6 (and before, probably).

It’s nextElementSibling I was talking about.

Yup - gottcha my error, anyway I have it solved another way (see above).

Regards,
Steve

Update:

Well it turns out the added class method does not work once multiple dynamic inputs are added for the obvious reason that jQuery will select the first instance of the class so if you click on a deeper nested input the selector gives the wrong input.

I ended up using Raffles original suggestion which works properly:

var full_path = $(node.context).next().val();

Regards,

Again this approach works in Ie6 - Ie9

Thank you Raffles!

Steve