0

In order to show a list of values fading continuously, I queried the values in the controller and trying to iterate in a component using array in jQuery. But it throws an error "Unknown property 'NewsController.i'". I'm able to complete it when I write separate div for each record, but I wanted to use arrays. So would like to know where I messed up in the code. Any help would be appreciated.

Controller:
public class NewsController {
    public List<News__c> newsA {
        get {
            newsA = [SELECT Id, entered_Date_c, Content__c FROM News__c ORDER BY entered_Date_c ASC];
            return newsA ;
        }
    set;
    }
}

Component:
<apex:component id="newsId" controller="NewsController">
<apex:includeScript value="{!URLFOR($Resource.jQuery)}"/>
<apex:attribute name="newsNow" type="string" required="true" description="To show entered news"/>
<div style="float:left; background-color: lime;" id="newsPanel">
    <apex:repeat value="{!newsA}" var="new">
    <script>
        //Script Source: http://stackoverflow.com/
        //Modified a bit to match the needs
        var listTicker = function(options) {
                var defaults = {
                    list: [],
                    startIndex:0,
                    interval: 3 * 1000,
                }   
                var options = $.extend(defaults, options);
                var listTickerInner = function(index) {
                    if (options.list.length == 0) return;
                    if (!index || index < 0 || index > options.list.length) index = 0;
                    var value= options.list[index];
                    options.trickerPanel.fadeOut(function() {
                        $(this).html(value).fadeIn();
                    });
                    var nextIndex = (index + 1) % options.list.length;
                    setTimeout(function() {
                        listTickerInner(nextIndex);
                    }, options.interval);
                };
                listTickerInner(options.startIndex);
            }
            for(var i=0; i<new.length; ++i) {
                {!new[i]}
            }
           $(function() {
                listTicker({
                    list: newsA,
                    startIndex:0,
                    trickerPanel: $('#newsPanel'),
                    interval: 3 * 1000,
                });
            });
            </script>
    </apex:repeat>
</div>
</apex:component>

Page:
<apex:Page>
   <c:News newsNow="" />
</apex:Page>
2
  • 2
    There's a lot wrong with the way you're mixing Javascript and Visualforce tags. One of the biggest issues you should fix first, is that your apex:repeat tag creates the Javascript code repeatedly for every entry in the list 'newsA'. And then you can't use {!new[i]}. You're trying to execute Apex from Visualforce using a variable from Javascript. The Visualforce page and the Apex code are executed in the cloud and generate an HTML page which will then be delivered to the browser. Only then is the Javascript executed.
    – FrankZ
    Jul 9, 2014 at 9:48
  • I've not familiarized with JS in VF. Thank you for briefing the functionality.
    – Seesh
    Jul 9, 2014 at 15:12

1 Answer 1

1

I think your are not fully aware of VFP coding and javascript.

   Controller:
    public class NewsController {
        public List<News__c> newsA {
            get {
                newsA = [SELECT Id, entered_Date_c, Content__c FROM News__c ORDER BY entered_Date_c ASC];
                return newsA ;
            }
        set;
        }
    }

    Component:
    <apex:component id="newsId" controller="NewsController">
    <apex:includeScript value="{!URLFOR($Resource.jQuery)}"/>
    <apex:attribute name="newsNow" type="string" required="true" description="To show entered news"/>
    <div style="float:left; background-color: lime;" id="newsPanel">
        <!-- <apex:repeat value="{!newsA}" var="new">--> //Wrong way to itrating the list
        <apex:repeat var="new" value="{!newsA}">
            {!new}
        </apex:repeat>

        <script>
            //Script Source: http://stackoverflow.com/
            //Modified a bit to match the needs
            var listTicker = function(options) {
                    var defaults = {
                        list: [],
                        startIndex:0,
                        interval: 3 * 1000,
                    }   
                    var options = $.extend(defaults, options);
                    var listTickerInner = function(index) {
                        if (options.list.length == 0) return;
                        if (!index || index < 0 || index > options.list.length) index = 0;
                        var value= options.list[index];
                        options.trickerPanel.fadeOut(function() {
                            $(this).html(value).fadeIn();
                        });
                        var nextIndex = (index + 1) % options.list.length;
                        setTimeout(function() {
                            listTickerInner(nextIndex);
                        }, options.interval);
                    };
                    listTickerInner(options.startIndex);
                }

    /*            for(var i=0; i<new.length; ++i) {
                    {!new[i]} //Wrong coded.
                }
    */

               $(function() {
                    listTicker({
                        list: newsA,
                        startIndex:0,
                        trickerPanel: $('#newsPanel'),
                        interval: 3 * 1000,
                    });
                });
                </script>
        <!-- </apex:repeat>  -->
    </div>
    </apex:component>


    Page:
    <apex:Page>
       <c:News newsNow="" />
    </apex:Page>
5
  • I think we can use apex:repeat in javascript. I used apex:repeat in javascript in my project and It is working.
    – D-Horse
    Jul 9, 2014 at 11:27
  • You definitely can't use apex:repeat IN javascript. But if you mean that you can use apex:repeat within a block of javascript code, then yes you're right. But I think that would result in HTML span block scattered within your script tag - not a very good idea in my opinion. That's why I moved the apex:repeat out of the script block.
    – FrankZ
    Jul 9, 2014 at 11:39
  • Yes, my mean to use apex repeat in java script block ( which is written on vfp directly) and In my current project it is working. for eg: <script> var t = new Array(); <apex:repeat value="{!list}" var="t"> t.push('{!t}');</apex:repeat> </script>
    – D-Horse
    Jul 9, 2014 at 12:02
  • I used the apex:repeat tag out of the script first but it resulted in displaying all the list values in div. So I moved the apex:repeat tag to the script block and tried. Thanks for your time.
    – Seesh
    Jul 9, 2014 at 15:27
  • 1
    @D-Horse, you're right with that use of apex:repeat within javascript. That would work. Though the apex:repeat block which I moved out of the javascript block would've created a set of text lines that would not have been valid javascript code, so I'm sure it would've failed.
    – FrankZ
    Jul 10, 2014 at 10:06

You must log in to answer this question.

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