Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 213
  • Last Modified:

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...
0
aej1973
Asked:
aej1973
  • 9
  • 4
  • 3
1 Solution
 
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
 
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
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
 
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
 
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.

Join & Write a Comment

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 9
  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now