Update static display after vote changes when the voting form is not co-located with the static display
| Project: | Fivestar |
| Version: | 6.x-1.18 |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
I have solved most of the issues here but one critical thing remains.
Sorry for the long post but I want to give enough detail as I really need help here.
Background:
This site requires the voting aspect to be displayed as follows:
[node-title] [number of votes] [average stars display]
. . . node stuff . . .
[add vote button] //This is where the user selects the option to vote
Thus, the voting form is displayed when the user selects the "add vote button".
Here is what I have done:
1) Set up fivestar to display both the display widgets
2) Created a custom fivestar manager module that calls a javascript that:
1) uses jQuery to move the static display to the proper place (within a container in the node title section)
2) reveals the voting widget form next to the "add vote button" when this button is clicked
This works well for now - - currently, the vote registers - - the user then has to click a "close" button to hide the voting widget.
Except:
Here is what I need to do:
I need to have the new vote count and static display update when the vote is cast.
It appears that this does not happen - - it looks like the fivestar js changes the display locally and does not update either widget. In my case, the changes to the static display and vote count are only visible on refresh of the whole page.
Currently, I get the vote count in php like this:
$votes_array = fivestar_get_votes("node", $nodeId);
$number_votes = $votes_array['count']['value'];
$say_ratings_suffix = format_plural($number_votes, 'rating', ' ratings ');
if ($number_votes == 0) {
print "no";
}
else {
print $number_votes;
}Before I write a bunch of ajax and revise my module to get (and return) an updated form (which is presumably what I would have to do to get an updated static display) and the new vote count - - my question is this:
Is there an easy way (built-in to the current api or via patches or "already-done-by-someone") to update either:
a) all the elements within form?
b) just the static display and the current vote totals for the current node?
I would think that this is not uncommon and if anyone has done this sort of thing, I would be grateful for guidance or a pointer to documentation that would help.
Thanks to all.
N
#1
I have solved this but I cannot help thinking that the solution is somewhat awkward - - that is, it works nicely but the solution may be somewhat awkward in implementation.
To the maintainers: I am willing to write up a "how-to" as I have not seen anything specific on this topic.
in nutshell, here is what I have done:
1) set the fivestar module in the content type to display both user and average votes (permitting the appearance of both widgets)
2) in the node.tpl file, embed the form (hidden) in a wrapper within the UI that presents an "add rating" button
3) in the node.tpl file, create a wrapper that encloses:
a) the vote count
b) the average vote widget
4) In the above wrappers, print the current vote count and format-plural suffix for this node using the following (note the "long-hand" if-else logic for readability here):
$votes_array = fivestar_get_votes("node", $nodeId);$number_votes = $votes_array['count']['value'];
$say_ratings_suffix = format_plural($number_votes, 'rating', ' ratings ');
if ($number_votes == 0) {
print "no";
}
else {
print $number_votes;
}
4) Print the static display for this node using:
print fivestar_static("node", $nodeId);4) create a custom module for handling fivestar in this site
5) create a javascript file called by this module
6) in the javascript file, reveal the five-star form on click of the add rating" button
7) record vote
8) my implementation includes a "done" button in this "revealed" form
- - others may wish to intercept the native callback and do the following after a timeout
9) on clicking the "done" button:
a) hide the fivestar form
b) implement jQuery code that uses one of the jQuery ajax calls that
i) calls a page callback specified by the custom module using hook_menu
ii) this callback more-or-less exactly implements the html and php as for the node.tpl that created the display of
the average votes and vote count
iii) return this html via ajax response
- - could also use json but this was more convenient for me
iV) on success, using jQuery append (or .load since this is html and can be placed directly):
1) fadeOut the average display wrapper
2) empty the average display wrapper
3) load (or append) the returned html block
4) fadeIn the average display wrapper
10) make certain you have .tpl for the page callback that simply prints content
11) implement all the appropriate css to style-to-taste and to hide undesired elements in the form
This works but seems like quite a lot of work for something that may be quite common
I expect that you may wish to close this issue but, again, I am willing to write-up a how-to if this method makes any sense - - in any case, it does work and looks nice.
N
#2
#3