problem with jquery popup

Hello, I have a scritp that I use to open up a pop up window. The script works well if I have a radio button to view the pop up. Instead of clicking on the radio button I have am now clicking on a link but it does not seem to work. Can someone take a look at my code and let me know where I am making a mistake. The  non working code is as follows:

$('[href="#detail"]').click(function() {
            $("#dialog").load("extension_details.php?radio=" + $(this).data("id"), function() {
                     $("#dialog").fadeIn(400);
                     positionPopup();
                     $("a", "#dialog").click(function() {  $("#dialog").fadeOut(500); });
                     $(".refresh").click(function() {
                     $("#dialog").fadeOut(500,function(){
                       location.reload(true);
                       });
                           e.preventDefault();
                     });
                });
         });

---------------------------------HTML/PHP-------------------------
 echo '<tr bgcolor="cccccc">';
        echo '<td align="left"><span class="ast">'.$name.'</span></td>';
        echo '<td align="left"><span class="ast"><a id="detail" data-id='.$name.'" href="" >'.$callerid.'</a></span></td>';
        echo '<td align="left"><span class="status'.$stcol.'">'.$status.'</span></td>';
        echo '<td align="left"><span class="ast"></span></td>';
        echo '<td align="left"><span class="ast"><input name="checkbox[]" type="checkbox"  id="checkbox[]" value="'.$name.'"</span></td>';
   echo '</span></tr>';

Open in new window


The working code is as follows:

 $(":radio[name='radio']").click(function() {
            $("#dialog").load("extension_details.php?radio=" + $(this).data("id"), function() {
                     $("#dialog").fadeIn(400);
                     positionPopup();
                     $("a", "#dialog").click(function() {  $("#dialog").fadeOut(500); });
                     $(".refresh").click(function() {
                     $("#dialog").fadeOut(500,function(){
                       location.reload(true);
                       });
                           e.preventDefault();
                     });
                });
         });

-------------------------------HTML/PHP----------------------------------------
 echo '<tr bgcolor="cccccc">';
        echo '<td align="left"><span class="ast">'.$name."</span></td>";
        echo '<td align="left"><span class="ast">'.$callerid.'</span></td>';
        echo '<td align="left"><span class="status'.$stcol.'">'.$status.'</span></td>';
        echo '<td align="left"><span class="ast"><input name="radio" type="radio"  data-id="'.$name.'"></span></td>';
        echo '<td align="left"><span class="ast"><input name="checkbox[]" type="checkbox"  id="checkbox[]" value="'.$name.'"</span></td>';
   echo '</span></tr>';

Open in new window


Thanks for the help...
aej1973Asked:
Who is Participating?
 
leakim971PluritechnicianCommented:
is not working;

What does that mean? Please provide a link to your page.
If you CAN'T, do a right click to your page in your web browser, choose view source and post it here

span is not a valid child of tr : echo '</span></tr>';

Work fine for me here : http://jsfiddle.net/zfjWF/1/
0
 
leakim971PluritechnicianCommented:
to select this : <a id="detail" data-id=
use : $('#detail')
and not : $('[href="#detail"]')

BUT this ID must be unique in the page
Else use a class : <a class="detail" data-id=
and use : $('.detail')
0
 
aej1973Author Commented:
Hi leakim971, I made the changes you suggested but it is not working, not sure why? How do I find out where the issue is? Thank you for your help.

A
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
Jagadishwor DulalBraces MediaCommented:
You are making mistake here see the line, Your href is null and you are passing href="details" in jquery how will you get href="detail" from this line?

<a id="detail" data-id='.$name.'" href="" >'.$callerid.'</a>

Open in new window


