I want to print the content of my page. But that contain a popup. I need to display the pop up window content in my main page contain a button name Details. When I click the button a pop up will show.
When I click my print button.Only show the main content. The particular field for the pop up displaying window is blank (Details button)
I'm using window.print();
print button=> 'onclick="printpage()"'
function
function printpage()
{
$('#hiddendiv').html($('#view_popup_descriptive_index').html());
$('#hiddendiv').show();
window.print();
$('#hiddendiv').hide();
}
Any method to display the popup content.
You may try appending the HTML from the popup to the page before printing.
$("#print").on('click', function(){
//find HTML
var $popupContent = $('.popup').html();
//console.log($popupContent); //see what you really get from the popup
//create a div before the button and put the popup content there
$(this).before($('<div />', {
'class': 'created',
'html': $popupContent
}));
//trigger printing
window.print();
//remove the dynamically created container
$('.created').remove();
})
You can see it working online here - https://jsfiddle.net/skip405/6dt2dhm7/
Related
I'm looking for a way only use javascript to display a dialog , The dialog display include:
Title
(operation icon) Content
Button(OK)
But after I see the sample in the Jquery mobile document, Looks like If I want to display a dialog, I must use some html+css code, But I just want to use javascript only to display it.
The sample dialog already not support the new version Jquery mobile, it's not working.
the popup so ugly, only has content, not button like OK, also no close button.
So Is there any way can display a good dialog(not so simple like popup) only use javascript? Also can use Jquery.
jQuery Mobile Popups can absolutely handle your requirements. It is no problem to include titles, content, buttons, and a top corner close button. Additionally you can add the popup via script instead of markup in the page.
For example, if you have the following button on your page:
<button id="btnDynamic">Dynamic Popup...</button>
And you want to launch a dialog when it is clicked, your script could be something like this:
$("#btnDynamic").on("click", function () {
//create the popup markup
var html = CreatePopup("Dynamic", "This popup is created and launched entirely via script");
//append popup to DOM, tell jqm to enhance and initialize the popup
// and to remove the popup from DOM on close
$("#page1").append(html).find("#mypDialog").enhanceWithin().popup({
afterclose: function (event, ui) {
//remove from DOM on close
$("#mypDialog").remove();
}
}).popup("open", {
transition: "flow",
positionTo: "window"
});
//Add click handler for button in popup
$("#mypDialog").on("click", "#btnPopOK", function(){
alert("You clicked OK, I will now close the popup");
$("#mypDialog").popup("close");
});
});
function CreatePopup(title, content){
var html = '<div data-role="popup" id="mypDialog" data-overlay-theme="b" data-theme="a" data-dismissible="false" >';
html += '<div data-role="header"><h1>' + title + '</h1>Close</div>';
html += '<div role="main" class="ui-content"> <h3 class="ui-title">' + content + '</h3>Cancel<a id="btnPopOK" href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline" data-transition="flow">OK</a></div>';
html += '</div>';
return html;
}
I am creating the popup markup as a string. That string is then appended to the data-role="page" DIV. We then find the popup div (We assigned an id of myDialog to it) and tell jQM to enhance the content of the popup, initialize the popup widget with an afterclose callback that removes the popup from the DOM once closed, and finally the command to show the popup. I have also included a handler for the OK button click.
Here is a working DEMO. Note I have also included a static popup in the DEMO.
So I have a really simple pop-up on a page when a link is clicked, but it will refresh the page when I click on the close button. Which is bad since I have it within a set of Ajax tabs, so on refresh it goes back to tab1 instead of staying on tab3. Any idea's of a function to do this, I know there's one to make the parent page refresh, so there must be one for no refresh? Thanks!!
This is my JS
$(document).ready(function(){
// show popup when you click on the link
$('.show-popup').click(function(event){
event.preventDefault(); // disable normal link function so that it doesn't refresh the page
var docHeight = $(document).height();
var docWidth = $(document).width(); //grab the height of the page
$('.overlay-bg').show().css(); //display your popup and set height to the page height
$('.overlay-content').css({'top': scrollTop+20+'px'}); //set the content 20px from the window top
});
// hide popup when user clicks on close button
$('.close-btn').click(function(){
$('.overlay-bg').hide(); // hide the overlay
});
// hides the popup if user clicks anywhere outside the container
$('.overlay-bg').click(function(){
$('.overlay-bg').hide();
})
// prevents the overlay from closing if user clicks inside the popup overlay
$('.overlay-content').click(function(){
return false;
});
});
I'm guessing your close dom contains a link. In your close handler just add the event param and prevent default like you do for the other clicks.
See updated close function below
$('.close-btn').click(function(evt) {
evt.preventDefault();
$('.overlay-bg').hide();
});
I have a page with products and each product has a link: "Buy". After clicking the link, a popup will show up which will have inside another .aspx file embedded. (the popup is generated by Colorbox plugin)
After the user is making the purchase (clicking on the button that sends to the DB information and so on):
1. the popup has to close itself
2. the parent page has to be reloaded
3. the scroll position has to be maintained
The problem is that the scroll position is not maintained (especially in IE browser).
What I tried:
1.
MaintainScrollPositionOnPostback="true" -- had no effect
And:
Popup page:
<script>window.parent.callbackfromchild('" + ID + "');</script>
Parent page:
function callbackfromchild(arg) {
__doPostBack("callbackbtn", "");
window.onload = function () {
document.getElementById('#div' + arg).scrollIntoView(true);
};
What am I doing wrong?
You need this script in parent aspx page
<script>
function callbackfromchild(id) {
//maintain hash on post back
var form = document.getElementById("<%=Page.Form.ClientID%>");
// Change form action & post back
form.action += '#'+ id;
__doPostBack("<%=callbackbtn.ClientID%>", "");
}
</script>
And you need this anchor -with ID to be used a function parameter from popup- placed next to each product with different ids. So when URL of parent page reload with a hash added to it " page.aspx#x1" it will make the browser scrolls to that element.
<a id="x1"></a>
And I guess you already have this Linkbutton on parent page, will be target of postback
<asp:LinkButton ID="callbackbtn" runat="server" />
On colorbox popup you need to pass the anchor Id back to parent
window.parent.callbackfromchild('x1')
Or it that was a popup window , you would call it like this
window.opener.callbackfromchild('x1')
You can put current scroll position into cookie before opening popup and reapply it on window.onload, I use jQuery.scrollTo plugin for such tasks, it works perfect
Hi hope some one can help. Have been trying to display some hidden inline content in a colorbox. Everything works great in firefox but in IE8 it works the first time then fails the second. When using alert(id) the id var is coming up as undefined the second time in IE.
Have tried a click handler to set the id and I get the same result. Here's some sample html (simplified for clarity). This is generated by Drupal CMS
<div class="my-div">
<a class="pop-extra nid-628 cboxElement" href="/alex-f">the link triggering colorbox</a>
<div id="628" class="inline-content" style="display: none;">
The hidden content to display
</div>
</div>
Here's my jquery
$(document).ready(function() {
// Hide inline content
$('.inline-content').hide();
//Fire colorbox
$('a.pop-extra').colorbox(
{
height:700,
width:420,
inline:true,
//Set the inline content to display dynamicaly by grabing the next div id
href:
function(){
id = $(this).next().attr("id");
return '#'+id;
},
onOpen:function(){
//Show the content so colorbox has something to display
$('#'+id).show();
},
});
$(document).bind('cbox_closed', function(){
//Hide content again when colorbox closes
$('#'+id).hide();
});
});
To see a demo please have a look at this url:
http://eyestoneartists-com-au.kept.com.au/browse-extras/male/all
To reproduce in IE8 click one of the images, then close the image then click it again.
put the content in another div and then display:none in a div before it.
I've got some links I want to have dynamically open in a jQuery UI Dialog using jQuery.load(). Once the dialog is open, I want the links load inside the already opened dialog.
So, the site loads, you click a link, and it opens in a dialog. That's fine. You can close and open it as many times as you want.
While it's open, if you click on one of the links from the loaded content, it doesn't work.
An Ajax GET request IS performed, but the resulting content is not successfully loaded into the dialog. (Firebug shows the request)
The previous dialog title and dialog content is erased. But the new content is not shown, NOR is it inserted into the DOM. (The generated source does not show content anywhere.)
The links look like this...
<a href="http://www.example.com/index.php?action=something&search=somethingelse#fragment" rel="dialog" title="Title Attribute">
The click event is bound...
$('body').delegate("a[rel~=dialog]", "click", function(e){return ajax_dialog(this, e);});
The ajax_dialog function checks to see if there's a dialog, calls to create one if there isn't, calls to load the content, sets the title, and opens the dialog if it's not open.
function ajax_dialog(_this, _event){
var urlToLoad = $(_this).attr("href").replace("#", "&ajax=true #");
var linkTitle = $(_this).attr("title");
// Create dialog
if(!$('body').find('#ajaxDialog').size()){
$('body').append('not yet init<br />'); // This shows up the first click only.
init_dialog('#ajaxDialog');
}
// Load Dialog Content
load_dialog('#ajaxDialog', urlToLoad);
// Add title
$('#ajaxDialog').dialog('option', 'title', linkTitle);
// Open dialog (or reload)
if(!$('#ajaxDialog').dialog('isOpen')){
$('#ajaxDialog').dialog('open');
$('body').append('not yet open<br />'); // This shows up the first click only.
}
return false;
}
The init_dialog function creates the dialog if there isn't one...
function init_dialog(_this){
$('body').append('<div id="ajaxDialog"></div>');
// Set Dialog Options
$(_this).dialog({
modal:true,
autoOpen:false,
width:900,
height:400,
position:['center','center'],
zIndex: 9999,
//open:function(){load_dialog(this, urlToLoad);}, This didn't work without destroying the dialog for each click.
close:function(){$(this).empty();}
});
}
The load_dialog function loads the desired content into the dialog.
function load_dialog(_this, urlToLoad){
$(_this).load(urlToLoad, function(){
$('body').append(urlToLoad + ' load function<br />'); // This shows up each click
$(_this).append("Hihi?"); // This shows up each click
});
// The loaded information only shows the first click, other times show an empty dialog.
}
Hah. As shown in the code, I was using $jQuery.load() and pulling the exact href of the link as the URL to request. All the URLs had fragments/anchors on the end, that is: ....html#id-of-div.
In this case, the script itself was working fine, but the #id-of-div didn't exist on the page yet. That's why I could see content returned, but the dialog just ended up blank. :-)