overlaid box using jquery

Question

I have a blockUI plugin for jquery through which i call another php file in a overlaid box. I want to activate the function through more than one button of same id(here it is pageDemo1). But when i do so, only one button works while all other don't.Can anyone explain why is it so? and what should i do to make it work?

$(document).ready(function() { 

    $('#pageDemo1').click(function() { 
        $.blockUI({ message: $('#domMessage') }); 
        test(); 
    }); 

    $('#submit').click(function() {
    var action = $("#form1").attr('action');
    var form_data = {
        message: $("#message").val(),
        is_ajax: 1
    };

    $.ajax({
        type: "POST",
        url: action,
        data: form_data,
        success: function(response)
        {
            if(response == 'success')
                $("#form1").slideUp('slow', function() {
                    $("#message").html("<p class='success'>message</p>");
                });
            else
                $("#message").html("<p class='error'>message</p>"); 
        }
    });

    return false;
}); 
});

score 0 · Answer 1 · answered Jan 19 '13 at 19:35

0

On first look dont use html elements with the same id. you can attach your events on elements with the same class, name etc.

answered Jan 19 '13 at 19:35

ncn corp

113
5

score 0 · Answer 2 · answered Jan 19 '13 at 19:37

Are you saying that you have two elements (buttons) with the same ID? If so, this is not valid HTML (See W3C standards). You could try using a class instead. Also remember you can use multiple classes to still keep the buttons unique in some way. E.g.

<input type="button" class="pageDemo pageDemo1" value="My Click does this"/>
<input type="button" class="pageDemo pageDemo2" value="My Click also does this/>

Then to access these in your JS:

$('.pageDemo').click(function() {
    // Put code here which should happen when either of your elements with class 'pageDemo' get clicked
});

   $('.pageDemo.pageDemo1').click(function() {
      // Put code here which should only happen when elements with 'pageDemo1' class get clicked
});

However, I have some more doubt. I want to send some informations with each button like id of the
to which the button belong, but still keeping the classes of the buttons same. This information should go to through the ajax call to my php file. any idea how to do this? — user1972934, Jan 19 '13 at 19:47
how do i send the class name of the div to the message which gets displayed on blockUI(here it is domMessage)? Please give a detailed explanation — user1972934, Jan 19 '13 at 20:13

overlaid box using jquery

2 Answers2