Javascript disappears from my view partials when they're rendered as response to ajax calls.

Hey people :slight_smile:

I'm having some serious trouble understanding what's going on with my
application ATM.

I am creating a manager for tree structures with drag-and-drop
functionality and such. It's very generic, so it makes no assumptions
about the objects it works on (apart from the existence of ids and
parent_ids in the objects). It sort of wraps around partials that are
specific to the models that go in the tree, one partial for viewing,
and one for when you're creating new model instances inside the tree.

That means I have a create link on nodes (that are saved and thus have
an id) that creates a preset child node of the current node by
assigning the current node's id value to the child node id, then
renders the forementioned partial that is used to edit the actual data
fields of the object in the node.

Because I want a generic approach, I don't want to make any
assumptions about how these partials are implemented, and I tried to
put as little demand as possible on what they needed to be able to do.
So far, the only thing I absolutely need to know ("I" being the tree,
or more precisely, the parent node of the soon-to-be child node that
has just been rendered after the user clicked the "create new child
node of this node" link) is when the child node's editor has saved the
new child node successfully. I need to know that, so that I can add,
e.g. a "create new child node" link to the child node that has just
been saved.

I figured I'd do that using javascript callbacks, since everything is
ajax anyway, so existing nodes stay pretty much the same
"internally" (inside their surrounding divs) even if new leaf nodes
are added or nodes are moved around.

So, I thought that for new nodes, I'd generate and pass on a
javascript callback function which was to be called by the editor
partial after it had saved the node successfully and thus caused it to
have a unique id, and be allowed to have its own child nodes.

However, and this is where it gets weird, I cannot seem to get any
kind of javascript to render in my views when the views are rendered
as a response to an ajax request, like link_to_remote, or
remote_function.

Put simply, if I refresh my page, as in a regular GET html request,
this causes the root nodes to be drawn in a "standard" way
(index.rhtml iterates over nodes, and renders the partial 'tree_node'
for each), then I can inspect the DOM in firebug and confirm that all
script portions of the partial view are rendered correctly, e.g.
  <script type="text/javascript">alert('hello');</script>

This not only alerts 'hello', the script tags and contents are also
visible in firebug.

But, if I then expand one of these root node, which means triggering a
link_to_remote that causes the exact same view partial to be rendered
into a "children" div, the scripts "disappear". Depending on where I
put the scripts in the partial, I might get an alert box greeting me,
but the script is nowhere to be found in firebug regardless. And, if I
actually define a callback and try to call it, either from a nested
partial, or by typing it into the address line of the browser, I
simply get the response that it isn't defined...

I am totally stomped!

Please, please, someone help me find out what's going on here... I'm
frustrated beyond what's healthy.

Cheers and thanks in advance for any pointers,
Daniel

Daniel Smedegaard Buus wrote:

[snip]

However, and this is where it gets weird, I cannot seem to get any
kind of javascript to render in my views when the views are rendered
as a response to an ajax request, like link_to_remote, or
remote_function.

Put simply, if I refresh my page, as in a regular GET html request,
this causes the root nodes to be drawn in a "standard" way
(index.rhtml iterates over nodes, and renders the partial 'tree_node'
for each), then I can inspect the DOM in firebug and confirm that all
script portions of the partial view are rendered correctly, e.g.
  <script type="text/javascript">alert('hello');</script>

I wonder if you have the evalScripts option turned ON in your AJAX call.
Check the prototype API for more detail.

http://www.prototypejs.org/api/ajax/updater

-- Long
http://MeandmyCity.com/ - Free online business directory for local communities
http://edgesoft.ca/blog/read/2 - No-Cookie Session Support plugin for Rails

Hi Long, thanks for your reply :slight_smile:

It does seem like a possibility. I just don't know how to test for
that? Or how to turn it off... Do you know?

Cheers,
Daniel :slight_smile:

Hi,

Hi Shawn, thanks for writing back :slight_smile:

Is the disappearing script contained within the partial that's being
re-rendered?

Yes, it is.

If so, move it to a page level. I was doing the same kinda thing when
partials being rendered / re-rendered contained javascript needed to do
app-specific stuff.

I think that would fix it, yes. Only thing is, I need the context to
be that of the current node. The call is different for each node...
But, it really _should_ be just one function, taking two parameters,
the div to reload, and the id of the node content object to use for
that operation. I think I'd better work towards doing what you say,
and getting that script down at page level. That would also save a lot
of memory and bandwidth.

Hope this helps!

I'll try it out and see if I can make it work! Thanks for the tip :slight_smile:

Will report back!

Daniel :slight_smile:

Hey, if you post the relevant code, then people within this group can
better assist you. For example, view, partials, and other relevant
code.

-Conrad

Alright :slight_smile:

Here goes, but I'm in the middle of making that js function generic,
so it's not all kosher there :wink:

Also, note that I pass along :update, :partial, and
optionally :partial_on_failure on my remote requests. This is because
I need to update more than one thing when rendering the results (I've
created a status console div that pops up with error messages for
models, and notices and warnings) - I handle these params myself, and
shouldn't be considered equivalent to those normally placed in the
options hash for remote requests.

Here's the code:

<%
  # Get the controller name from the locals hash (if someone
initialized us), from the params (if we called ourselves),
  # or from the controller that was called which resulted in this view
