Troubles with multiple ajax requests from different instances of a custom element on the same page

[Riccardo M.]

Hi there,

I've got the following scenario:

- I created two Polymer Elements, let's call them respectively "interpreter" and "viewer"

- Basically, the "interpreter" makes an AJAX request to get data with jQuery $.ajax(). When the request is completed, the interpreter processes the answer, and provides it to the "viewer".

- When the interpreter finishes to process the data, the "viewer" is registered (just once) and instantiated into the "interpreter" (it is appended to a div inside the "interpreter" template). The "viewer" gets the data from the "interpreter" as attribute directly in the declaration tag (like this: <polymer-viewer data="{json object}></polymer-viewer>).

When I declare just one instance of the "interpreter" I've got no problem to display correctly the "viewer".

Same result when I declare more than one instance of the "interpreter" with the same URL in the AJAX request.

I noticed that when I declare more than one instance of the "interpreter" (hence, when I want to display more than one "viewer") with different URLs in the AJAX request, only the first "interpreter" that receives a response from the AJAX request is able to render correctly the "viewer" (i.e. when the second instance gets the results, the results set is null, although in the declaration tag I can see the attribute with the dataset from the "interpreter").

It seems a synchronization problem between the AJAX request and the instantiation/rendering task.

In fact, serializing the AJAX requests (setting async = false) both the "viewer" can be rendered.

Any suggestions?

Thank you :)

[Eric Bidelman]

Can you provide a jsbin of what you're trying to do? It's hard to debug code without code :)

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/b8ebe1ab-c92c-4131-a073-343133b91e7e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Scott Miles]

Fyi: http://stackoverflow.com/questions/23063667/troubles-with-multiple-ajax-requests-from-different-instances-of-a-custom-elemen

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCAghrCU6iDcpDcf%3D510-PkC9G-HF-knu1T3pambVGkUiA%40mail.gmail.com.

[Riccardo M.]

Eric, you're absolutely right :) I've just published a lighter version of the original code (it doesn't work anyway, now even if I make the same ajax call it doesn't work): http://jsbin.com/vexeq/7/edit?html,output

After execution, you'll find this in console.log: 

Uncaught TypeError: Cannot read property 'photos' of null

I don't think it is a parseJSON error, because in the original implementation I use the same method to parse other json string and it works.

Thank you for your support! :)

[Riccardo M.]

Hi Scott, I'm the author of the question on Stack Overflow :) I've just published a lighter version of the original code (it doesn't work anyway, now even if I make the same ajax call it doesn't work): http://jsbin.com/vexeq/7/edit?html,output

After execution, you'll find this in console.log: 

Uncaught TypeError: Cannot read property 'photos' of null

I don't think it is a parseJSON error, because in the original implementation I use the same method to parse other json string and it works.

Thank you for your support! :)

[Scott Miles]

Your main problem is that the AJAX call is asynchronous, but you expect the data to be there synchronously. IOW, you are trying to use `filteredDataset` before the AJAX data is back from the network.

As it happens, you can also reduce your project code dramatically by taking advantage of several polymer features. Here is a reduced version:

http://jsbin.com/vekes/4/edit

Notice that JQuery is no longer necessary.

I made a lot of changes, please follow up with any questions.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/d7e66a48-ad7c-4b85-8c10-4ca941429f3f%40googlegroups.com.

[Riccardo M.]

Amazing! Thank you Scott! :)

Now it works, but I have a slightly different scenario: let's suppose to have more than one viewer available (like <vapi-list> and <vapi-grid>), hence when I load the page I don't know what viewer I'll need to instantiate into <vapi-interpreter>. 

In the <vapi-interpreter> template I declared a "viewer" attribute, when viewer is equal to 0 I need to dynamically instantiate a <vapi-list>, when it is equal to 1 I need a <vapi-grid> (using the same AJAX data, obviosly!).

Also, I would like to import just the html template files I need. When I load the page I must import just the <vapi-interpreter> template, and then the <vapi-list> and <vapi-grid> templates just if I need them. I noticed that if I import all the template files (even if I don't use all of them) when I load my page, then it works. But when I try to import at runtime the template I need, and I have 2 <vapi-interpreter> in my page, just the latter is rendered. Is there any way to import correctly a template at runtime?

Last question (I promise! :) ), how can I access to the <div> into a nested template? Like this:

<template>

....

     <template if="{{filteredDataset}}">

       <div id="vapiViewer" style="width:{{vWidth}}; height:{{vHeight}};">

         <vapi-list filteredDataset="{{filteredDataset}}"></vapi-list>

       </div>

     </template>

.....

</template>

when I try to access to <div id="vapiViewer"></div> with this.$.vapiViewer it doesn't work :( maybe because it is a conditional template?

Thank you so much for your support! :)