Problem echoing php string as javascript function

Question

I'm using Jaipho to display images to a mobile gallery from a custom Wordpress plugin. The wordpress theme that uses the Jaipho gallery is displayed using the WP-mobile-detector plugin.

The problem I am having is when I use php to gather the URLs to the photos to echo out a function to be parsed by javascript. I took the resulting static javascript code from the element inspector of Safari and pasted it into my code, commenting out the php, and it works everywhere. Safari for iOS doesn't seem to like the javascript code generated by the php.

• HTML 5
  • <DOCTYPE html>
  • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  • <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
• PHP 5.2.6
• Wordpress 3.2.1

When it works:

• User Agent set to iPhone on Safari

• Static code replaces php-generated code

  $imageArray = $case->images_assc_array();  
  $i = 0;  
  foreach($imageArray['views'] as $view_name => $view_images) {  
     $before_img = $view_images['before'];  
     $after_img = $view_images['after'];  
  
     echo "dao.ReadImage($i,'".$before_img->medium_size()."','".$before_img->small_size()."','".ucfirst($view_name)." Before','".$case->description."');";  
     $i++;  
     echo "dao.ReadImage($i,'".$after_img->medium_size()."','".$after_img->small_size()."','".ucfirst($view_name)." After','".$case->description."');";  
     $i++;  
  }
  

Expected example generated output:

    dao.ReadImage( 0,'/wp-content/uploads/rmgallery_images/medium/408/before-front.jpg','/wp-content/uploads/rmgallery_images/small/408/before-front.jpg','Front Before','38 year old who underwent a tummy tuck.');  
    dao.ReadImage( 1,'/wp-content/uploads/rmgallery_images/medium/410/after-front.jpg','/wp-content/uploads/rmgallery_images/small/410/after-front.jpg','Front After','38 year old who underwent a tummy tuck.');
    dao.ReadImage( 2,'/wp-content/uploads/rmgallery_images/medium/409/before-side.jpg','/wp-content/uploads/rmgallery_images/small/409/before-side.jpg','Side Before','38 year old who underwent a tummy tuck.');
    dao.ReadImage( 3,'/wp-content/uploads/rmgallery_images/medium/411/after-side.jpg','/wp-content/uploads/rmgallery_images/small/411/after-side.jpg','Side After','38 year old who underwent a tummy tuck.');

Answer 1

Credit to @Marc B and @linuxrules94 for a combined solution:

<?php
$imageArray = $case->images_assc_array();
$i = 0;

    foreach($imageArray['views'] as $view_name => $view_images):
        $before_img = $view_images['before'];
        $after_img = $view_images['after'];
    ?>

        dao.ReadImage(<?=json_encode($i);?>, <?=json_encode($before_img->medium_size());?>,<?=json_encode($before_img->small_size());?>,<?=json_encode(ucfirst($view_name));?> + " Before", <?=json_encode(stripslashes($case->description));?>);
        <? $i++; ?>
        dao.ReadImage(<?=json_encode($i);?>, <?=json_encode($after_img->medium_size());?>,<?=json_encode($after_img->small_size());?>,<?=json_encode(ucfirst($view_name));?> + " After", <?=json_encode(stripslashes($case->description));?>);
        <? $i++;
    endforeach; ?>

Thanks, everyone!

Answer 2

How about using heredocs: http://php.net/manual/en/language.types.string.php

Answer 3

You have some mismatched quotes:

echo dao.ReadImage($i,'".$before...

echo "dao.ReadImage($i,'".$after...

and so on.

Try these:

echo 'dao.ReadImage('.$i.',"'.$before_img->medium_size().'","'.$before_img->small_size().'","'.ucfirst($view_name).' Before","'.$case->description.'");';
echo 'dao.ReadImage('.$i.',"'.$after_img->medium_size().'","'.$after_img->small_size().'","'.ucfirst($view_name).' After","'.$case->description.'");';