Cannot get images to load inside a collapsible.

[Joe7349603]

I am creating a rating functionality, in which a user submits a rating 1-5 and that value is stored in DB. When searching for a rating I want to convert the value above into a star 1 star...5 star. I have images uploaded in the media manager and based on the value I get on the query I show the relevant image.

As you see below my label is grabbing the value ok from the DB and populates it all the way down but not the image which only appears on the first block. The image are invisible so I am doing image.show based on the value. See the code below..I have also played with different lines of code and nothing has solved it..Any hints?

code
var theRating = Apperyio("userRatinglabel").val();
//SHow image
if (theRating == "2"){

Code: Select all

       //Appery('redimage').attr('src', "redimage.png");  
       Apperyio('redimage').show(); 
       //return '{"redimage":"'+value+'"}'; 

} else { 
           //Appery('blueimage').attr('src', "blueimage.png");  
    Apperyio('blueimage').show(); 

} 

/code

[Illya Stepanov]

Hi Joe -

Everything is seems to be OK, could you please share with us your app (and tell us its name with steps how to test it) or please post a public link to your app here. We'll need to take a closer look.

[Joe7349603]

Illya,

I have shared the app which is called 'Rate A Mat'. From page 'Read_Review' or from main window click on 'Read Reviews From Others' inside the app there is mobilegrid_114 where I have a label and 2 images redimage and blueimage which are both invisible.

Test Script:
Search by license# use ZNS193 OR search by SACCO use KIM. The label should populate with the rating (used for debugging only) and ideally if the rating is 1 then show redstar else show blue star. The real life scenario will involve 5 images each representing 1 rating...5 rating. But for this purpose I was testing the scenario using only two sample images. The code I have above is currently commented.

Thanks for your support.

[Yurii Orishchuk]

Hi Joe,

It seems you have incorrect code cause of you try to hide/show only first image.

So please try following JS code:

pre

var theRating = Apperyio("userRatinglabel").val();
//SHow image
if (theRating == "2") {

Code: Select all

 var image = jQuery(this).closest(".ui-collapsible").find('[name="image"]'); 

 //image.attr('src', "redimage.png");  
 image.show(); 
 //return '{"redimage":"'+value+'"}'; 

} else {
var image = jQuery(this).closest(".ui-collapsible").find('[name="blueimage"]');

Code: Select all

 //image.attr('src', "blueimage.png");  
 image.show(); 

}

/pre

Regards.

[Joe7349603]

Thanks Yurii,

I have tried the code above and unfortunately doesn't work. Is there a looping effect needed? I have tried other code as well and just for clarification I am putting my code in the success event of the label as shown below but I did try in other areas as well. The commented lines are the original code you suggested the un-commented is what I tried.

Am I Still missing something?

code
var theRating = Apperyio("userRatinglabel").val();
var collapsible = jQuery(this).closest(".ui-collapsible");
//SHow image
if (theRating == "4") {
//var image = jQuery(this).closest(".ui-collapsible").find('[name="redimage"]');

var image = collapsible.find('[name="redimage"]');

image.show();
} else {
//var image = jQuery(this).closest(".ui-collapsible").find('[name="blueimage"]');

var image = collapsible.find('[name="blueimage"]');

image.show();
}
/code

[Yurii Orishchuk]

Hi Joe,

Please show us full mapping.

Also please specify is there any errors in console?

Regards.

[Joe7349603]

OK, I really need help here I have checked, double checked and tried lots of code but nothing is working. The code below was my last attempt which I think the code is OK but I may be wrong. I do not have any errors in F12 . userRatinglabel is where I am storing the rating value after I get it from DB and it is populating well. mobileimage_125 is an empty image which I intend to populate with buleimage or blackstar depending on the rating value.

Really appreciate help

code
//SHOW IMAGE

var theRating = Apperyio("userRatinglabel").val();

if (theRating == "4") {

var myimage = jQuery(this).closest(".ui-

collapsible").find('[name="mobileimage_125"]');

Appery(myimage).attr("src",Appery.getImagePath("blueimage.png"));
myimage.show();

} else {
var myimage = jQuery(this).closest(".ui-

collapsible").find('[name="mobileimage_125"]');

Appery("myimage").attr("src",Appery.getImagePath("blackstar.png"));

Code: Select all

 myimage.show(); 

}
/code

[Yurii Orishchuk]

Hi Joe,

Checked your app and see following errors:

1. "ratings" response parameter you declared as array but actually it's number.

2. this code you need to use in mappings not in "success" event handler(as you do it now).

3. You need to add JS code to "link" from "$" to collapsible.
   Details: http://prntscr.com/6c2g6k/direct

4. Populate this JS with following code:

   pre

   var theRating = value.Ratings;

   console.log("theRating = " + theRating);

   //SHow image
   if (theRating == "2") {
   var image = element.find('[name="blackstar"]');
   //image.attr('src', "redimage.png");
   image.show();
   //return '{"redimage":"'+value+'"}';
   } else {
   var image = element.find('[name="blueimage"]');
   //image.attr('src', "blueimage.png");
   image.show();
   }

   /pre

   I've fixed it please check it in your app.

   Regards.

[Joe7349603]

Many thanks Yurii, Will check it and update.

Thnx

[Joe7349603]

Got it working as expected thank you. For those interested in my user rating hack not the cleanest way but surely gets the job done for me and can maintain it myself (I was unable to install 3rd party plugin) :

• Used a slider to glab the rating value from the user and upload it on the DB
• Stored images in media manager Ratings1...Ratings5
• Displays relevant image based on the rating.
• Since I am using collapsible the key is to put the code fro displaying the relevant image inside the "$" as shown above, failure to which only the first review will populate. That was the main issue with my case.