Description:
I created this workflow: PHP loads content from a database to certain textareas. The user can edit and save content.
I created a HTML template which can be printed directly from the web browser.
So the user clicks on the "Print" button and gets a nice template which can be printed directly from the browser.
Goal:
I want jQuery or JavaScript to load / transfer the content from the input fields to another HTML document on the server, in certain div-classes.
Is this generally possible or a good idea?
Afterwards, this becomes loaded and the print dialogue of the web browser will be opened.
Present Code:
$(document).ready(function() {
$( ".print-button" ).click(function() {
$('html').load("./views/print/template-1.html");
setTimeout(function(){
window.print();
}, 1000);
})
window.onafterprint = function(e){
$(window).off('mousemove', window.onafterprint);
window.location.href = window.location.href;
};
});
So template-1.html should get the data.
First of all I think it would be a good idea to support the build in functionality of the browser. The user should be able to hit Ctrl+P or use the menu to open the print dialog.
My suggestion would be to create a <div> element that is hidden. On some event, like when the <textarea> is changed, update the <div> element with the content. Create a stylesheet for printing where the <div> element is visible and hide elements that are not for printing (like the <textarea>).
As per the description, you have mentioned that you are allowing PHP to load the data in certain text-areas and allows user to update that, so when you update this data, it'll be saving into the database for that particular text-area.
What best you can do here is keep one unique key for that shown data and when you redirect the page bind the unique key along with the page URL, so using that key on the new page where you have the template, you can get the data using select query and you can print the data wherever you want.
Afterwords on print click, the template will have the data filled in and so the user will be able to download/print the template with data, the way you wanted.
Or
If you don't want to use the PHP for getting data on the new document, you can simply pass the data object in localstorage by using below way :
var content= <your data Object>;
localStorage.setItem('print_content', content);
Now before loading the dialogue, get the data from localstorage variable and print it to div or area wherever you want. For getting data from localstorage use below way:
var printData = localStorage.getItem('print_content');
using printData var, you'll be able to get the data and using jQuery syntax you'll be able to append or display the data to div.
Related
I have one functionality to get the print of current page. So to prepare the content, I am showing everything on one popup up first then later a print popup and then print command.
Trying to do the same with below code.
$('#button').on('click',function() {
var popup = window.open("","mypopup","width=500,height=300");
var html = $("#form").html();
$(popup.document.body).html(html);
popup.print();
});
JSFiddle
Tried with clone() method as well but not working.
So the issue is, I am not getting the element's values in my popup.
Thanks
HI Use simple jquery line for each input field.
You can add a value attribute for your input fields.
I have changed your script a bit. Please refer it.
$('#button').on('click',function() {
var popup = window.open("","mypopup","width=500,height=300");
// I am setting the value attribute in the html . Do this for all fields
// with similar input fields you can have a jQuery('input').each(); loop
$('#name').attr('value',$('#name').val());
var html = $("#form").html();
$(popup.document.body).html(html);
popup.print();
});
Manually send the data from form through ajax call and store it in a local websql (browser)storage which can be retrived in the print preview dialog box
Here is the problem:
I have a page e.g www.app.com/home and I have some windows that are added in a slide way to the DOM via jquery. One of those windows has the functionality of looking into a gmail account for contacts.
This is done in this way:
User is in the home page.
Clicks the search Friends button, and a window with many options
slides in (added by jquery, rthe content is in another .gsp)
Clicks the option gmail and it redirects to googles oauth,
permissions and account selection, where he must accept the access
to his/her contact list.
Once accepted, it redirects to my home page again, where I have a
var to know if its the callback from google, so I ran the script
that shows the popup again.
The problem Im having, is that from the home page itself, I can access the model passed by the controller that has the ${friendList}, but when I add some code to the popup window, the ${friendList} is not detected.
I have used grails render templates to solve this problem in the past. You can have a hidden div that jquery unhides when it is popped up. e.g
<div id="theSlideWindow" style="display:none">
<g:render template="gsptemplate" collection="${friendList}" var="myfriend" />
</div>
Now when the button is clicked, jquery will unhide the div and animate it however you are animating it. Now this is not very efficient depending on the size of friendList because it is loaded with every refresh.
But you can still make jquery load work by doing the following:
add user id to a hidden input.
<input type="hidden" value="${userid}"/>
use jquery so send the id as a param:
$('button').click(function() {
var page = "gspurl/show?userid=" + $("#hidden").val();
$("div").load(page, function(response, status, xhr) {
//do something here
});
return false;
});
In your gsp use userid to load friendList.
Another alternative would be to use a controller that returns html or json instead of a gsp.
Obviously, there several different ways of passing friendList around but hope this gives you some ideas.
Goal: User enters one item in text box that has autofill, after clicking button they are taken to a second page that has other corresponding items already filled out in form.
Problem: Autofill works but becomes erased/wiped out when second page opens (in other words the form is blank.
Question: I suspect I am not properly associating the actions of "form auto fill" and "open second page" with the one button. Any ideas?
$("#nextbutton").click(function () {
$("#favorite_appetizer").trigger("meals");
window.location.href = 'dinner-ideas.html';
});
Well probably problem is already solved, but try adding $_GET into javascript href, like:
window.location.href = '/index.php?first=1&second=2';
Part in part after you declare variable names and values that you can catch in second php page, like:
$_GET['first'];
$_GET['second'];
Ofcourse you need to get values from form elements with .val() or .text() and etc.
And ofcourse this has drawbacks, best used for numbers and words but not texts with symbols. Knowing more about type of form content would help, like if its data to be saved to database, you could AJAX half filled form, then retrieve its data from database with a query. If you are just filtering data, you can URL $_GET database ids of form elements, then query in second page by those ids. So again, depends on data in your forms that you want to pass to second page.
Here's what I'm using as a custom button control in Salesforce that executes JavaScript.
location.replace('/email/author/emailauthor.jsp?retURL=/{!Case.Id}&p3_lkid={!Case.Id}&rtype=003&p7=GetURLHere&p2_lkid={!Case.ContactId}&template_id=00Xc0000000HrOk');
The GetURLHere part is where I'd like to grab the current URL and place it on the next page.
This form works like Select Listview > Click Button > New page loads with the previous pages URL in the p7 field.
p7represents a field I'd like to put it into upon page load.
The usual document.location.hrefdoesn't want to work in this control.
Any idea on how to do this in the Force.com environment?
You should be able to use the $CurrentPage object to get the current pages url as a formula expression.
document.location.href = '{!$CurrentPage.URL}';
I am wondering if there's a good way to take a variable built in Javascript and then insert it into a form that's on another page.
My application is a survey: I've got it so that at the end of the survey, all the results are displayed so they can look over their answers. Now I want to have the user click a link and have the answers of the survey show up automatically in the body of the form where they'll then add their email and contact info and click "send."
Any ideas?
Knowing that this ISN'T possible is fine too...if not, what alternate methods might I accomplish the end result?
You can create a hidden field in first page and change that value from javascript variable. When you post that page it can be another page where you need to display in form element.
EDIT
If you need without form in first page you need to link with hyperlink like below.
<a href='#' onClick='OpenPage()'> Go To Result </a>
<script>
var val=20 ; // say this is the value you want to pass to second page
function OpenPage ()
{
window.location.href = "resultpage.php?param=" + val;
}
</script>
After you need to read that param in resultpage either with javascript through URL string or from server side (in PHP $_GET).
Hope it helps.