I'm trying to open a php record inside of simple modal box. I already tried to open a record using fancybox.
In fancybox just like this
<td><a class="fancybox" href="url.php?id='.$row["id"].'"><img src=".png"></a></td>
How to do that in simple modal?
SimpleModal
$("myElement").addEvent("click", function(){
var SM = new SimpleModal({"width":600});
SM.addButton("Action button", "btn primary", function(){
this.hide();
});
SM.addButton("Cancel", "btn");
SM.show({
"model":"modal-ajax",
"title":"Title",
"param":{
"url":"ajax-content.php",
"onRequestComplete": function(){ /* Action on request complete */ }
}
});
});
<li class="example-item" id="modal-ajax">
<img src=".jpg">
Modal Ajax</li>
Related
I need to refresh a parent page when closing a overlay lightbox (not popup window).
The lightbox has no close button, it's closed by clicking anywhere outside the lightbox.
I tried the following code, but it doesn't refresh the parent page.
Would you plase let me know how to refresh the parent page?
HTML:
<div class="dwqa-ask-question">
<a href="https://www.myweb.com/ask-questions/" rel="lightbox" data-lightbox-type="iframe">Ask Question
</a>
</div>
Lightbox:
<div class="nivo-lightbox-overlay nivo-lightbox-theme-default nivo-lightbox-effect-fade nivo-lightbox-open">
<div class="nivo-lightbox-wrap">
<div class="nivo-lightbox-content">
<iframe src="https://www.mycom.com/ask-questions/" class="nivo-lightbox-item" frameborder="0" vspace="0" hspace="0" scrolling="auto"></iframe>
</div>
<div class="nivo-lightbox-title-wrap"></div>
</div>
Previous
Next
Close
</div>
Added the following code in a lightbox page (=ask-questions page):
$(document).ready(function () {
if (window.opener) {
window.close();
}
if (window != top) {
top.location.replace(document.location);
}
});
jQuery(document).ready(function refreshParentWindow(){
window.opener.location.href="/{!$CurrentPage.parameters.id}";
window.top.close();
});
jQuery(document).ready(function (){
var rel = window.opener.location;
window.close();
rel.reload();
});
Thank you.
"Responsive Lightbox" is the plugin i'm using for the lightbox.
There are multiple ways to set this up. I personally always use additional css classes to show and/or hide my html elements on the page, but since you're currently using a plugin, then you could add an event listener to your page.
So use this javascript on your page:
jQuery(document).ready($ => {
console.log("You just loaded your js file onto the page"); // Testing whether you've loaded your js file correctly!
$(document).on("click", e => {
if (
document.querySelector('.nivo-lightbox-overlay').contains(e.target)
&&
!document.querySelector(".nivo-lightbox-wrap").contains(e.target)
) {
console.log("You just clicked outside of the lightbox wrap"); // Testing event listener
location.reload(); // a simple refresh
// OR
// location.reload(true); // a hard refresh
};
});
});
You see the orange area around your light-box wrap with nivo-lightbox-overlay class? Click anywhere on it an it'll reload your page!
Let me know if you were able to get it to work!
Another solution
jQuery(document).ready( $ => {
$(document).on("click", "div.nivo-lightbox-overlay", () => {
if ($("div.nivo-lightbox-overlay").length) {
location.reload(); // a simple refresh
// OR
// location.reload(true); // a hard refresh
}
})
});
How can I include a delete button in FancyBox when displaying images from a mySQL database using PHP and jQuery?
$("[data-fancybox]").fancybox();
$.fancybox.defaults.buttons = [
'slideShow',
'fullScreen',
'thumbs',
'delete', // this one is the new button
'close'
];
$('body').on('click', '[data-fancybox-delete]', function(e) {
var src = $('.fancybox-slide--current .fancybox-image').attr('src'); // src of the currently showing slide
var idx = $('a[href="' + src + '"]')[0]; // My Tag
});
$('body').on('click', '[data-fancybox-delete]', function(e) {
var src = $.fancybox.getInstance().current.src;
var idx = $.fancybox.getInstance().current.opts.$orig;
});
If anyone lands here from Google, here's how to actually add a custom button to the fullscreen gallery, when you initialize FancyBox via Javascript :
$('[data-fancybox="gallery"]').fancybox({
buttons: [
"zoom",
"slideShow",
"thumbs",
"close",
"delete" //this is the name of my custom button
],
btnTpl: {
//and this is where I defined it
delete:
'<a download data-fancybox-delete class="fancybox-button fancybox-button--delete" title="Delete" href="#">' +
'<i class="fas fa-trash-alt"></i>' +
"</a>"
}
});
From the official documentation.
I see that you are using image to be shown to fancybox. why dont you try showing an actual div that is hidden. and adding the hidden div to your fancy box. here's a link I've implemented on https://clientsnb.com/proyectos/equipamiento-integral-renault/ try clicking on the button PREGUNTANOS and it shows a form from a hidden content.
i have a message board. and you can comment on each message (bit like faceboook).
if you click the "comment" link a textarea slides down and you can write your comment.
but if you click "comment" then click cancel so that the textarea slides back up and them click comment again so that it slides back down again and leave a comment it will post the commment twice. so for every time the comment textarea slides into view and back it duplicates the comment.
$("body").on("click",".new_comment", function(e){ // new comment link
e.preventDefault();
var post = $(this).parents('.message_container').siblings('#post_comment');
clearInterval(refreshBoard); //stop autorefresh
$(post).slideDown(400, function() { //slide textarea down
$(".cancel_comment").on("click", function(e) { //cancel comment
e.preventDefault();
$(post).slideUp(400, function() { //slide textarea back up
$('#comments').load('messages.php'); //reload div
msgRefresh(); //starts autorefresh
});
});
});
//the following posts the comment along with info//
$("body").one("click", '.post_comment_button', function(e){
e.preventDefault();
var anchor = $(this).parents('.update_comment')
.parents('#post_comment').siblings('.comment_list').find('ul:first');
var comment = $(this).parents('.update_comment').children('textarea.post_comment').val();
var user = $(this).parents('.update_comment').children('input.user').val();
var msg_id = $(this).parents('.update_comment').children('input.message_id').val();
if (comment == '') $('#comments').load('messages.php');
else {
$.post('messages.php', {
comment: comment,
message_id: msg_id,
post_comment: 'true' }, function(data) {
//creatse new comment//
$('body').append(data);
var newcomment = "<li><div class='comment_container'>
<div class='date'>less than 1 minute ago</div>
<div class='name'>" + user + " </div>
<div class='info_bar'><div class='edit_comment'>
<a href='#' class='comment_edit'>Edit</a> </div>
<span>|</span><a href='#' class='delete_comment'>Delete</a></div>
<div class='fadeOut_comment'><div class='posted_comment'> " +
nl2br(htmlEntities(comment.trim())) + " </div></div></li>";
$(post).slideUp(400);
$(newcomment).fadeIn(500, function() {
$('#comments').load('messages.php');
}).appendTo(anchor);
});
}
});
});
so my question is why is this happening? and how do i stop it? if you need more info please ask. thankyou
This is happening because you're biding the .cancel_comment click handler every time someone clicks the .new_comment link.
On the first comment it fires one time and binds again, second comment fires two times and binds again, etc. By the 10th comment it will fire 10 times because you attached 10 event handlers.
Then, because you call msgRefresh(); inside this callback, it will append the same messages several times to the DOM.
To only bind it once take the following outside the .new_comment click callback.
$(".cancel_comment").on("click", function(e) { //cancel comment
e.preventDefault();
$(post).slideUp(400, function()
{ //slide textarea back up
$('#comments').load('messages.php'); //reload div
msgRefresh(); //starts autorefresh
});
});
And then bind it like this:
$("body").on("click", ".cancel_comment", function(e)
{
//cancel comment
});
I can see you're also biding at least one more event inside the .new_comment click callback. You should avoid doing this, do not bind anything inside a callback unless you really need to and you're 100% sure it won't be attached more than one time.
EDIT: The complete code might look something like this:
$("body").on("click", ".cancel_comment", function(e) { //cancel comment
e.preventDefault();
$(post).slideUp(400, function() { //slide textarea back up
$('#comments').load('messages.php'); //reload div
msgRefresh(); //starts autorefresh
});
});
$("body").on("click",".new_comment", function(e){ // new comment link
e.preventDefault();
var post = $(this).parents('.message_container').siblings('#post_comment');
clearInterval(refreshBoard); //stop autorefresh
$(post).slideDown(400, function() { //slide textarea down
});
//the following posts the comment along with info//
$("body").one("click", '.post_comment_button', function(e){
e.preventDefault();
var anchor = $(this).parents('.update_comment')
.parents('#post_comment').siblings('.comment_list').find('ul:first');
var comment = $(this).parents('.update_comment').children('textarea.post_comment').val();
var user = $(this).parents('.update_comment').children('input.user').val();
var msg_id = $(this).parents('.update_comment').children('input.message_id').val();
if (comment == '') $('#comments').load('messages.php');
else {
$.post('messages.php', {
comment: comment,
message_id: msg_id,
post_comment: 'true' }, function(data) {
//creatse new comment//
$('body').append(data);
var newcomment = "<li><div class='comment_container'>
<div class='date'>less than 1 minute ago</div>
<div class='name'>" + user + " </div>
<div class='info_bar'><div class='edit_comment'>
<a href='#' class='comment_edit'>Edit</a> </div>
<span>|</span><a href='#' class='delete_comment'>Delete</a></div>
<div class='fadeOut_comment'><div class='posted_comment'> " +
nl2br(htmlEntities(comment.trim())) + " </div></div></li>";
$(post).slideUp(400);
$(newcomment).fadeIn(500, function() {
$('#comments').load('messages.php');
}).appendTo(anchor);
});
}
});
});
I have the following link which opens a jquery modal window:
<div id='confirm-dialog'><a href='#' class='confirm'><img src='1.png' /></a></div>
and the following JS code which processes it:
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
confirm("Are you sure you want to delete item id='IDNUMBER'.", function () {
window.location.href = 'path to php process script';
});
});
});
function confirm(message, callback) {
$('#confirm').modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["30%",],
overlayId: 'confirm-overlay',
containerId: 'confirm-container',
onShow: function (dialog) {
var modal = this;
$('.message', dialog.data[0]).append(message);
// if the user clicks "yes"
$('.yes', dialog.data[0]).click(function () {
// call the callback
if ($.isFunction(callback)) {
callback.apply();
}
// close the dialog
modal.close(); // or $.modal.close();
});
}
});
}
I am unable to solve two issues:
How do I pass the ID variable (perhaps other variables) into the javascript function so that when I submit 'yes' on the confirmation window, the php path will include something like : http://www.pathtophp.com?ID=12345
How do I display the ID variable within the popup text (shown as: ...delete item id="IDNUMBER"...)
You could simply in the head of the page the PHP generates (before including the other JS files) add
<script type="text/javascript">
//Assumes id is passed in the URL
var id = <?php print $_GET['id'];?>;
</script>
Then the variable "id" is available to all JavaScript functions on the page.
Alternatively, if there are multiple links on the page you are wanting to apply this functionality to, you could add the id to the rel attribute of the anchor tag:
<a href="javascript:void(0)" class="confirm" rel="<?php print $id;?>">
Then you'll modify your jQuery function to
jQuery(function ($) {
$('#confirm-dialog input.confirm, #confirm-dialog a.confirm').click(function (e) {
e.preventDefault();
confirm("Are you sure you want to delete item id='"+ e.currentTarget.rel +"'.", function () {
window.location.href = 'http://www.pathtophp.com?ID=' + e.currentTarget.rel;
});
});
});
for 1 you can use like below
var value= "<%=value from server side%>"
All,
When I click a link on a web page, a JQuery UI Dialog opens up and it loads some ajax content into it. If I click a link inside this dialog, it opens up a child dialog. When I click "OK" in the child dialog, I want the child dialog to close and refresh the ajax content in the parent dialog.
Do you already have the code that closes the child dialog ? Is it an alert() call ? If so, simply add a
location.reload();
after the alert call. If it's something more complicated like a link, try
$('a.link-that-closes-dialog').click(function(){
//Code to close the dialog
location.reload();
});
i use this script for choose if show/hide any content.
After clicking button "Ritira" in the dialog, the page redirect me in the same page but whit a querystring (ex. www.mypage.ext?t=yes).
The script work, but I wish at the click of the button "Check Out" there is a refresh of the page.
I tried to enter the location.reload but did not work:
$(function() {
$(document).ready(function() {
$(".dialog-ritira").dialog({
autoOpen: false,
modal: true
});
});
$(".ritira").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$(".dialog-ritira").dialog({
buttons : {
"Ritira" : function() {
window.location.href = targetUrl;
location.reload();
},
"Annulla" : function() {
$(this).dialog("close");
}
}
});
$(".dialog-ritira").dialog("open");
});
});
Thanks