How can I make each button instead of going to another page to display the information on a dialog box in the same page.
This code here is in the head to call the id from the other file
<script type="text/javascript">
function getvoucher(id){
return data;
});
}
</script>
Then I have this button in my while loop:
<td><?php echo $row['voucher_id']; ?></td>
<td> <?php echo' Click here'; ?></td>
When I click on the button it displays what I want in test but instead I want it to show in a dialog box, any help?
you can use JQuery's UI dialog which is pretty widely used today. Here is the link for demo:
https://jqueryui.com/dialog/
What you can do is to set the content you want to display in the dialog div's tag and then bind the dialog to the button id.
Example
JAVASCRIPT
$("#voucher_id").click(function() {
$.get("http://52.91.139.19/inactive/test.php?id=" + id, function(data,status){
$("#content").html(data);
});
});
HTML
<div id="dialog" title="Basic dialog">
<p id="content">This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
You should then put Id on button and in script
$("#id").click(function(){
alert("You clicked the button");
});
Did you try with alert something like this echo <script>alert("Message");</script>;
Or did you try to open fancybox you can use for example <a class="className" data-fancybox-type="iframe" href="yourhreftodisplayinfoonfancybox">Open</a>
<script>
$(".className").fancybox({
maxWidth:500,
maxHeight:600,
fitToView:false,
width:'60%',
height:'100%'
}
});</script>`
If you want on button then try with onclick to rised fancybox or dialog I don't do like that
$("#id").click(function() {
$.get("http://inactive/test.php?id=" + id, function(data,status){
$("#content").html(data);
});
});
Related
I'm trying to create a pop-up to show images which have been uploaded into my database.
I have tried
echo '<td><a class=help href="'.$dbRow['image'].'"></td></tr>';
the class represents the pop-up class
<SCRIPT type="text/javascript">
$('.help').popupWindow({ height:400, width:500, top:100, left:100 });
</SCRIPT>
Any suggestions how I get the image to display from the database as a pop-up? The image field is retrieving on my webpage from the database but need it to click as a pop-up to display
Use jQuery for this.
Use an loop to echo all images to the certain div.
<div class="help">
<?php
foreach($key as $value) {
echo '<a class="help" href="'.$value.'"><br/>';
}
?>
</div>
then display the dialog
<script>
$('.help').dialog({
//your dialog options here
height:'500',
width:'500',
});
</script>
See jQuery dialog for more info about the dialogs
I'm trying to make a content popup using colorbox.
This is my code
<script type="text/javascript">
$(document).ready(function() {
$('.colorbox').colorbox({
inline:true,
width: 640,
height: 480
});
});
</script>
</head>
<body>
<div style="display:none">
<div id="popup">
<?php echo $row["content"]; ?>
</div>
</div>
<?php echo $row["content"]; ?> <a class='colorbox' href='#popup'><span>PopUp</span></a><br>
The problem is it always show the same content, example like this:
content one PopUp
content two PopUp
content three PopUp
content four PopUp
if i click content one PopUp link it will show "content one" in the colorbox although i click PopUp in content two or three or four it will always show "content one" in the colorbox, so how to fix this
I want to make if I click content one PopUp link it will show "content one", if I click content two PopUp link it will show "content two" and etc
======================================================================================
I can solve the problem but I have to change in
I change it into like this
<a class='colorbox' href='' onclick="$.fn.colorbox({ html:'<?php echo $row["comment"]; ?>'}); return false"><span>PopUp</span></a>
but how to change onclick function into jquery ? I don't want to use onclick..
please help me
You should change the content of #popup after clicking each .colorbox . You may do this as below :
$(function(){
$(".colorbox").on('click',function(){
//do someting to change the content of #popup
//eg:
//$("#popup").html(Math.rand())
}).colorbox({
inline:true,
width: 640,
height: 480
});
});
I have this div named "pachete" which generates image links(click on an image and the corresponding address from the database loads) which works I get sent to correct page but what i want is to load that page into the page where I'm at(right below the image links ) into the new_page div , not get redirected to it.The class "poza_efect" is a simple opacity effect. I have a JavaScript function but for some reason it does not work.
<script>
$('.stil_link_img').click(function () {
$('#new_page').load($(this).attr('href'));
return false;
});
</script>
<div id="pachete">
<?php $result=mysql_query( "SELECT* FROM imagini"); while($data=mysql_fetch_row($result)){ if( ($data[3]==1)&&($data[2]==2) ){ ?>
<div class="stil_link_img">
<a href="<?php echo $data[4];?>" class="poza_efect">
<img src="upload/<?php echo $data[1];?>">
</a>
</div>
<?php } }?>
</div>
<div id="new_page">//some content which should be replaced with my loaded page</div>
In your Javascript function, the reference $(this) is not pointing to the A element, but to the container DIV. Try to do it like this:
$('.stil_link_img a').click(function() ...
And also, wrap this into the $(document).ready(function() { .... }); handler to ensure that the elements are completely loaded.
The stil_link_img click event is registered before the elements are loaded, so the event is never attached. Use
$(".stil_link_img").live(..) or
attach the event after the page is loaded completely
move the .click after your loop
Also you should register the click event to the a-tag instead of the div(or if you want that, be sure to set some clickable background..)
<a data-toggle="modal" href="msg_id=<?php echo $id; ?>#example" class="link_comment">Comment</a>
<div id="example" class="modal" style="display: none; ">
Your message ID is :
<?php
echo $msg_id = $_GET['msg_id'];
?>
</div>
When I try to mouseover to Comment link, in status URL : I can see the msg_id value. But When I try to click the comment link (I using Jquery modal), it can't be show the value of the link.
So my question, how can I do that to make the value of msg_id show in Jquery modal.
Thanks for your help.
Since you open #example div with jquery Modal, it dosen't reload the page, hence $_GET is empty.
You can achieve what your goal in at least 2 ways:
Use Ajax to load contents of #example div when link is clicked.
<a data-toggle="modal" href="<?php echo $id; ?>#example" class="link_comment">Comment</a>
<script type='text/javascript'>
$('.link_comment').click(function(e) {
e.preventDefault();
var id = $(this).attr('href');
$.get('givemycomments.php?id='+id, function(data) {
$('#example').html(data);
});
});
</script>
Load all possible contents when page is rendered with php. For example, you would have #example_1 , #example_2 divs. When link is clicked, get value of its ID, and fire Modal with correct div. edit: after writing example code i realized that if you have lots of comments, it can be quite heavy to load em all.
Below is the Html button and javascript function I have which closes a modal window:
<button type="button" id="close" onclick="return parent.closewindow();">Close</button>
function closewindow() {
$.modal.close();
return false;
}
Now the code above does close the modal window which is fine.
But I want to know how to write the code by using this function and html button below:
<button type='button' class='add'>Add</button>
$(document).on('click', '.add', function(){
$.modal.close(); ;
return true;
});
The above code does not close the modal window, why is this? Both these codes are on the same page by the way.
I am using simplemodal developed by eric martin
UPDATE:
Below is full code (QandATable2.php) but it is still not closing modal window when clicking on "Add" button:
$(document).ready(function(){
$('.add').on('click', function(){
//close modal window when user clicks on "Add" button (not working)
$.modal.close();
});
});
function plusbutton() {
// Display an external page using an iframe
var src = "previousquestions.php";
$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
//Opens modal window and displays an iframe which contains content from another php script
return false;
}
function closewindow() {
$.modal.close();
return false;
//closes modal window when user clicks on "Close" button and this works fines
}
...HTML
<table id="plus" align="center">
<tr>
<th>
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" name="plusbuttonrow"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
</th>
</tr>
</table>
Below is the full code which displays all of the information that goes into the modal window (this is in previousquestions.php script). This includes both "Add" and "Close" buttons:
<div id="previouslink">
<button type="button" id="close" onclick="return parent.closewindow();">Close</button>
</div>
<?php
$output = "";
while ($questionrow = mysql_fetch_assoc($questionresult)) {
$output .= "
<table>
<tr>
<td id='addtd'><button type='button' class='add'>Add</button></td>
</tr>";
}
$output .= " </table>";
echo $output;
?>
From what I remember from the comments, you wanted to close the modal when clicking in an add button inside the modal right?
$(document).ready(function(){
$('.add').on('click', function(){
$.modal.close();
});
});
I made your first example (before your question edit) work, take a look at this JSFiddle.
Be careful with the order you show/hide elements and wrap your function inside the $(document).ready() to prevent the code execution before the DOM is loaded.
If you don't manage to adapt your page to work similarly to my fiddle, you should post more from your page's code as there'd probably be something causing the plugin to don't work properly (or switch to another modal plugin).
edit: You're using an iframe, that's why you can't access the parent window's defined functions from the iframe's scope directly. You could try using the window.opener to access your parent window's scoped functions, or, to solve all and any window scope problem:
Replace
$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
With
$.modal('<div id="modal" style="border:0;width:100%;height:100%;">');
$('#modal').load(src);
This will load content to the div dynamically through Ajax, which is a better approach and resolves any window scope problems which you were facing.
Either that or switch to a modal plugin which supports loading pages directly to it, for instance, colorbox.
EDIT
Now with your full code it was easy to find a solution, simply add onclick='parent.closewindow();' to your add button in your PHP:
<td id='addtd'><button type='button' class='add' onclick='parent.closewindow();'>Add</button></td>
This way, it'll re-use the existing closewindow function and discard the .on binding for the .add buttons. :)