Home/ Questions/Q 3217192
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-17T15:22:57+00:00

I’m having a problem with an if/else block. The problem is that the else

  • 0

I’m having a problem with an if/else block. The problem is that the else block is always executing. When the click happens, if two select elements have both have a class of “current-drop” then only the if block should execute.

However, since those two classes are being removed at the end of the if block (the classes are added again later using the change() method) then I suppose that is causing the else block to execute. Is it because the click event isn’t finished firing when the classes are removed, causing the conditions to change?

How can I work around this? 

$('.add-button').click(function() {

var class1=$("#select-pub").attr('class');
var class2=$("#select-segment").attr('class');

if ((class1=='current-drop') && (class2=='current-drop')) {

    $('<li />', {text: $('#select-pub option:selected').text()})
    .appendTo('div #publisher-results ul');
    $('<li />', {text: $('#select-segment option:selected').text()})
    .appendTo('div #segment-results ul');
    $('#select-pub').removeClass('current-drop');
    $('#select-segment').removeClass('current-drop');
    $('#error-message').css('visibility','hidden');
}

else
{
    $('#error-message').css('visibility','visible');
}

});

edit: Here is the page – yes I know it is a bit of a soupy mess right now…

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Group Commerce | Dashboard</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <link type="text/css" rel="stylesheet" href="fancybox/jquery.fancybox-1.3.1.css"/>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script type="text/javascript" src="js/add-items-over.js"></script>
    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.1.pack.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {


    $("a#click-up").fancybox({
        'padding':0,
        'margin':0,
        'scrolling':'no',
        'showCloseButon':'true',
        'overlayColor':'#dfdfdf'
        });



});
</script>



 <style type="text/css">
        /* Custom Theme */


        h1 {font-family:verdana;font-size:18px; color:#122652;padding:30px 0 0 20px;}

        table {width:577px;margin-left:20px;
        border:1px solid #d5d5d5;font-family:arial; font-size:11px;}

        table td {
            border-right:1px solid #d5d5d5;
            padding:5px 0 5px 5px;
            }

        tr.table-bg td {
            border-bottom:1px solid #d5d5d5;
            font-weight:bold;
            background:url(images/table-top-bg.jpg) repeat-x;
            }

        #modal-left {
            width:272px;
            margin-top:-11px;
            float:left;
            }

        #modal-right {
            width:335px;
            float:right;
            margin-top:-11px;
            }

            #error-message {
            margin-bottom:15px;

        margin-left:20px;
            margin-top:5px;
            }

            .error-default {
                color:red;
                }

            .error-message-no {
                visibility:hidden !important;
                }

        .error-message-yes {
                visibility:visible;
                }

        #modal-left p {
            margin-left:20px;
            }

        #modal-left a, #modal-right a {
            background:url(images/add-select.gif) no-repeat;
            margin-top:-1px;
            }

        #modal-left a {
            position:relative;
            right:2px;
            }



            .select-div {
                width:272px;
                float:left;
                }

            .link-div {
                width:46px;
                height:22px;
                float:right;
                margin-top:30px;
                }

            #modal-left select {
            margin-left:20px;
            width:252px;
            }

            #publisher-results {
                background-color:#f9f9f9;
                width:252px;
                height:100px;
                margin-left:20px;
                margin-top:5px;
                }

            #segment-results {
                background-color:#f9f9f9;
                width:252px;
                height:100px;
                margin-top:3px;
                }

            .select-div2 {
                width:220px;
                float:left;
                }

            .select-div2 select {
                width:252px;
                }

            .link-div2 {
                width:46px;
                height:22px;
                float:right;
                position:relative;
                right:22px;
                }

            #modal-right a {
            background:url(images/add-select.gif) no-repeat;
            position:relative;
            right:2px;
            }

            #publisher-results {
                overflow:hidden;
                }

            #publisher-results ul {
                margin-top:5px !important;
                }

            #publisher-results li {
                list-style:none;
                position:relative;
                right:30px;
                margin-bottom:3px;
                }

            #segment-results {
                overflow:hidden;
                }

            #segment-results ul {
                margin-top:5px !important;
                }

            #segment-results li {
                list-style:none;
                position:relative;
                right:30px;
                margin-bottom:3px;
                }

            #footer {
                text-align:right;
                margin-top:150px;
                width:100%;
                padding-right:30px;
                }

            #footer-submit  {
                display:block;
                float:right;
                width:116px;
                height:22px;
                background:url(images/submit-to-copy.gif) no-repeat;
                position:relative;
                right:12px;
                margin-left:10px;
                }

            #footer-cancel {
                display:block;
                float:right;
                width:68px;
                height:22px;
                background:url(images/cancel.gif) no-repeat;
                position:relative;
                right:12px;
                }
            #box-content {
                border:1px solid white;
                }

    </style>

