CODEWITHSUNDEEP
jqueryscope
Smith Smithy
Smith Smithy

Reputation: 585

conditional statement seems to be storing multiple values for the same variable.. scoping error?

I have a click event handler with jquery. if a text field is blank i return false else submit some variables to another function. if i fire the event again it appears that the previous variables are still set and new ones are set with the function cycling twice. I hope that makes since as i don't quite understand what is happening.

the clickable:

<p class="field_select custom" data-table="" data-field="_text">Your Custom Text</p>

The handler:

$('.field_select').click(function(){

    if ($(this).hasClass('custom')){
        //This is a custom field

        //reset the input to empty
        $('#custom_text_input').val('');

        //get the data we need for our ajax function
        field = $(this).data('field');
        table = $(this).data('table');

       //open up the dialog with the input field
       $('#custom_field_div').dialog({
           modal: true,
           width: 500,
           height: 275,
           buttons: { "Ok": function() { $(this).dialog("close"); } }
       });

       //when we close the dialog check for empty value and fire function
        $('#custom_field_div').on('dialogclose', function(){
            name = $('#custom_text_input').val();
            if (name !== ''){
                //the user filled the field - fire the function.
                custom = $('#custom_text_input').val();
                append_field(field, name, custom, table);
            }
            else {
                //the user did not fill the field, do nothing.
                alert('not recording anything');
                alert(name);
                return false;

//------------------after the first blank submission the second will 
//------throw the alerts twice!!! and then the next time THREE and so on... 
                    }
                });
            }
            else{
                //this is not a custom field
               table = $(this).data('table');
               field = $(this).data('field');
               name = $(this).html();
               append_field(field, name, table);
            }
        });

The HTML for the hidden dialog div

<div id="custom_field_div">
    <label>Enter your custom text...</label>
    <input type="text" id="custom_text_input" maxlength="255" rows="3" style="width: 100%!important; height: 50px;"></textarea>
</div>

I am not seeing any errors in the console...

Upvotes: 0

Views: 65

Answers (1)

Jason P
Jason P

Reputation: 27012

Every time the click handler runs, this line is executed:

$('#custom_field_div').on('dialogclose', function(){

Which adds another handler for the dialogclose event. When that event happens, all the handlers are triggered.

Refactor your code to set up the dialog outside of the click handler, or destroy the dialog every time it closes. I would suggest the first option.

Upvotes: 1

Related Questions