Author Topic: [SOLVED] Preview Button (Read 1636 times)

GuiltyGear · « **on:** September 02, 2007, 08:07:49 PM »

Im working on this custom cms where the site admin can edit articles in a wysiwyg editor. I had an idea to make a preview button which opens a new window with the real site template and preview the content of the editor (textarea) in the template. I am not figuring out how to make that button open the new page and get the value of the textarea in the same time. What i have so far is post the data after a button is pressed and check with isset($_POST['preview_btn']) if is pressed preview or submit, but i have no idea how to automatically open a new window after this. Any suggestion should be very helpful.

Timma · « **Reply #1 on:** September 02, 2007, 08:10:46 PM »

Well you could probably make each button open up a different page, for example, make it open blah.php?preview or blah.php?submit

GuiltyGear · « **Reply #2 on:** September 02, 2007, 08:14:22 PM »

The submit button sends post data which are then processed and make an update query. From what i can think now, the preview button must be in the same form as the submit one, or how could i get the post value of the textarea?

hostfreak · « **Reply #3 on:** September 02, 2007, 08:54:42 PM »

You could store the values in the $_SESSION superglobal array, then use javascript (window.open()) to load the preview page. Then being as the variables would be stored in the $_SESSION superglobal array, you could echo them for display etc.

GuiltyGear · « **Reply #4 on:** September 02, 2007, 09:10:01 PM »

Yes i can use window.open() in the button onClick, but how am i gonna pass the value of the textarea to the session if the form which contains it isnt submitted?

Timma · « **Reply #5 on:** September 02, 2007, 09:14:52 PM »

But that is exactly what you do, submit it.

GuiltyGear · « **Reply #6 on:** September 02, 2007, 09:18:47 PM »

Thats what ive done, submit the form. The problem is that how can i open a new window with code after i submit the form. Lets say:

Code: [Select]

if(isset($_POST['preview'])){
    $text = $_POST['textarea']; //load the text of the textarea
    //then...
}

teng84 · « **Reply #7 on:** September 02, 2007, 09:43:48 PM »

have you tried ajax? i guess it might help say on click pass the value of that text area hmm!!

Timma · « **Reply #8 on:** September 02, 2007, 09:53:40 PM »

In the same php file as the form, if it is php, make it post to itself and when it has got something, make it open the window.

GuiltyGear · « **Reply #9 on:** September 02, 2007, 10:02:44 PM »

@teng84 what do u mean? Even with ajax i may have the same problem

@timma thats how the script works, posts to itslef but as ive said it several time, what dont realize is how to open a new window after the form is submitted. If i use "onClick='window.open('somefile.php')" on the preview button, i wont have the post data of the textarea. Am i being clear, or u need any other info?

Timma · « **Reply #10 on:** September 02, 2007, 10:08:52 PM »

Oh, maybe something to do with body onLoad or just execute the function in a <script>

teng84 · « **Reply #11 on:** September 02, 2007, 10:19:07 PM »

Quote from: GuiltyGear on September 02, 2007, 10:02:44 PM

@teng84 what do u mean? Even with ajax i may have the same problem

@timma thats how the script works, posts to itslef but as ive said it several time, what dont realize is how to open a new window after the form is submitted. If i use "onClick='window.open('somefile.php')" on the preview button, i wont have the post data of the textarea. Am i being clear, or u need any other info?

ajax can do that i have done something like that when the user clicks the name the window appear containing the value for the text box no diff with text area

GuiltyGear · « **Reply #12 on:** September 02, 2007, 10:36:17 PM »

I was just thinking of a way in javascript and ended with:

Code: [Select]

onclick="alert(document.getElementById('textarea').value);"

but im getting the initial value of the textarea, not the changed text. I just know some simple basic stuff in javascript so if u can explain it well and possibly provide some code, it would be great.

EDIT: Probably i had to mention im using TinyMCE editor as my textareas.

Timma · « **Reply #13 on:** September 02, 2007, 10:43:45 PM »

Better idea! Why not, when you click the preview button, make it post back to the page it was on, and then make it set the value of that textarea to the one that was there previously.

GuiltyGear · « **Reply #14 on:** September 02, 2007, 10:46:58 PM »

Timma, it still doesnt resolve the problem. As u say it would act as a submit button who posts the form and still i cant make it load a new page in a new window ???

teng84 · « **Reply #15 on:** September 02, 2007, 10:55:53 PM »

Code: [Select]

<html>
<head>
<script type="text/javascript">
function alertValue()
  {
  alert(document.getElementById('txt1').value);
  }
</script>
</head>
<body>

<textarea id="txt1">

