Question

Need to turn javascript (ajax) vote script into reusable (dynamic) script so it can be used over and over.

I have some ajax that works great, but I have to reproduce it and add unique identifiers [where you see 9 in the code are the unique identifiers that I have to change] for every question added that needs a vote. Need to make it dynamic so it will reproduce itself or can be reused with onclick identifiers no matter how many questions are in the database.

Tried to put the javascript in-between <CFOUTPUT QUERY=”GetVotes”> </CFOUTPUT> tags so I could change the 9 to what ever the #GetVoteID# is for the vote question and dynamically reproduce the script as the questions are reproduce from the CFOUTPUT. But that didn’t work as the #GetVoteID# in the javascript caused the script not to work and I don’t know how to make the script reusable with onclick identifiers.

I see the thumbs up and down vote questions on lots of sites and the questions are dynamically reproduce though a database output, what are they doing to reuse there ajax?

I know onclick identifiers are the way to go, so any help on how I can convert my script, CFC’s, and whatever else so that it can handle 10, 20 or 1000 questions that need a vote.

Below is my code (The links, cfajaxproxy, CFC’s, and javascript)

Yes / No links
<CFOUTPUT QUERY="GetVoteList">
<A HREF="javascript:()" onclick="GetVoteYes9(#GetVoteID#);">Yes</A>
<A HREF="javascript:()" onclick="GetVoteNo9(#GetVoteID#);">No</A>
</CFOUTPUT>

Style for ajax
<STYLE>
GetVoteDescription9{visibility : visible}
</STYLE>

cfajaxproxy
<cfajaxproxy cfc="CFC/GetVoteYes9" jsclassname="YesVote9CFC">
<cfajaxproxy cfc="CFC/GetVoteNo9" jsclassname="NoVote9CFC">

YesVoteCFC

<cfcomponent>
    <cffunction name="NewCount9" access="remote">
        <CFQUERY NAME="YesCount9CK" DATASOURCE="MyDSN">
            SELECT  *
            FROM    GetVote
            WHERE   GetVoteID = <cfqueryparam value="9" cfsqltype="CF_SQL_INTEGER">
        </CFQUERY>
        <CFSET NewCount9=#YesCount9CK.YesCount#+1>
        <CFQUERY NAME="UpdateYesCount" DATASOURCE="MyDSN">
            UPDATE  GetVote
            SET     YesCount = <cfqueryparam value="#NewCount9#" cfsqltype="CF_SQL_INTEGER">
            WHERE   GetVoteID = <cfqueryparam value="9" cfsqltype="CF_SQL_INTEGER">
        </CFQUERY> 
        <cfreturn NewCount9>
    </cffunction>
</cfcomponent>

NoVoteCFC

<cfcomponent>
    <cffunction name="NewCount9" access="remote">  
        <CFQUERY NAME="NoCount9CK" DATASOURCE="MyDSN">  
            SELECT  *  
            FROM    GetVote   
            WHERE   GetVoteID = <cfqueryparam value="9" cfsqltype="CF_SQL_INTEGER">  
        </CFQUERY>  
        <CFSET NewCount9=#NoCount9CK.NoCount#+1>  
        <CFQUERY NAME="UpdateNoCount" DATASOURCE="MyDSN">  
            UPDATE  GetVote  
            SET     NoCount = <cfqueryparam value="#NewCount9#" cfsqltype="CF_SQL_INTEGER">  
            WHERE   GetVoteID = <cfqueryparam value="9" cfsqltype="CF_SQL_INTEGER">  
        </CFQUERY>   
        <cfreturn NewCount9>  
    </cffunction> 
</cfcomponent>

ajax script

<SCRIPT TYPE="text/javascript">
    function GetVoteNo9()  
    {   
        var GetVoteNo9 = document.getElementById("GetVoteNo9"); 
        var cfc = new NoCFC9();  
            cfc.setCallbackHandler(getDataResultNo9);  
            cfc.NewCount9(true);  
        var GetVoteDescription9 = document.getElementById("GetVoteDescription9").style.display='none'; 
        var content = document.getElementById('YesResponse9').innerHTML='';
        var content = document.getElementById('NoResponse9').innerHTML='You voted No';
    }  
    function getDataResultNo9(NoResult9)  
    {  
        var content = document.getElementById('NoCount9').innerHTML=NoResult;
    } 

    function GetVoteYes9()  
    {  
        var GetVoteYes9 = document.getElementById("GetVoteYes9"); 
        var cfc = new YesCFC9();  
            cfc.setCallbackHandler(getDataResultYes9);  
            cfc.NewCount9(true);  
        var GetVoteDescription9 = document.getElementById("GetVoteDescription9").style.display='none'; 
        var content = document.getElementById('YesResponse9').innerHTML='You voted Yes';
        var content = document.getElementById('NoResponse9').innerHTML='';
    }  
    function getDataResultYes9(YesResult9)  
    {  
        var content = document.getElementById('YesCount9').innerHTML=YesResult;
    }
</SCRIPT>  

Answer 1

This is untested. Basically you need to generalize the code you’re writing. Everything below reflects this approach.

Vote.cfc (replaces YesVoteCFC/NoVoteCFC)

<cfcomponent>
    <cffunction name="NewCount" access="remote">
    <cfargument name="getVoteId">
    <cfargument name="vote">
    <cfset var choice = structNew()>
    <cfset choice.count = 0>
    <cfset choice.vote = arguments.vote>
    <cfargument name="vote">
    <CFQUERY NAME="VoteCount" DATASOURCE="MyDSN">
        SELECT  NoCount, YesCount 
        FROM    GetVote
        WHERE   GetVoteID = <cfqueryparam value="#arguments.voteId#" cfsqltype="CF_SQL_INTEGER">
    </CFQUERY>
    <cfif arguments.vote>
        <CFSET choice.count = VoteCount.YesCount + 1>
    <cfelse>
        <CFSET choice.count = VoteCount.NoCount + 1>
    </cfif>

    <CFQUERY NAME="UpdateYesCount" DATASOURCE="MyDSN">
        UPDATE  GetVote
        SET     <cfif arguments.vote>YesCount<cfelse>NoCount> = <cfqueryparam value="#choice.count#" cfsqltype="CF_SQL_INTEGER">
        WHERE   GetVoteID = <cfqueryparam value="#arguments.voteId#" cfsqltype="CF_SQL_INTEGER">
    </CFQUERY> 
    <cfreturn choice>
</cffunction>

cfajaxproxy

<cfajaxproxy cfc="CFC/Vote" jsclassname="VoteCFC">

Yes / No links

<CFOUTPUT QUERY="GetVoteList">
<A HREF="javascript:()" onclick="GetVote('#GetVoteID#', 'Yes');">Yes</A>
<A HREF="javascript:()" onclick="GetVote('#GetVoteID#', 'No');">No</A>
</CFOUTPUT>

ajax script

<SCRIPT TYPE="text/javascript">
    function GetVote(id, vote)  
    {   
        var GetVoteNo9 = document.getElementById("GetVote" + vote + id); 
        var cfc = new VoteCFC();  
            cfc.setCallbackHandler(getDataResult);  
            cfc.NewCount(id, vote);  
        document.getElementById("GetVoteDescription" + id).style.display='none'; 
        document.getElementById('YesResponse' + id).innerHTML= (vote == 'Yes' ? 'You voted Yes' : '');
        document.getElementById('NoResponse' + id).innerHTML= (vote == 'No' ? 'You voted No' : '');
    }  
    function getDataResultNo9(choice)  
    {  
        var content = document.getElementById(choice.vote + 'Count9').innerHTML=choice.count;
    } 

</SCRIPT>