Solved

problem with jquery popup

Posted on 2013-06-18
16
198 Views
Last Modified: 2013-06-19
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
Comment
Question by:aej1973
  • 9
  • 4
  • 3
16 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 39258269
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
 

Author Comment

by:aej1973
ID: 39258306
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
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39258335
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
 

Author Comment

by:aej1973
ID: 39258350
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
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39258354
Where is other rows ??
0
 

Author Comment

by:aej1973
ID: 39258358
The php code is within a foreach loop, so  $name and $callerid is unique for the x number of  row.
0
 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39258389
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
 

Author Comment

by:aej1973
ID: 39258398
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 15

Expert Comment

by:Jagadishwor Dulal
ID: 39258422
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
 

Author Comment

by:aej1973
ID: 39258453
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
 
LVL 82

Expert Comment

by:leakim971
ID: 39259163
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
 

Author Comment

by:aej1973
ID: 39259321
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 39260362
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
 

Author Comment

by:aej1973
ID: 39260799
leakim971, I can not thank you enough! It works......
0
 

Author Comment

by:aej1973
ID: 39260800
Thank you.....
0
 

Author Closing Comment

by:aej1973
ID: 39260803
Excellent!
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

760 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now