being rendered.
  controller_name ||= params[:poly_tree_controller_name] ||
request.parameters['controller'] || raise("I need to know what
controller to query when doing stuff with the tree nodes!")

  # Get the node from the locals hash, or look for one instantiated in
the controller:
  node_instance_name = controller_name.singularize.sub(/^.+\//, '')
  node = node || instance_variable_get("@#{node_instance_name}") ||
raise("I need a node to start rendering the tree!")

  # Get the class for the node:
  node_class = Kernel.const_get(node.class.to_s)

  # Did we get a parent_content_id via params?
  parent_content_id = params[:poly_tree_parent_content_id]
  # Also, when rendering children, we actually send the parent, then
state that we want the children. Let's remember the parent's id:
  parent_node_id = node.id

  # Check if we're supposed to render the children rather than the
node itself:
  expanded = (params[:poly_tree_expanded] &&
params[:poly_tree_expanded] == 'true')
  # If we are, we throw the children in an array, otherwise we just
through this node in an array:
  nodes = expanded ? node.children : [node]

  # Get a content_partial and create_partial from the locals hash (if
someone initialized us),
  # from the params (if we called ourselves), or try defaults in the
appropriate view directory:
  content_partial ||= params[:poly_tree_content_partial] || "/
#{controller_name}/tree_node"
  create_partial ||= params[:poly_tree_create_partial] || "/
#{controller_name}/edit"

  # Is this an unsaved model?
  model_is_unsaved = node.id.nil?

  # Is this create mode?
  create_new_after_render =
(params[:poly_tree_create_new_after_render] &&
params[:poly_tree_create_new_after_render] == 'true')

  # Render whichever nodes we're supposed to render:
  nodes.each { |node|
    content_element_id = model_is_unsaved ?
"new_child_node_#{Time.now.to_f.to_s.gsub(/
\./,'')}_of_#{node_instance_name}_#{node.parent_id}" :
"tree_node_for_#{node_instance_name}_#{node.id}" %>

# HERE'S ME CURRENTLY EDITING THIS FUNCTION, SO EXPECT THINGS TO BE
BROKEN :wink:
    <%= ("function #{reload_function}(target_element_id, model_id) {"

Okay, so this actually worked out great. It's a better approach
anyway, and it took it one step farther, splitting the partial in two,
a _tree partial which is the one you'd call giving it one or more root
nodes, and a _tree_node partial, that the _tree partial calls
initially, and each node can call individually afterwards when
expanding, creating, etc. The _tree partial contains (in a few
hours :wink: all major javascript function, and the _tree_node partials
will then call those javascript functions with the appropriate
options. This should be faster and use less memory and bandwidth. The
right way to go either way :slight_smile:

Thanks all, for your tips and efforts :slight_smile:

Daniel