Better to change it on
$('#detail').click(function() 

Open in new window


if the id is unique or add #details in href like
<a id="detail" data-id='.$name.'" href="#details" >'.$callerid.'</a>

Open in new window

0
 
aej1973Author Commented:
ok, we are getting somewhere with this, thank you. What I am seeing now is that only the first row works (ie) when I click on the link on the first row the pop up appears but it does not appear for the other rows. My code is as attached:

 $('#detail').click(function() {
            $("#dialog").load("extension_details.php?radio=" + $(this).data("id"), function() {
                     $("#dialog").fadeIn(400);
                     positionPopup();
                     $("a", "#dialog").click(function() {  $("#dialog").fadeOut(500); });
                     $(".refresh").click(function() {
                     $("#dialog").fadeOut(500,function(){
                       location.reload(true);
                       });
                           e.preventDefault();
                     });
                });
         });

--------------------HTML/PHP-----------------------------
 echo '<tr bgcolor="cccccc">';
        echo '<td align="left"><span class="ast">'.$name.'</span></td>';
        echo '<td align="left"><span class="ast"><a id="detail" data-id="'.$name.'" href="#detail" >'.$callerid.'</a></span></td>';
        echo '<td align="left"><span class="status'.$stcol.'">'.$status.'</span></td>';
        echo '<td align="left"><span class="ast"></span></td>';
        echo '<td align="left"><span class="ast"><input name="checkbox[]" type="checkbox"  id="checkbox[]" value="'.$name.'"</span></td>';
   echo '</span></tr>';

Open in new window


Thank you.
0
 
Jagadishwor DulalBraces MediaCommented:
Where is other rows ??
0
 
aej1973Author Commented:
The php code is within a foreach loop, so  $name and $callerid is unique for the x number of  row.
0
 
Jagadishwor DulalBraces MediaCommented:
Then how do you generate the id is it unique I think you will need to assing a value for id like details-1, details-2 etc that will make the id unique and you will work on

$("a #details").each(function(i){
   this.id = this.id + "_" + i;
});

Open in new window

0
 
aej1973Author Commented:
I was able to do it with the radio button with the code I had attached earlier, but will it not work when I use a link?
0
 
Jagadishwor DulalBraces MediaCommented:
Then why don't try using
$(" a [name='details']").click(function() {

Open in new window


Now you will add name in anchor
<a name="detail" data-id='.$name.'" href="" >'.$callerid.'</a>

Open in new window

0
 
aej1973Author Commented:
That should work, but I am not sure why it is not....that is what I am trying to figure out.

$("a[name='detail']").click(function() {

                                                                           }

Open in new window


<a name="detail" data-id="'.$name.'" href="" >'.$callerid.'</a>

Open in new window

0
 
leakim971PluritechnicianCommented:
I said :
BUT this ID must be unique in the page
Else use a class : <a class="detail" data-id=
and use : $('.detail')

the name attribute is for input, textarea, form, select
0
 
aej1973Author Commented:
leakim971, this is what I have now, but it is not working;

 
$('.detail').click(function() {
            $("#dialog").load("extension_details.php?detail=" + $(this).data("id"), function() {
                     $("#dialog").fadeIn(400);
                     positionPopup();
                     $("a", "#dialog").click(function() {  $("#dialog").fadeOut(500); });
                     $(".refresh").click(function() {
                     $("#dialog").fadeOut(500,function(){
                       location.reload(true);
                       });
                           e.preventDefault();
                     });
                });
         });

Open in new window

echo '<tr bgcolor="cccccc">';
        echo '<td align="left"><span class="ast">'.$name.'</span></td>';
        echo '<td align="left"><span class="ast"><a class="detail" data-id="'.$name.'" href="" >'.$callerid.'</a></span></td>';
        echo '<td align="left"><span class="status'.$stcol.'">'.$status.'</span></td>';
        echo '<td align="left"><span class="ast"></span></td>';
        echo '<td align="left"><span class="ast"><input name="checkbox[]" type="checkbox"  id="checkbox[]" value="'.$name.'"</span></td>';
   echo '</span></tr>';

Open in new window


Can you please let me know what the issue could be?
0
 
aej1973Author Commented:
leakim971, I can not thank you enough! It works......
0
 
aej1973Author Commented:
Thank you.....
0
 
aej1973Author Commented:
Excellent!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.