</textarea>
<br />
<input type="button" onclick="alertValue()" 
value="Alert value" />

</body>
</html>

that works with alert it will work in ajax for sure, i dont want to code that whole thing but with this you can have a great start

Timma · « **Reply #16 on:** September 02, 2007, 11:00:01 PM »

That still does not resolve his main problem, getting the information that a user typed into that box.

teng84 · « **Reply #17 on:** September 02, 2007, 11:05:51 PM »

Quote from: Timma on September 02, 2007, 11:00:01 PM

That still does not resolve his main problem, getting the information that a user typed into that box.

i dont know how and why GG want this but its doesnt look good to refresh the page to see the preview on the other window LOL

for sure that dont solved the prob but if GG know AJAX then prob is solve

GuiltyGear · « **Reply #18 on:** September 03, 2007, 10:12:36 AM »

As it is a cms, i want the client to preview the content of the article before submiting. Actually it isnt very important, but just a feature i wanted to add and a "challenge" for myself. But i thought it a lot more easy in the beginning. Im no ajax expert but i doubt it would resolve my problem

GuiltyGear · « **Reply #19 on:** September 03, 2007, 06:22:06 PM »

Bump.

teng84 · « **Reply #20 on:** September 03, 2007, 06:28:04 PM »

If you test my sample it shows an alert box displaying what yuo have type in your text area dude it no diff opening a new window to preview this may take a bit of work. see this sample sorry if i cant code this one for you but start here
http://www.w3schools.com/php/php_ajax_database.asp
I hope you know how to open a new window using JS so iguess you can do this one

teng84 · « **Reply #21 on:** September 03, 2007, 06:32:47 PM »

or you can try just what this forum does to preview your post.

GuiltyGear · « **Reply #22 on:** September 03, 2007, 06:45:15 PM »

I test the javascript thing to get the textarea value, but as i previously said it shows the original value, not the modified one. For opening a new window with JS i can use window.open() but thats not my problem. What would i need ajax? What i want is get the value of the textarea and open a new window.

In this forum, the preview area is on top of the editor. I can easily do that, but i want to open a new window as i cant preview a real site template inside a small area.

Anyway thanks for helping.

teng84 · « **Reply #23 on:** September 03, 2007, 07:18:30 PM »

Code: [Select]


<html>
<head>
<script type="text/javascript">
function alertValue()
  {
  //alert(document.getElementById('txt1').value);
  


myWindow=window.open('','','width=200,height=100')
myWindow.document.write(document.getElementById('txt1').value)
myWindow.focus()

  
  }
</script>
</head>
<body>

<textarea id="txt1">
Hello world....This is a text area
</textarea>
<br />
<input type="button" onClick="alertValue()" 
value="Alert value" />

</body>
</html>

OOOOOOKKKKKK hope this one help try

teng84 · « **Reply #24 on:** September 03, 2007, 07:19:52 PM »

oooppp this is no php !!!

GuiltyGear · « **Reply #25 on:** September 03, 2007, 07:27:48 PM »

Pretty good example, but still the problem with "document.getElementById('txt1').value" as it will return the original value of the textarea

teng84 · « **Reply #26 on:** September 03, 2007, 07:36:35 PM »

but you can remove those can you tell me what exactly you want?

GuiltyGear · « **Reply #27 on:** September 03, 2007, 07:46:58 PM »

I explained it several times but guess its a bit complicated :S. Think of the preview button here in phpfreaks, but it doesnt preview the text in the same page, but in a new window. The text to be previewed is in a textarea converted to a tinymce editor. The text value is filled with some data from the database (which actually are texts and formatting stuff for articles) and the user can make further editing to it. I want him to preview how the edited article will look on the site before actually submiting the changes. Does it make sense now?

teng84 · « **Reply #28 on:** September 03, 2007, 07:57:02 PM »

Look I cant give you the exact output you want but it acts just what you need whats the problem with that you just need to modify and add some stuff there to fit your needs.

you said you want a code that opens a new window for preview will it does?
if you think this sample cant help you as well as ajax then theres no other way, leave this task and sleep LOL

for sure you dont want the page to refresh just to have this new window!!!

SORRY thats all I can offer GUD LUCK

GuiltyGear · « **Reply #29 on:** September 03, 2007, 08:00:55 PM »

Yeah lol, probably im going for an impossible approach. Right now i made it that when preview is pressed the form posts and shows a message "the preview page is generated. click this link to view it" and opens up the window. Its the best thing i can have for now.

Thanx for the help anyone. Im marking this as solved, as im aware its something pretty difficult.

News:

Author Topic: [SOLVED] Preview Button (Read 1636 times)