i want to popup a dialog facebox when i click inside a td in an html table. is this possible ?
views:
234answers:
1
+3
A:
TD as a proxy...
If you have a link in there, you could do something like this:
$("td").click(function(){
$("a[rel='facebox']", this).trigger("click");
});
Of course, modifying that code slightly, you could invoke facebox for any link by clicking nearly anything else on the page. Basically, the td
element serves as a proxy for you. If you click it, it triggers a click on the link that will be capable of opening facebox up.
No link? No problem...
If you don't have a link to click, you could create one of the fly, trigger a click, and then remove it.
$("td").click(function(e){
$("<a>") // create our link
.click(function(e){e.stopPropagation()}) // prevent bubbling
.attr({ // set its attributes
'href':'/css/style.css?'+$(this).text(), // append td vals
'rel':'facebox' // make it facebox-eligible
})
.appendTo(this) // append it to the td
.facebox() // tie it to facebox
.click() // click it
.remove(); // remove it
});
So assume we started out with:
<td>52</td>
We will have an iframe popup pointing to: /css/style.css?52
.
Jonathan Sampson
2010-02-22 03:54:41
@Jonathan Sampson - I dont have a link. i want it to fire anywhere i click inside the cell. is this possible ?
ooo
2010-02-22 03:57:24
How are you going to tell it which element to open?
Jonathan Sampson
2010-02-22 03:59:31
@Jonathan Sampson - oh . . i originally didn't understand your answer. Just for simplicity sake, lets say i have text in that cell with a number and i want it to go to the address http://www.google.com/[myNumber]. where would the link go in your solution
ooo
2010-02-22 04:02:53
So you want to load up an iframe with that address, based on a number within the cell?
Jonathan Sampson
2010-02-22 04:04:14
@Jonathan Sampson - i want to load up a facebox dialog (i am not sure if you were calling the facebox popup an iframe) with that address. and as per my last comment, i need to have the text in that TD as part of the URL .
ooo
2010-02-22 04:12:54
@oo: Check my updates to **No link? No problem...** above.
Jonathan Sampson
2010-02-22 04:25:02
@Jonathan Sampson - ok . .excellent . . just one small issue, the content seems to be appearing twice. I simplified the code to just show a picture and it also showed the pic twice in the popup
ooo
2010-02-22 05:15:12
@Jonathan Sampson - actually let me add one more issue. in firefox, it always shows the issue twice, in chrome, i dont seem to get any popup and in ie8 it seems to either show the pic once or twice (still can't figure out a pattern)
ooo
2010-02-22 05:26:31
@oo: Try my updated code. I've added a call to stop event-bubbling, which should eliminate the double-calls.
Jonathan Sampson
2010-02-22 06:02:53
@Jonathan Sampson - hmm still getting the content twice in Firefox. i will keep testing
ooo
2010-02-22 18:42:20
@Jonathan Sampson - any other ideas ?
ooo
2010-03-01 00:47:32
Placing `e.stopPropagation()` on the link within the `td` should stop the propagation back up to the `td` (inadvertently causing another click)
Jonathan Sampson
2010-03-01 03:46:10