[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

problem with jquery popup

Posted on 2013-06-18
16
Medium Priority
?
212 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 83

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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 

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

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 83

Accepted Solution

by:
leakim971 earned 2000 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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
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…
Suggested Courses

590 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