I defined two dynamic fields which should be selected in order to define our SLA. To accomplish that i am using jquery, i already have a working example on jsfiddle, so you can take a look at http://jsfiddle.net/X72xc/
The workflow is like this:
1. Choosing dynamic fields will enable a dynamic radio button on a given div. The radio button will suggest SLA´s like, "8x5 SLA 3" and "24x7 SLA 3". I have this because i have different calendars for each SLA. Note: It is only a suggestion, SLA dropdown menu wont show only these values on radio button.
2. So, a suggestion is made by a radio button. The agent chooses the appropriate SLA and the jquery defines the option selected on the SLA dropdown menu. Take a look on my jsfiddle.
The problem i am facing is that SLA dropdown menu is populated/refreshed by ajax. So my jquery is not working as in jsfiddle. I need help on how to "activate" ajax.
I will add the code here also.
HTML:
Code: Select all
<select id="DynamicField_Field1" name="DynamicField_Field1">
<option selected="selected" value="">-</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
</select>
<div/>
<select id="DynamicField_Field2" name="DynamicField_Field2">
<option selected="selected" value="">-</option>
<option value="First">First</option>
<option value="Second">Second</option>
<option value="Third">Third</option>
</select>
<div/>
<div id="radioDiv">Choose DynamicField_Field1 and DynamicField_Field2</div>
<div/>
<select id="SLAID" name="SLAID">
<option selected="" value="">-</option>
<option value="1">24x7 SLA 1</option>
<option value="3">24x7 SLA 2</option>
<option value="5">24x7 SLA 3</option>
<option value="9">24x7 SLA 4</option>
<option value="10">24x7 SLA 5</option>
<option value="2">8x5 SLA 1</option>
<option value="4">8x5 SLA 2</option>
<option value="6">8x5 SLA 3</option>
<option value="7">8x5 SLA 4</option>
<option value="8">8x5 SLA 5</option>
</select>
Code: Select all
$(document).ready(function () {
$('#DynamicField_Field1, #DynamicField_Field2').change(function () {
var Field1 = $('#DynamicField_Field1').val();
var Field2 = $('#DynamicField_Field2').val();
var SLA = Field1 + Field2;
var Message = "Choose DynamicField_Field1 and DynamicField_Field2";
if (Field1 && Field2 !== "") {
switch (SLA) {
case "FirstFirst":
SLA = ["8x5 SLA 3", "24x7 SLA 3"];
break;
case "FirstThird":
SLA = ["8x5 SLA 4", "24x7 SLA 4"];
break;
case "FirstSecond":
SLA = ["8x5 SLA 5", "24x7 SLA 5"];
break;
case "ThirdFirst":
SLA = ["8x5 SLA 2", "24x7 SLA 2"];
break;
case "ThirdThird":
SLA = ["8x5 SLA 3", "24x7 SLA 3"];
break;
case "ThirdSecond":
SLA = ["8x5 SLA 4", "24x7 SLA 4"];
break;
case "SecondFirst":
SLA = ["8x5 SLA 1", "24x7 SLA 1"];
break;
case "SecondThird":
SLA = ["8x5 SLA 2", "24x7 SLA 2"];
break;
case "SecondSecond":
SLA = ["8x5 SLA 3", "24x7 SLA 3"];
break;
}
$('#radioDiv').text("");
for (i = 0; i < SLA.length; i++) {
$("#radioDiv").append('<input type="radio" name="radioSLA" value="' + SLA[i] + '" />' + SLA[i]);
}
} else {
$('#radioDiv').text(Message);
}
});
$(document).on('change', '#radioDiv input:radio', function () {
$("#SLAID option").removeAttr('selected');
var radioSLAChecked = $(this).val();
$("#SLAID option").each(function () {
if ($(this).text() == radioSLAChecked) {
$(this).attr('selected', 'selected');
}
});
});
});