In a previous post, we talked about building the components of a “share-opp” (sharing opportunity, often a question). Now we will show how, on the ‘front-end’, the share-opp is generated so that a end-user (customer) can interact with it.
See examples of the four types of share-opps (select, remove, rate, rank).
First is the query of a SQL database to obtain info about the share-opp and gather its options (or ‘things’). Its user-interaction type will determine how those things are displayed and what javascript gets applied to it. For example, if the interaction type is ‘rating’, then the jQuery UI “slider” object is applied to the thing, and the minimum / maximum values are gathered from the database.
If the user-action type is ‘rank’, then a CSS class (“forSorting”) is applied to each choice, and is given the jQuery UI object “sortable.”
Another feature of a share-opp is its type of prompt. These can be “text only”, “image-then-text”, or “text-then-image.” Based on that value, a relevant template is called to handle that information, which is stored in a related database table.
The Javascript has to not only activate the type of interaction, it must enforce its rules and know what data to capture and pass along to the server. For example, if this is a type “select” share-opp, then the script gathers from the database the minimum and maximum # of selections for this share-opp. In turn, it knows to keep a running tally of selections, at each click, checking that the max wasn’t reached, and giving a message to the user about the rules. When the submit button is clicked, the script also does a check to assure the minimum has been selected. If the number of selections passes muster, a data object is made for sending to the server for recording the user and her choices per this shareopp.
CODE FOR A USER-ACTION OF TYPE = SELECT
if(userAction=="select") {
$("div.choiceHolder div").addClass("sel");
$("div.choiceHolder div").on("click",function() {
//allow for toggling
if($(this).hasClass('chosen')) {
$(this).removeClass('chosen'); //toggle off..
numSel--;
} else {
//whether to let class be added...
//has the limit been reached?
if(numSel == max) {
printer("the max is already reached");
//but is the case that max is one? then swap out ...
if(max==1) {
$("div.choiceHolder div.chosen").removeClass("chosen");
$(this).addClass("chosen");
} else {
alert("Hi. first unselect one b/c limit of "+max);
}
} else if (numSel < max) {
$(this).addClass("chosen");
numSel++;
}
}
});
$('button').on("click",function() {
$('button.btn-advance').hide();
if(numSel<min) {
alert("hey.. need to pick "+min+" lol !");
$('button.btn-advance').show();
return;
}
//need the id of the option(s) ..
var sel_options = [];
$('div.choiceHolder div.chosen').each(function() {
sel_options.push($(this).data("optionid"));
});
data = {};
data.sel_options = sel_options;
saveUA(data); //the pointopp id and user id is added in saveUA
});
} //end of if userAction is select