How can I access VF variablein java script and increment the variable based on href click and then display the incremented variable in vf page?

Question

How can I access VF variable(value="{!articleAttach.downloadscount}") in javascript and increment the variable based on href click and then display the incremented variable in vf page ?

<apex:component>
    <apex:attribute name="articleAttach" description="Referencing an article record" type="HiveArticleAttachment" required="true" />
    <apex:attribute name="panelID" description="Referencing panel section" type="String" required="true" />
    <apex:attribute name="networkURL" description="Referencing network URL" type="String" required="true" />
    <style>
        sub {
            _vertical-align: 4px;
            vertical-align: -8px;
            font-size: larger;
            padding: 1px 0px 0px 0px;
            font-size: 1em;
        }
    </style>

    <!-- Start Per Record -->
    <span class="tab-pane" id="text1">
            <div class="row" id="text2">
                <div class="col-sm-6">
                    <div class="icon {!lower(articleAttach.IconTag)}"></div>
                    <img src="{!articleAttach.ArticleInfo.Image_URL__c}" />
                </div>
                <div class="col-sm-6" id="text3">
                    <div class="row" id="text4">
                        <div class="col-sm-12" id="text5">
                            <span>
                                <a href="{!networkURL}/hive/apex/HiveArticleContentDetail?Id={!articleAttach.ArticleInfo.ID}&frompage=hivehome" title="{!articleAttach.ArticleInfo.Name}">
                                    <span><h4>{!articleAttach.ArticleInfo.Name}</h4></span>
    </a>
    </span>
    <div>
        <apex:outputPanel rendered="{!If(len(articleAttach.ArticleInfo.Menu_Tag__c)>1,true,false)}">
            <span class="newscred">{!articleAttach.ArticleInfo.Menu_Tag__c}</span>
            <span class="splitter"> | </span>
        </apex:outputPanel>
        <span class="author">{!articleAttach.ArticleInfo.Author__c}</span>
        <span class="splitter"> | </span>
        <span class="date">
                                    <apex:outputText value="{0,date,MMM dd yyyy}">
                                        <apex:param value="{!articleAttach.ArticleInfo.Submitted_Date__c}" />
                                    </apex:outputText>                              
                                </span>
    </div>
    <div class="excerpt">
        <br />
        <apex:outputPanel rendered="{!If(len(articleAttach.ArticleInfo.Abstract__c)>350,true,false)}">
            <apex:outputText value="{!left(articleAttach.ArticleInfo.Abstract__c,350)}" escape="false"></apex:outputText>
            <a href="{!networkURL}/hive/apex/HiveArticleContentDetail?Id={!articleAttach.ArticleInfo.ID}" title="Click here to read more">
                                        .. read more
                                    </a>
        </apex:outputPanel>
        <apex:outputPanel rendered="{!If(len(articleAttach.ArticleInfo.Abstract__c)<=350,true,false)}">
            <apex:outputText value="{!articleAttach.ArticleInfo.Abstract__c}" escape="false"></apex:outputText>
        </apex:outputPanel>
    </div>
    <div class="row" id="text6">

        <div class="col-md-12" id="text7">
            <apex:outputPanel rendered="{!If(articleAttach.FollowStatus=='Followed',true,false)}">
                <span id="{!panelID}_spanunfollow_{!articleAttach.ArticleInfo.ID}" style="display:inline">
                                            <a href="javascript:unfollowArticle('{!articleAttach.ArticleInfo.ID}'); " title="Unfollow this article" >
                                                <img src="{!networkURL}/hive/s/Follow.png" style="width:16px; height:16px;" /> 
                                            </a>      
                                                <sub><apex:outputText value="{!articleAttach.followcount}"> </apex:outputText> </sub>                                 
                                        </span>
                <span id="{!panelID}_spanfollow_{!articleAttach.ArticleInfo.ID}" style="display:none">
                                            <a href="javascript:followArticle('{!articleAttach.ArticleInfo.ID}'); "  title="Follow this article" >
                                                <img src="{!networkURL}/hive/s/UnFollow.png" style="width:16px; height:16px;" />                                               
                                            </a>
                                             <sub><apex:outputText value="{!articleAttach.followcount-1}"> </apex:outputText></sub>
                                        </span>
            </apex:outputPanel>
            <apex:outputPanel rendered="{!If(articleAttach.FollowStatus!='Followed',true,false)}">
                <span id="{!panelID}_spanunfollow_{!articleAttach.ArticleInfo.ID}" style="display:none">
                                            <a href="javascript:unfollowArticle('{!articleAttach.ArticleInfo.ID}'); " title="Unfollow this article" >
                                                <img src="{!networkURL}/hive/s/Follow.png" style="width:16px; height:16px;" />
                                            </a>  
                                               <sub><apex:outputText value="{!articleAttach.followcount+1}"> </apex:outputText> </sub>                                        
                                        </span>
                <span id="{!panelID}_spanfollow_{!articleAttach.ArticleInfo.ID}" style="display:inline">
                                            <a href="javascript:followArticle('{!articleAttach.ArticleInfo.ID}'); "  title="Follow this article" >
                                                <img src="{!networkURL}/hive/s/UnFollow.png" style="width:16px; height:16px;" />
                                            </a>
                                            <sub><apex:outputText value="{!articleAttach.followcount}"> </apex:outputText></sub>
                                        </span>
            </apex:outputPanel>
            &nbsp;&nbsp;
            <span id="{!panelID}_spanshare_{!articleAttach.ArticleInfo.ID}" style="display:none">
                                                <a href="javascript:shareArticle('{!articleAttach.ArticleInfo.ID}');"  title="Share this article" >
                                                <img src="{!networkURL}/hive/s/Share.png" style="width:16px; height:16px;" />
                                            </a>
                                            <sub><apex:outputText value="{!articleAttach.sharecount+1}"> </apex:outputText></sub>
                                        </span>
            <span id="{!panelID}_spanshare1_{!articleAttach.ArticleInfo.ID}" style="display:inline">
                                                <a href="javascript:shareArticle('{!articleAttach.ArticleInfo.ID}');" title="Share this article">
                                                <img src="{!networkURL}/hive/s/Share.png" style="width:16px; height:16px;" />
                                            </a>
                                            <sub><apex:outputText value="{!articleAttach.sharecount}"> </apex:outputText></sub>                                      
                                        </span> &nbsp;&nbsp;
            <!-- <a href="{!networkURL}/hive/apex/HiveArticleContentDetail?Id={!articleAttach.ArticleInfo.ID}&frompage=hivehome#articleComment" title="Post a comment on this article">
                                     <img src="{!networkURL}/hive/s/Comment.png" style="width:16px; height:16px;" />
                                     </a>-->
            <apex:outputPanel rendered="{!If(articleAttach.Commentstatus!='Commented',true,false)}">
                <a href="{!networkURL}/hive/apex/HiveArticleContentDetail?Id={!articleAttach.ArticleInfo.ID}&frompage=hivehome#articleComment" title="Be first to Post comment on this article">
                    <img src="{!networkURL}/hive/s/Comment_Gray.png" style="width:16px; height:16px;" /> </a>
                <sub><apex:outputText value="{!articleAttach.commentcount}"> </apex:outputText> </sub>
            </apex:outputPanel>

            <apex:outputPanel rendered="{!If(articleAttach.Commentstatus=='Commented',true,false)}">
                <a href="{!networkURL}/hive/apex/HiveArticleContentDetail?Id={!articleAttach.ArticleInfo.ID}&frompage=hivehome#articleComment" title="Post a comment on this article">
                    <img src="{!networkURL}/hive/s/Comment.png" style="width:16px; height:16px;" />
                </a>
                <sub><apex:outputText value="{!articleAttach.commentcount}"> </apex:outputText></sub>
            </apex:outputPanel>

            &nbsp;&nbsp;
            <apex:outputPanel rendered="{!If(articleAttach.LikeStatus=='Liked',true,false)}">
                <span id="{!panelID}_spanliked_{!articleAttach.ArticleInfo.ID}" style="display:inline">
                                            <a href="javascript:unlikeArticle('{!articleAttach.ArticleInfo.ID}'); " title="Unlike this article" >
                                                <img src="{!networkURL}/hive/s/Like.png" style="width:16px; height:16px;" />

                                            </a>  
                                            <sub><apex:outputText value="{!articleAttach.likescount}"> </apex:outputText> </sub>                                      
                                        </span>
                <span id="{!panelID}_spanlike_{!articleAttach.ArticleInfo.ID}" style="display:none">
                                            <a href="javascript:likeArticle('{!articleAttach.ArticleInfo.ID}'); "  title="Like this article" >
                                                <img src="{!networkURL}/hive/s/UnLike.png" style="width:16px; height:16px;" />

                                            </a>
                                             <sub><apex:outputText value="{!articleAttach.likescount-1}"> </apex:outputText></sub>
                                        </span>
            </apex:outputPanel>
            <apex:outputPanel rendered="{!If(articleAttach.LikeStatus!='Liked',true,false)}">
                <span id="{!panelID}_spanliked_{!articleAttach.ArticleInfo.ID}" style="display:none">
                                            <a href="javascript:unlikeArticle('{!articleAttach.ArticleInfo.ID}'); "  title="Unlike this article" >
                                                <img src="{!networkURL}/hive/s/Like.png" style="width:16px; height:16px;" />

                                            </a>      
                                           <sub> <apex:outputText value="{!articleAttach.likescount+1}"> </apex:outputText></sub>                                     
                                        </span>
                <span id="{!panelID}_spanlike_{!articleAttach.ArticleInfo.ID}" style="display:inline">
                                            <a href="javascript:likeArticle('{!articleAttach.ArticleInfo.ID}'); "  title="Like this article" >
                                                <img src="{!networkURL}/hive/s/UnLike.png" style="width:16px; height:16px;" />

                                            </a>
                                           <sub><apex:outputText value="{!articleAttach.likescount}"> </apex:outputText></sub>
                                        </span>
            </apex:outputPanel>
            &nbsp;&nbsp;
            <apex:outputPanel rendered="{!If(articleAttach.AttachmentInfo.Id='',true,false)}">
                <a title="No Attachment">
                    <img src="{!networkURL}/hive/s/Download_Gray.png" style="width:16px; height:16px;" />
                </a>

            </apex:outputPanel>
            <apex:outputPanel rendered="{!If(articleAttach.AttachmentInfo.Id!='',true,false)}" id="op1">
                <a href="{!networkURL}/hive/servlet/servlet.FileDownload?file={!articleAttach.AttachmentInfo.Id}" target="_blank" title="Right click to save, Double click to open the attached file" download="articleAttach.AttachmentInfo.Name" onclick="Hivedownloadcounter('{!articleAttach.ArticleInfo.ID}')">
                    <img src="{!networkURL}/hive/s/Download.png" style="width:16px; height:16px;" />
                </a>
                <sub><apex:outputText value="{!articleAttach.downloadscount}" id="downloadpanel"> </apex:outputText></sub>
            </apex:outputPanel>
        </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </span>
    <!-- End Per Record -->
    <br />
