performing different navigational tasks from apex:SelectList

Question

I am using a select list to navigate and perform tasks. The options are: Launch Item (opens a new page) display details, (opens a new page) view certificate, (opens a new page) review item, (opens a new page) remove item, (performs a pageReference from the controller) edit status (Opens a SELECTLIST using JQuery to allow a simple change of status)

<apex:selectList id="Navigate" onchange="takeAction(this);" size="1">
<apex:selectOption itemlabel="--Take Action!--"  itemvalue="NOWT|">
</apex:selectOption>
<apex:selectOption itemlabel="View Details 1" rendered="{!curr_i.item.module.RecordType.DeveloperName == 'SkillSoft'}" itemvalue="DESC|{!$Page.Details}?id={!curr_i.item.module.Id}&type=SSModule&asnmt={!curr_i.item.Assignment.ID}">
</apex:selectOption>
<apex:selectOption itemlabel="View Details 2" rendered="{!curr_i.item.module.RecordType.DeveloperName != 'SkillSoft' && ISNULL(curr_i.item.module.lmsilt__Event__c)}" itemvalue="DESC|{!$Page.Details}?id={!curr_i.item.module.Id}&type=Module&asnmt={!curr_i.item.Assignment.ID}">
</apex:selectOption>
<apex:selectOption itemlabel="View Details 3" rendered="{!curr_i.item.module.RecordType.DeveloperName != 'SkillSoft' && NOT(ISNULL(curr_i.item.module.lmsilt__Event__c))}" itemvalue="DESC|{!$Page.Details}?id={!curr_i.item.module.lmsilt__Event__c}&type=Event&asnmt={!curr_i.item.Assignment.ID}">
</apex:selectOption>
<apex:selectOption itemlabel="View Details 4" rendered="{!curr_i.item.module.RecordType.DeveloperName != 'SkillSoft' && NOT(ISNULL(curr_i.ExternalTrainingId))}" itemvalue="DESC|{!$Page.FICOExternalTraining}?Id={!curr_i.ExternalTrainingId}">
</apex:selectOption>
<apex:selectOption itemlabel="Edit Status" rendered="{!curr_i.item.module.RecordType.DeveloperName != 'SkillSoft' && NOT(ISNULL(curr_i.item.module.lmsilt__Development_Plan_Task__c))}" itemvalue="SWAP|{!curr_i.item.module.lmsilt__Development_Plan_Task__c}">
</apex:selectOption>
<apex:selectOption itemlabel="Remove" rendered="{!curr_i.item.assignment.CreatedBy.id == currentUserId}" itemvalue="DELT|if(confirm('Are you sure you want to permanently remove this item from your transcript? All progress will be lost.')){unenrollAssignment('{!curr_i.item.Assignment.ID}','module');}else{return false;}">

There are different items which most have a different way to launch / view details. So I was sending to my javascript function either a second param or a tag on the front. The second param was proving difficult so I added a prefix to the string that I am sending to the function...

    function takeAction(paramSelect) {
    var string = paramSelect;
    var command = string.substring(0, 4);
    var url = string.substring(5);
    if(command != "SWAP")
    {
        window.open(url, '_blank');
    } else {
        openDialogTask(url);
    }
}

which I thought was genius until firefox keeps telling me that: {TypeError: string.substring is not a function} and the same for str.split(). I have used two jquery libraries:

<apex:includeScript value="{!URLFOR($Resource.fico_portal_res, 'js/jquery.js')}"/>

<apex:includeScript value="{!URLFOR($Resource.lmscons__jquery1816min, 'jquery-ui.min.js')}" />

I don't know if that is causing a conflict.

Answer 1

The below code works on Chrome and Firefox: paramSelect is the select DOM element and its value attribute is the string value you are interested in.

I don't know why you got the error message you got...

<apex:page>
<apex:form>
    <apex:selectList id="Navigate" onchange="takeAction(this);" size="1">
        <apex:selectOption itemlabel="--Take Action!--"  itemvalue="NOWT|123"/>
        <apex:selectOption itemlabel="View Details 1" itemvalue="DESC|abc"/>
    </apex:selectList>
</apex:form>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
function takeAction(paramSelect) {
    var string = paramSelect.value;
    var command = string.substring(0, 4);
    var url = string.substring(5);
    console.log('command=' + command);
    console.log('url=' + url);
}
</script>
</apex:page>

Answer 2

Its really hard to please all the browser Gods!

Anyways looks like there is a place for improvement, looks like firefox taking "string" as keyword. Can you try writing the code as below

function takeAction(paramSelect) {
    if (paramSelect) {
        var command = paramSelect.substring(0, 4);
        var url = string.substring(5);
        if (command != "SWAP") {
            window.open(url, '_blank');
        } else {
            openDialogTask(url);
        }
    }
}