0

I'm having some issues with my code maybe you could help?

Jquery: [updated]

<script>
$(function() {

     $(".val_error").dialog({
    autoOpen: false,
    show: "blind",
    hide: "explode"
 });
 $(".val_open").click(function(event) {
     var target = $(this).attr("id");
     $('#' + target).dialog('open');
    return false;
 });
    });
</script>

HTML: [updated]

<p class="first_name>
<div class="val_error" id="first_name_err"><?php echo form_error('first_name'); ?></div>
<label for="contact_first_name"><?php echo $label_values->first_name;?></label>
<?php echo form_input('first_name', $form_values->first_name, 'id="first_name"');?>
<button class="val_open" id="first_name">Open</button>
</p>

<p class="last_name">
<div class="val_error" id="last_name_err"><?php echo form_error('last_name'); ?></div>
<label for="contact_last_name"><?php echo $label_values->last_name;?></label>
<?php echo form_input('last_name', $form_values->last_name, 'id="last_name"');?>
<button class="val_open" id="last_name">Open</button>
</p>

So basically I'm trying to get the dialog to open for just one ID at a time rather than all at once.. I've tried the following but no luck:

Jquery I thought would work

<script>
$(function() {

     $(".val_error"+target).dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode"
     });
     $(".val_open").click(function(event) {
            var target = $this.attr("id");
        $(".val_error").dialog("open");
        return false;
     });
    });
</script>

Any help / pointers or even ideas would be great!

http://jsfiddle.net/dRRRd/ <- can view here

2
  • 1
    Your html is not valid, you can not have two ( or more ) elements with the same id. Try to define and use a data- property (i.e data-target-id )
    – dievardump
    Commented Jan 29, 2012 at 19:00
  • @DieVarDump I've sorted that now
    – Sean
    Commented Jan 29, 2012 at 19:22

2 Answers 2

3
  1. Element ID's must be unique - you have two first_name elements and two last_name elements. This will cause issues. (You also have two labels "for" contact_name - are there two elements with this ID as well?)

  2. In your javascript, target is not defined when you call $(".val_error"+target).dialog({ (it's declared in the scope of another callback function.)

What you want to do is assign a class to the parent element of each form group, then use that as a selector to find your error divs. Try something like this:

<p class="first_name">
<div class="val_error" id="first_name_err"><?php echo form_error('first_name'); ?></div>
<label for="contact_name"><?php echo $label_values->first_name;?></label>
<?php echo form_input('first_name', $form_values->first_name, 'id="first_name"');?>
<button class="val_open" id="first_name">Open</button>
</p>

<p class="last_name">
<div class="val_error" id="last_name_err"><?php echo form_error('last_name'); ?></div>
<label for="contact_name"><?php echo $label_values->last_name;?></label>
<?php echo form_input('last_name', $form_values->last_name, 'id="last_name"');?>
<button class="val_open" id="last_name">Open</button>
</p>

And then your jQuery selector would be $(".first_name .val_error") or $(".last_name .val_error")

2
  • How could I go about making the selector dynamic then? I've redone the HTML like you suggested is my JS okay? ` $(".val_error").dialog({ autoOpen: false, show: "blind", hide: "explode" }); $(".val_open").click(function(event) { var target = $(this).attr("id"); $('#' + target).dialog('open'); return false; });`
    – Sean
    Commented Jan 29, 2012 at 19:16
  • Since the error div's ID is essentially the target's ID + "_err" you could just hardcode that in, but it'd probably be better to do something like $(".val_open").click(function() {$(this).siblings(".val_error").dialog('open'); return false;}); (untested) Commented Jan 29, 2012 at 19:31
2

A couple of things with the following line:

var target = $this.attr("id");
  1. $this will look for a variable called $this, which does not exist. To get at the contextual jQuery object, use $(this)
  2. The variable target is never read -- maybe you meant $('#' + target).dialog('open'); on the next line?

But the simplest solution is probably to remove:

var target = $this.attr("id");
$(".val_error").dialog("open");

..and replace it with:

$(this).dialog('open');

because only one element gets the click event anyway, and that element can be targeted with $(this).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.