</apex:component>

Tushar Sharma · Accepted Answer · 2016-06-01 09:51:03Z

3

You can use it in Javascript as merge field.

<script>
  var x = Number('{!articleAttach.downloadscount}');
</script>

Now use this in outputText or inpputhidden and then set the updated value using javascript

<apex:outputText value="{!articleAttach.downloadscount}" styleclass="Testclass" />

<script>
   document.getElementsByClassName("Testclass")[0].value = x;
</script>

Or you can also use apex:inputhidden.

Update: To update the value just follow some simple steps. on click of href call a method and update the value.

<script>
     x = x + 1;
</script>

edited Jun 1, 2016 at 9:51

answered Jun 1, 2016 at 9:37

Tushar Sharma

29.7k7 gold badges40 silver badges61 bronze badges

Can you explain where you incremented the value on click? can we access the vf variables like var x = '{!articleAttach.downloadscount}';?

Saicharan
– Saicharan

2016-06-01 09:48:31 +00:00
Commented Jun 1, 2016 at 9:48
@Saicharan check my updated answer.

Tushar Sharma
– Tushar Sharma

2016-06-01 09:51:17 +00:00
Commented Jun 1, 2016 at 9:51
var x = Number('{!articleAttach.downloadscount}'); this x is giving me zero when i put alert . Its not fetching the exact count

