Search code examples
javascriptjqueryfancybox

Don't open fancybox on click of a particular dropdown option


I have a condition of where i have a drop-down with 5 options on it. on-click of any option, the "fancybox" modal window opens. But i don't want to open the fancybox when click on "option 1". according to the conditions, I can't place "Value attribute for Option 1". Other all have value attribute.

    function openFB(focusAeraData, idData) {
    var userIdData = $("#userIdData").val();
    var focusAreaSelectBoxValue01 = $("#focusAera1").val();
    var focusAreaSelectBoxValue02 = $("#focusAeraFirst").val();
    var focusAreaSelectBoxValue03 = $("#focusAeraSecond").val();

    if ((focusAreaSelectBoxValue01 == focusAreaSelectBoxValue02 || focusAreaSelectBoxValue02 == focusAreaSelectBoxValue03)
            && idData == 2) {
        $("#focusAeraError2").html('Please Select different Focus');
        $("#focusAeraFirst").val('');
        $("#focusAreaContent2").html('');
        $('#foucusAreaLaunchURL2').html("");
        $('#focusAeraFirst>option:eq(0)').prop('selected', true);
        $("#focusAeraError3").html('');
        $("#focusAeraError1").html('');
    } else if ((focusAreaSelectBoxValue01 == focusAreaSelectBoxValue03 || focusAreaSelectBoxValue02 == focusAreaSelectBoxValue03)
            && idData == 3) {
        $("#focusAeraError3").html('Please Select different Focus');
        $("#focusAeraSecond").val('');
        $('#focusAeraSecond>option:eq(0)').prop('selected', true);
        $("#focusAeraError2").html('');
        $('#foucusAreaLaunchURL3').html("");
        $("#focusAreaContent3").html('');
        $("#focusAeraError1").html('');
    }

    else {

        $("#focusAeraError" + idData).html('');
        getValueDataRemove(idData);
        var OpenPOPUPURL = '../../pop_up/get_popup_scorecard?idData='
                + idData + '&focusAeraData=' + focusAeraData + '&userId='
                + userIdData;
        $.fancybox({
            autoSize : true,
            'maxWidth' : '35%',
            'minWidth' : '35%',
            'width' : '680',
            modal           : false,
            fitToView : true,
            'padding-bottom' : '5px',
            arrows : false,
            openEffect : 'fade',
            openSpeed : 'slow',
            closeEffect : 'fade',
            closeSpeed : 'slow',
            closeBtn : false, 
            href : OpenPOPUPURL, //Your form must have an action.
            type : 'ajax',
            'helpers' : { 
                'overlay' : {
                    'closeClick': false,
                }
            },
            ajax : {
                type : "GET",
                cache : false,
                data : $(this).serializeArray(),
            },
            scrolling : 'no',

            iframe : {
                scrolling : 'auto',
                preload : true
            }

        })

    }
}

Solution

  • If you can't place "Value attribute for Option 1", then just check if there is value and skip if there is not. For example:

    if ( !focusAreaSelectBoxValue01 || !focusAreaSelectBoxValue02 || !focusAreaSelectBoxValue03 ) {
        return;
    }