Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 211
  • 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
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

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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