Saicharan
– Saicharan

2016-06-01 10:11:00 +00:00
Commented Jun 1, 2016 at 10:11
@Saicharan please check x does not override by another variable. Also can you short your code and show the updated code.

Tushar Sharma
– Tushar Sharma

2016-06-01 10:36:48 +00:00
Commented Jun 1, 2016 at 10:36

Add a comment |

Saroj Bera · Accepted Answer · 2016-06-01 10:04:29Z

You can create the JavaScript variable with this line var dldCtr = '{!articleAttach.downloadscount}'; . Then updated this counter in the onclick event of the anchor link. Then get the outputtext by using document.getElementById("downloadpanel") and show the new value.

<script type="text/javascript">
  var dldCtr = '{!articleAttach.downloadscount}';
    functr incrementCtr(){
        dldCtr = dldCtr+1;
        document.getElementById("downloadpanel").value = dldCtr;
    }
</script>
.......
<a href="...." onclik="incrementCtr(); "
.......
<apex:outputPanel .... id="op1">
    <apex:outputText value="{!articleAttach.downloadscount}" id="downloadpanel"> </apex:outputText>
</apex:outputPanel>

Stack Exchange Network

How can I access VF variablein java script and increment the variable based on href click and then display the incremented variable in vf page?

2 Answers 2

You must log in to answer this question.

Hot Network Questions

How can I access VF variablein java script and increment the variable based on href click and then display the incremented variable in vf page?

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions