jquery raty and jquery ui map adding stars to the infowindow dynamically based on data from getJson()

Question

I have a problem with proper configuration off dynamically adding of ratings to the info window of jquery ui map.

First I tried to do it in on the go in $.each of getJson like that:

$(labelka).raty({ readOnly: true,  score: marker.friendly_rate});

where labelka was before set to: var labelka = "#spot"+marker.id where marker.id is value of id from row from getJson, and friendly_rate is numerical value apporpriatlly.

Result: NO SUCCESS:

Second try: I thought, before you refere to something it has to exist. So wait until jqxhr=getJson finsh. So in getJson() I only append to the gloably visible dictionary key:values as follows:

pair_mark[labelka]=marker.friendly_rate

And then inside of `jqxhr.complete(function() {} I trie to do

jqxhr.complete(function() {

for (var key in pair_mark){
    $("#map_canvas").find(key).raty({ readOnly: true,  half  : true, score: pair_mark[key] });
}
  console.log( "second complete" );
});`

also: NO SUCCESS

even while trying:

$(key).raty({ readOnly: true,  half  : true, score: pair_mark[key] })

Screenshot of Google Chrom console (BIGGER RESOLUTION):

And link to source code: https://gist.github.com/andilab/2efe76bb1ffbeeaa26ee

Answer 1

There are 2 issues:

 var labelka = "#spot"+marker.id
 var html_part ="<div id=\""+labelka+"\"></div>";

this will create the following markup:

<div id="#spotSomeMarkerId"></div>

This node may not be selected in jQuery by using $('#spotSomeMarkerId'); , because the # must be ommitted in the id-attribute of the <div/>.

The basic problem: The content of the InfoWindow is provided as string, the DOM for this content will be available when the domready-event of the InfoWindow fires, not before. You can't call $.raty() for the paricular InfoWindow before that.

Possible solutions:

• as mentioned, wait until the domready-event fires
• use a DOM-Node as content for the InfoWindow, in that case you may call raty as soon as you have created the DOM-Node(no matter if the Node has already been injected into the document/the InfoWindow is open)

---

code for the 2nd approach(use it as replacement for the lines 121-123 of your gist):

var contencik = $('<div><h4>'+marker.name+'</h4><br>'
                    + marker.address_street
                    + ' '+marker.address_number
                    + '<br>Rating:</div>')
                  //the content is ready, it's a query-object
                  //now we append-the raty-container and call raty immediately
                  //for this container
                  .append($('<div id="spot'+marker.id+'"></div>')
                            .raty({ readOnly: true, score: marker.friendly_rate}))
                  //the content is still a jQuery-object
                  //we need a DOM-node to pass it to the 
                  //content-property of the InfoWindow
                  [0];