JQuery Widget - Pass options by reference

Question

I have two JQuery widgets, one is a sort of 'main' widget, the other could be considered a child. The child handles gathering specific data which is required by the main. The main is used with AJAX requests. So, the main has a set of options which are sent to the server. One of these options is also an option in the child.

To make this more clear, I have a main widget which has a few options. It then creates and appends a child widget. This child widget has an additional option that is required to be filled in the main widget before an AJAX request may be sent. In order to make this work, I am passing to the child: this.options.someArray

This works fine, however when changes are made to that array in the child widget, they never reach back to the main widget. This means the AJAX request sends an empty array in this place. How can I fix this?

[If this is not standard behavior - I can post a code sample]

Code sample for main Widget:

$.widget('be.deckEditor', {
  options: {
    deck: { name: "", id: 0, cards: [],  tags: [] }
  },

Code to create child Widget:

tagEditBox = $('<div>');
tagEditBox.tagEditor({tags:this.options.deck.tags});

Widget _Init code:

_init: function () {
  this.options.tags = ['ace','two'];
},

You should post the code, because a shared reference to an array is a shared reference to an array :-) If the reference doesn't seem to be shared, then something in your code is doing something like making a copy of the array; JavaScript won't do that on its own. — Pointy, Apr 03 '11 at 19:02

score 0 · Accepted Answer · answered Apr 03 '11 at 19:25

0

If you want that "_init" code to re-set the "tags" contents, then don't set it to refer to a brand new array:

_init: function () {
  this.options.tags[0] = 'ace';
  this.options.tags[1] = 'two';
  this.options.tags.length = 2;
},

You could write a function to make a target array contain what another array contains; I don't think there's one built in but I can't recall ever wanting to find such a thing:

function arrayCopy(src, dest) {
  for (var i = 0; i < src.length; ++i) dest[i] = src[i];
  dest.length = src.length;
}

(The last line is only necessary if you want the destination to be a complete copy, length and all.)

answered Apr 03 '11 at 19:25

Pointy

405,095
59
585
614

Thank you, I am new to javascript, didn't realize that doing this created a new array and changed the reference. – Serodis Apr 03 '11 at 19:36
About array copy function, there is native trick: var arr_copy = arr.slice(0); – Johnner Apr 03 '11 at 20:08
@Johnner oh well duhh :-) --- oh no wait a sec; that makes a copy of an array, which is exactly what we **don't** want to do here. We want to copy from a source array **into** an **existing** target array. – Pointy Apr 03 '11 at 20:09
ahh, yeah...var ar2 = ar2.concat(ar.slice(0)); You are right, there is no simple native function :-) --- and have to empty target array before manipulations...olala ^^ – Johnner Apr 03 '11 at 20:15

JQuery Widget - Pass options by reference

1 Answers1