3

I using remote action and getting the list image url into visualforce page

ie result=[photo1.jpg,photo2.jpg,photo3.jpg]

Now i want to display these image with image tag as below mentioned.

<div class="galleria">
<img src="photo1.jpg">
<img src="photo2.jpg">
<img src="photo3.jpg">

how to send the list of image urls as mentioned

2 Answers 2

1

You can use jquery to achieve this .Import jquery library first

<div class="galleria">       
<script type="text/javascript">
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
function message() {
    Visualforce.remoting.Manager.invokeAction(
        '{!$RemoteAction.MobileHomeCtrl.Imgdisplay}',
        function(result, event){
            if (event.status) {
                // Get DOM IDs for HTML and Visualforce elements like this
                   $.each(result,function( i, val){
                          var img = $('<img />').attr({ 'src':val, 'alt':'MyAlt' }).appendTo($('#galleria'));       
                    });
            } else if (event.type === 'exception') {
               alert(event.message);
            } else {

            }
        }, 
        {escape: true}
    );
}
</script>
8
  • There is no need to import a whole JQuery library only to perform a couple of lines of basic javascript code :) Commented Jun 10, 2014 at 2:05
  • Agree mate :).But Ideally if the project uses Javascript remoting you frequently need this library for other dom manipulations and hence jquery is usually present .Also if you see code using jquery its just two lines and its very small library as well .For more complex problems you will see the actual use case Commented Jun 10, 2014 at 2:08
  • Everyone with their preferences :) Could be any other JS library as well, depending on the needs. I personally prefer pure JS as I have better control over it. Commented Jun 10, 2014 at 2:09
  • instead of class can i append to an id i.e.<div id="galleria">
    – user6833
    Commented Jun 10, 2014 at 4:58
  • MODIFIED ..you can with id selector Commented Jun 10, 2014 at 5:01
1

On complete of your VF remoting action, in the success block you need to dynamically create those HTML elements and append them to the parent. Without looking at your actual code, it should be something like this:

var parentElement = document.getElementById('galleria');

for (var i = 0; i < result.length; i++)
{
    var image = document.createElement('img');
    image.src = result[i];
    parentElement.appendChild(image);
}

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .