I have initialized my jquery ui like this, I can get it working for one dialog box:
<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#treatment" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$( "#opener" ).click(function() {
$( "#treatment" ).dialog( "open" );
return false;
});
});
</script>
However, I have a table and for one column, 'treatments' the user has to click on "more info" to find out more, so far I have coded it like this:
foreach($foo['MedCond'] as $row)
{
?>
<tr>
<td><b>Name:</b></td>
<td><b>Symptoms:</b></td>
<td><b>Treatment:</b></td>
<td><b>Effective From:</b></td>
<td><b>Effective To:</b></td>
</tr>
<tr>
<td><?php echo $row['Name'];?></td>
<td><?php echo $row['Symptoms'];?> </td>
<td><div id="treatment"><p><?php echo $row['Treatment'];?></p></div><button id="opener">More info</button></td> [...]
So for every row for treatments, there is a corresponding dialog open button, once they click on that, details about that particular treatment shows up. I have got this working for one, but it fails when more then one shares the same "treatment div".
How can I get this to work.
Cheers.
Use class instead of Id. means use $( ".treatment" ).dialog and write div class="treatment". Same procedure for opener
Related
I have a table which I has links on each row. I am trying to use AJAX to retrieve an array of data from the database via PHP and return the data which will print in another DIV.
I am trying to get the attribute value (link ID) that I assign to each row and pass this value to the query. I am not able to get the link ID, it does not display when I test issuing an alert. I read several post and tried a few things but no good. The alert popup displays "undefined".
<tr id="mashed_row">
<td class="linked-title dark unpadded">
<?php echo $link['keywords']; ?>
</td></tr>
<script type="text/javascript">
$(document).ready(function(){
$('#mashed_row a').click(function () {
alert($(this).closest('tr').find('td').attr('link_id'));
});
});
</script>
You are trying to get td attr which is not there, try this, hope it helps :-
$(document).ready(function(){
$('#mashed_row a').click(function () {
alert($(this).attr('link_id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<table>
<tr id="mashed_row">
<td class="linked-title dark unpadded">
key words
</td>
</tr>
<table>
Simply use $(this).attr('link_id')
$(document).ready(function(){
$('#mashed_row a').click(function () {
alert($(this).attr('link_id'));
});
});
Your TD does not have a link_id attribute, your <a> has it. I've created an example showing both versions:
$(document).ready(function(){
$('#mashed_row a').click(function () {
console.log("TD:", $(this).closest('tr').find('td').attr('link_id'));
console.log("A:", $(this).closest('tr').find('a').attr('link_id'));
// or if you really want to get the attribute from the clicked item, it's even easier:
console.log("direct:", $(this).attr('link_id'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
<tr id="mashed_row">
<td class="linked-title dark unpadded" link_id="link_id_TD">
Hello
</td>
</tr>
</table>
I have jquery dialog and when i click over the button it open but only first time when i close it and click second time over the same button it not appears. Here is my code :
Script:
$(function () {
$("#dialogPicture").dialog({
autoOpen: false
});
$(".buttonClass").on("click", function () {
// get the div element with the id dialogClass contained at the same scope as button!
var id = ($(this).siblings(".dialogClass").attr("id"));
$("#" + id).dialog({
autoOpen: false
});
$("#" + id).dialog("open").css({
"font-size": "13px"
});
});
});
HTML :
<td>
<?=$row['NOMER']?><input id="btn2" class="buttonClass" type="button" value="ВИЖ" />
<div class="dialogClass" id="dialogPicture_<?=$row['NOMER'];?>" style="display:none;">
<table class="bilet">
<tr>
<h2>
<td colspan="4">
<div align="center"><strong>ПРЕВОЗЕН БИЛЕТ</strong></div>
</td>
</h2>
</tr>
<p>
<tr >
<td colspan="2" align="right">
</table>
</div>
I think the problem is that on each button click you create a new instance of dialog box.
Try initializing all the dialog boxes in the beginning of the script and let the buttons only open them.
Another issue is that the dialog div is no longer on the table after initialization:
<div id="btn<?=$row['NOMER']?>".....
$(function () {
$(".dialogClass").each(function(){
$(this).dialog({ autoOpen: false });
});
$(".buttonClass").on("click", function () {
// get the div element with the id dialogClass contained at the same scope as button!
var btnId = ($(this).attr("id"));
btnId = btnId.replace("btn","");
$("#dialogPicture_" + btnId).dialog("open").css({
"font-size": "13px"
});
});
});
You can try out this.
You should use this Code to destroy the Dialog in Button Section
$("#TestMenuDialog").dialog("close").dialog("destroy").remove();
var NewDialog = $('<div id="TestMenuDialog"><p style="color:Red;style="font-size:7x;font-weight:normal">' + Message + '</p></div>');
NewDialog.dialog({
modal: false,
title: "Test Dialog",
height: 200,
width: 375,
show: 'clip',
hide: 'clip',
buttons: [
{ text: "OK", click: function () { $(this).dialog("close").dialog("destroy").remove(); } }
]
});
check the Jfiddle Link It works fine
http://jsfiddle.net/zpP3c/1/
I am creating an image map with buttons. The buttons are created by php:
while($pc = mysql_fetch_array($result)){
if ($pc['Online_Status']==0){
$class = 'workstation-offline';
}
else{
$class = 'workstation-online';
}
echo "\r\n\t\t\t".'<button class="'.$class.'" id="'.$pc['PCID'].'" title= "'.$pc['PCID'].'>';
}
When the page loads, traverse.php dictates what class the button will be. In my css, the workstation-offline will be green, and red if offline. traverse.php also loads data from a database.
This is the html code:
<div class="image_map" style="background-image: url('image.jpg');">
<?php
include("traverse.php");
?>
</div>
What I'd like to happen is when a button is clicked, a dialog box will open and display data about the station with the ID "pc['PCID']" in a table like:
<h3>"The ID of the Button"</h3>
<table>
<tr>
<td>IP Address</td>
<td>pc['ipAddress']</td>
</tr>
<tr>
<td>MAC Address</td>
<td>pc['macAddress']</td>
</tr>
<tr>
<td>Other Info</td>
<td>pc['otherInfo']</td>
</tr>
</table>
How can I do that using js/jquery?
I would use jquery-ui modal dialog box. (http://jqueryui.com)
You could load data on the fly like this. Here's a click handler for the buttons that will create a dialog box and then load data from a server side page :
$(document).ready(function () {
$('.workstation-online,.workstation-offline').click(function () {
var url = "put the url to obtain info from database here";
var dialog = $('<div style="display:none" class="loading"></div>').appendTo('body');
dialog.dialog({
resizable: false,
width: 400,
height: 300,
modal: true,
closeText: '',
close: function (event, ui) {
// remove div with all data and events
dialog.remove();
}
});
dialog.load(
url,
function (responseText, textStatus, XMLHttpRequest) {
// remove the loading class
dialog.removeClass('loading');
}
);
return false;
});
});
I have a list of products from a particular supplier being displayed in a <table> populated with data from my mysql database.
Within this table, each product has a link that, when clicked, should show the product details in a ui-dialog, <div id = "detalhe_produto"></div>. The dialog does open, however, it only works only for the first item in the list. The other links of the following lines do not open the dialog.
Can anyone help me?
Here's the script I am using to open the ui-dialog:
<script type="text/javascript">
$(function(){
$('detalhe_produto').click(function(){
var selectedVal=$("#detalhe_produto").val();
var url="produto_detalhe.php?codigo="+selectedVal;
var dialog = $("#detalhe_produto");
if ($("#detalhe_produto").length == 0) {
dialog = $('<div id="detalhe_produto" style="display:hidden"></div>').appendTo('body');
}
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
close: function (event, ui) {
dialog.remove();
},
modal: true,
width: 460
});
}
);
});
});
</script>
and then the code table:
<table border="0" cellpadding="0" cellspacing="3">
<?php do { ?>
<tr>
<td align="left" valign="top" class="lista_produto"><?php echo $row_lista_produtos['codigo']; ?></td>
<td width="15"></td>
</tr>
<?php } while ($row_lista_produtos = mysql_fetch_assoc($lista_produtos)); ?>
</table>
I have tried to change the href="#" to href="javascript: void (0)"
and the result was the same.
Suggestions?
If you have many distinct dialogs that can be clicked open, you need to use a class selector, . instead of an ID selector, #. You may have also forgotten the #.
So instead of this:
var dialog = $("#detalhe_produto");
do this:
var dialog = $(".detalhe_produto");
**Please see this jsfiddle: http://jsfiddle.net/trpeters1/uFDdb/2/
It has a complete working demonstration of the jqueryUI dialog for multiple dialogs specific to your use case. Meaning, the dialog shows a value specific to which link was clicked.
you missed a # in $('detalhe_produto').click(function(){
i have created a table with a row and 4 columns.i declared attributes class,id for td element. when i click on the td i have to call the jQuery function to load pop up box. here instead load pop up i just want to display the alert box but it doesn't work. here is my code
jQuery
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
alert("jquery");
$('.tbox').click(function(e) {
tb_show("ThickBox","hi.html?height=120&width=400","true");
}
});
</script>
html code:
<table>
<tr align="center">
<td class="tbox" id="tbox"> <?=$id?> </td>
<td class="tbox" id="tbox"><?=$zoneName?></td>
</tr></table>
how to call the jQuery?
Your event handler has not been closed properly, causing a parse error. Try:
$(document).ready(function(e) {
alert("jquery");
$('.tbox').click(function(e) {
tb_show("ThickBox", "hi.html?height=120&width=400", "true");
});
});
$(document).ready(function (e) {
$('.tbox').click(function (e) {
alert("jquery");
});
});
is this what you were asking?
Its because you are using two divs with same id. Thats why I think its not working. Trying varying the name of the divs and they will work fine
$('document').ready(function(){
$('#tbox1').click(function(){
alert("I am from div1");
});
$('#tbox2').click(function(){
alert("I am from div2");
});
});