0

I have the following code which is run at the end of a long table that has several button.enter-match elements:

$("button.enter-match")
.button()
.on('click', function() {
    $("form.enter-match").dialog({
        modal: true,
        height: 'auto',
        width: 200,
        close: function() {
            $("form.enter-match input[name='code']").val('');
        },
        open: function() {
            $("form.enter-match input[name='code']").val('').focus();
        },
        buttons: {
            Set: function() {
                pid = $(this).parents("[data-pid]").data('pid');

                if ($("form.enter-match input[name='code']").val() == '') {
                    alert('Code empty!');

                    return false;
                }

                $.post(
                    request_url,
                    {
                        'action': 'set_match',
                        'pid': pid,
                        'code': $("form.enter-match input[name='code']").val()
                    },
                    function (data) {
                        error_handler(data);

                        if (data['error'] == null) {
                            $("tr#pid-" + pid + " td.code:first div").html('<i>' + $("form.enter-match input[name='code']").val() + '</i>');
                            $("form.enter-match").dialog('close');
                        }
                    },
                    'json'
                );
            }
        }
    });
});

The line pid = $(this).parents("[data-pid]").data('pid'); does not get the pid data value because form#enter_match is created at the very top of the document to be reused in the code as needed. It therefore will not have a parent with the [data-pid] attribute, however, button.enter-match will. How do I get the value in [data-pid] for this particular button.enter-match from within the $("form.enter-match").dialog() portion of the code?

eComEvo
  • 11,669
  • 26
  • 89
  • 145
  • 2
    IDs are meant to be unique in a document, if you intend on copying a piece of HTML you should not have any IDs in it. Your selectors will simply not work otherwise. You should give those elements descriptive classes instead. – Paolo Bergantino Apr 25 '13 at 21:11
  • @PaoloBergantino - You are completely correct that ID should be unique, however a selector that specifies the tagname and ID _will_ still work. (A selector that uses just the ID will find only one, just as `getElementById()` finds only one.) – nnnnnn Apr 25 '13 at 21:13
  • 5
    @nnnnnn - don't defend bad practice / invalid HTML, it simply should not be done => http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-types – PlantTheIdea Apr 25 '13 at 21:14
  • @PlantTheIdea - I'm not defending the practice, I was simply correcting a statement that was wrong. Obviously it is still bad practice (as indicated by the first thing I said in that previous comment). – nnnnnn Apr 25 '13 at 21:18
  • @nnnnnn: it may "work" in the sense that it returns as many elements as it finds, but it still would not behave properly, since statements like `$("form#enter_match input[name='code']").val('')` would not do what you intend. – Paolo Bergantino Apr 25 '13 at 22:28
  • Any elements without a unique ID have been changed from IDs to classes. I've done this in the example here and it my actual code. Still having the same problem. – eComEvo Apr 25 '13 at 22:42
  • @EcomEvo: You still have to fix your selectors to be relative to the current form, not just global. – Paolo Bergantino Apr 25 '13 at 22:56
  • @PaoloBergantino All of the other selectors work as expected. The only part of the code that doesn't work is `pid = $(this).parents("[data-pid]").data('pid');` and this is the part I haven't been able to resolve. – eComEvo Apr 25 '13 at 23:11
  • Are you sure that ``this`` is the object, you are expecting? Try using a debugger to see what actually happens inside the function call. The developer tools in Chrome can do the job. – mzedeler Apr 26 '13 at 00:48
  • @mzedeler It probably isn't. I rarely use Chrome tho. I typically stick with Firefox for my debugging using Firebug. Is there something equivalent in Firebug I can use? – eComEvo Apr 26 '13 at 14:19
  • Yes. Firebug can be used to do the same thing. Set a breakpoint inside the anonymous ``Set``-function and inspect the value of ``this``. – mzedeler Apr 26 '13 at 14:56
  • Firebug breakpoints demo: https://getfirebug.com/doc/breakpoints/demo.html – mzedeler Apr 26 '13 at 14:57
  • @mzedeler Thanks! BTW, the break point feature hasn't be particularly helpful with code that loads after variable length content. I've since moved the script to the top and called it when the document was ready. Much better now! :) – eComEvo Apr 26 '13 at 17:12

1 Answers1

0

Could not figure out a way to get the next object up, so I simply moved pid = $(this).parents("[data-pid]").data('pid'); to the next scope up under the line .on('click', function() { which solved the problem in all instances.

Thanks to all who pointed out my bad coding practice with regards to IDs and classes. I've updated my coding style to reflect the better principals.

eComEvo
  • 11,669
  • 26
  • 89
  • 145