</head>

<body>

<div id="modal-wrap">
<a id="click-up" href="#box-content">Click here for popup</a>

<div style="display:none;">
<div id="box-content" style="width:620px;height:335px;background:url(images/modal-bg.gif) left top no-repeat;">
<h1>Send the following deal to copy stage...</h1>

<table border="0" cellspacing="0" cellpadding="0">
<tr class="table-bg">
<td>Vendor</td>
<td>Vendor ID</td>
<td style="width:100px;">Offer</td>
<td>Status</td>
<td>Availability Start</td>
<td style="border-right:none;">Availability End</td>
</tr>

<tr>
<td>Apple</td>
<td>10010000111</td>
<td>$2.99 app</td>
<td>Ready for Market</td>
<td>9/20/2010</td>
<td style="border-right:none;">9/20/2010</td>
</tr>
</table>

<p id="error-message"><em>Both the publisher and the segment fields are required!</em></p>
<div id="modal-left">



<script type="text/javascript">

$(document).ready(function() {

$('#error-message').addClass('error-default');
$('#select-pub').change(function() {
$(this).addClass('current-drop');
}); 

$('#select-segment').change(function() {
$(this).addClass('current-drop');
}); 


$('.add-button').click(function() {

var class1=$("#select-pub").attr('class');
var class2=$("#select-segment").attr('class');
if ($('#select-pub').hasClass('current-drop') && $('#select-segment').hasClass('current-drop')) {

    $('<li />', {text: $('#select-pub option:selected').text()})
    .appendTo('div #publisher-results ul');
    $('<li />', {text: $('#select-segment option:selected').text()})
    .appendTo('div #segment-results ul');
    $('#select-pub').removeClass('current-drop');
    $('#select-segment').removeClass('current-drop');
    $('#error-message').css('visibility','hidden');
    }

    /*else
    {
    $('#error-message').css('visibility','visible');
    }*/

});
});

</script>



<div class="select-div">

<select id="select-pub">
<option val="1" selected>Publisher 1</option>
<option val="2">Publisher 2</option>
<option val="3">Publisher 3</option>
<option val="4">Publisher 4</option>
</select> 

</div>

<!--<div class="link-div">
<a class="add-button" href="#" style="width:46px;height:22px;display:block;"></a>
</div>-->

<div style="clear:both;"></div>
<div id="publisher-results">
<ul>
</ul>
</div>

</div>


<script type="text/javascript">

$(document).ready(function() {

$('.add-button-2').click(function() {
$('<li />', {text: $('#select-segment option:selected').text()})
.appendTo('#segment-results ul');
$('#segment-results ul li:odd').css('display','none');
});

});

</script>
<div id="modal-right">

<div class="select-div2">
<select id="select-segment">

<option selected>Segment 1</option>
<option>Segment 2</option>
<option>Segment 3</option>
<option>Segment 4</option>
</select>

</div>

<div class="link-div2">
<a href="#" class="add-button" style="width:46px;height:22px;display:block;"></a>
</div>

<div style="clear:both;"></div>
<div id="segment-results">
<ul style="margin:0;">
</ul>
</div>

</div>

<div id="footer">

<a href="#" id="footer-submit"></a>
<a href="javascript:;" onclick="$.fancybox.close();" id="footer-cancel"></a>
</div>
</div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    After you posted your code (thank you), I tidied up the HTML. It looks like you are missing a closing <div> tag somewhere which could cause you problems. As far as I can see, your jQuery is right – so my guess is on the HTML. (I would look for quotes as well as matching brackets.)

    • 0