Creating a preview page in CakePHP - javascript

I'm building a site in CakePHP, and I'd like to give a 'Preview' option for pages as they're being added or edited.
In the 'Add Page' view, for instance, I have the usual form which the user uses to create their page. There is a 'Save' button, to save the data. Next to that, I'd like to have a 'Preview' button, which opens the page in a new window.
So, either I need the controller to open a new window (and I don't think this is possible), or it needs to be a link (targetting a new window) instead of a button - but in that case, how do I POST the data so that it can be shown? Do I need to use ajax or something? I'm a total newbie in ajax, but I do have a reasonable grasp of javascript.
Thanks for any help!

If the data that you are previewing is already saved on your database, then you can have an action in your controller (maybe preview()) action that references the saved data and loads the preview. And then to use it, you can just use a regular link that targets a new page and opens it there.
This would require saving the data the user is typing to your server every few seconds, though.
If you want to use the data that is still on the page, then you can use a JavaScript function to load a lightbox and populate the contents of that lightbox with data from the fields that the user is working on. You can probably use fancybox for that.

Related

Keep data in divs when comming back from other page

Firstly, I didn't know how to give a short description of the problem in the title, let me explain it here.
I'm creating social site, with all common features like/comments etc. Imagine Twitter/Instagram. I do have main/home page where all posts are displayed. Every post has a like button, so when it is clicked it triggers a AJAX function to send request to Django server to update the database with new like. This JS function also changes the style of the button, so user can know that he liked it. So far so good. Now when he decides that he want to comment this post, he clicks it and is redirected to the new page - the detail page. Here when the page is loading with data from server his like he gave earlier is visible(the div is red). All right, he commented, but know when pressing back button, in order to go to the home page, his like under the post is not more visible without reloading the page. I will demonstrate it using images.
Now I'm using JS function to reload whole page, to get from Django server all new data, but I don't think it is good idea.
<script>
if (!!window.performance && window.performance.navigation.type === 2) {
// value 2 means "The page was accessed by navigating into the history"
console.log('Reloading');
window.location.reload(); // reload whole page
}
</script>
Is there a better way of doing this?

Is it possible to load another page when you're creating a pdf with tcpdf?

I'm trying to change the page, when you are downloading a pdf. Otherwise you can download a lot of pdfs. I'm trying to make something against the spam.
What I got now: I create a id for a session. This session is named by idPDF. I create the idPDF by getting the current date and time. When you're creating the pdf, the idPDF will go to an online database. When the idPDF is found in the online database, then you're no longer able to create a pdf.
Then it will delete a part of the page and create a button with a php function isset. With this button you can create a new session and start creating a new pdf.
But I need to reload the page, before it is giving me this button. So how can I reload the page (that my page can check the id) or start a javascript function on the html page(fadeIn with jquery)?
Does anyone understand my question?
PS: For the output of the pdf, I'm using 'FD'
pps. I'm new with TCPDF
I solved it!
I used a jquery onclick function. It was that simpel.. First I had some problems with the required fields, but I changed it with a function that I used as a filter. I could load another page or button when the function returned true. With the button I could created another session.

How to store array from on-click and use it in dropdown

I have an HTML page that has an option for drag-n-drop and a "Preview" button. I want to call a function on the click event of that button, which will fetch all the files that are dragged onto the page. When I press this button, it opens a <px-modal> (a popup which displays some data), and it has a dropdown (<paper-dropdown> and <paper-item>), which should display the filename fetched earlier.
So I have the data, but I don't know how to store it or display it as dropdown content.
I have tried the <template> tag, but it fires on page-load when I need it to fire after the files are dropped onto the page. Otherwise, the data is null.
How do I solve this?
Without some code to look at, it's hard to help you but in general, my advice will be to use a service to store your data and all your directive/controller that needs to have access to the data should havce a dependency on this service.
Have a look at option 1 on this answer
If that's not what you're looking for, post more details, create a jsFiddle to show us where you are so we can help you better.

Saving changes in ckeditor

I'm using CKEditor in a website and I want to use it as editor of the page itself. So the user goes to the page, modifies what he wants in the ckeditor textarea(s) and then he clicks 'save' or 'submit' and the page is modified (that page would be protected by a login, so only certain users could modify).
Problem is I have no idea how to save the content of ckeditor in that same textarea that was modified, I tried looking around but everyone wanted to save data in a DB or send it to some other page.
I found 2 plugins that implement some save function but again, I don't know if I can use those to do what I want. (Save plugin, Inline save.
Hope you understood what I'm asking, thanks in advance.

Jquery ajax modal form post back to parent form

I have a query and don't know where to start - I have a image select input field on a form thats populated by an jquery ajax autocomplete. What I would like to do is the following:-
If a user wants to choose an alternative image that's not currently in the dB pop up a modal/lightbox form which contains the upload/editing form.
Once posted I want to pass this data back to the original form field and refresh the data for the autocomplete.
I already have the upload and editing forms working as standalone pages I just want to incorporate the output back into the original form.
Is it possible?
Can anyone suggest modal/lighbox script that can do this?
What data are you trying to retrieve in the parent window? Assuming your using an iframe in your lightbox? If you aren't then you should just be able to set variables and call functions from your upload script output as if it were the same page.
If you are...
I don't believe there are any lightbox/modal solutions that support this, I normally incorporate a script like below in my upload script so you can monitor the success/failure of the uploaded file and the data.
(function () {
parent.myClass.imageLocation = $output_your_image_location here;
return;
)();
You can obviously edit this to handle different situations but I always use the parent keyword as I have a similar way of handling uploads in some software I've built recently.

Categories