0

So I came across this thread and it works very well - How to generate a simple popup using jquery. However, I have a second link and I've changed the class name and everything. Works fine but there are two issues.

1 - If I click on one link and then decide to click on the other link, it displays the second div on top of the first one. If I click "Cancel," I end up having to close BOTH divs in succession. Not a big deal but I'm trying to make it idiot proof.

2 - If I click on "Add Room" and then happen to click on it again, then I can't click the "Cancel" button to hide the div overlay. I could display the div over the link so the user can't click it again, but it doesn't look as clean.

Here's the code.

$(function() {
    $("#add_room").live('click', function(event) {                    
        $(this).addClass("selected").parent().append('<div class="messagepop pop"><form method="post" action="/room/add"><label for="room">Room Name</label><div class="field_span"><input type="text" size="10" class="text" name="location_name" id="room" /></div><div class="buttonrow_popup"><input type="submit" value="Add" name="commit" class="submit small" id="room_submit"/><a class="close" style="margin-top:6px;float: right;border:0">Cancel</a></div></form></div>');
        $(".pop").slideFadeToggle(function() { 
            $("#room").focus();
        });
        return false;
    });

    $(".close").live('click', function() {
        $(".pop").slideFadeToggle(function() { 
            $("#add_room").removeClass("selected");
        });
        return false;
    });

    $("#add_item").live('click', function(event) {          
        $(this).addClass("selected").parent().append('<div class="messagepop pop1"><form method="post" action="/room/add"><label for="item">Item Name</label><div class="field_span"><input type="text" size="10" class="text" name="item_name" id="item" /></div><div class="buttonrow_popup"><input type="submit" value="Add" name="commit" class="submit small" id="room_submit"/><a class="close1" style="margin-top:6px;float: right;border:0">Cancel</a></div></form></div>');
        $(".pop1").slideFadeToggle(function() { 
            $("#item").focus();
        });
        return false;
    });

    $(".close1").live('click', function() {
        $(".pop1").slideFadeToggle(function() { 
            $("#add_room").removeClass("selected");
        });
        return false;
    });

});

$.fn.slideFadeToggle = function(easing, callback) {
    return this.animate({ opacity: 'toggle', height: 'toggle' }, "fast", easing, callback);
};
Community
  • 1
  • 1
sdot257
  • 10,046
  • 26
  • 88
  • 122

1 Answers1

2

Ouch, that seems like a lot of code. In the same link you posted in your question is another answer that mentions using jQuery UI Dialog instead. I'd highly recommend using that instead, as it is by far easier to use.

Community
  • 1
  • 1
Erik Philips
  • 53,428
  • 11
  • 128
  • 150