Member Avatar for whiteyoh

Hi All,

Im busy working on a practice area for a CMS. I have it set so on a click, the edits are saved to mysql, but what im really after is a pop up window to show how it will look.

ive tried java script, but the likes of "onload" are no good to me (i dont think).

I know im after something client side, but it needs to go in the php "else" statement.

Somewhere in here (The onload is where the code would need to go).

please can somebody help? Thanks in advance

if (mysql_query($sql)) {
    echo '<p>Author details updated.</p>';
	header("location: index.php");

	echo '<onLoad="popup()" onunLoad="popup()"></body>';

	
  } else {
    echo '<p>Error updating author details: ' .
        mysql_error() . '</p>';
  • 2 Contributors
  • 5 Replies
  • 174 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by whiteyoh
Member Avatar for Airshow

Whitey,

This is very confused! From the user perspective, what are you trying to achieve?

Airshow

Member Avatar for whiteyoh

Hi Airshow,

Hope this clears things up.

Im making a cms site, and this script is for a sandbox practice area.

1. The user makes their edits in the textareas (title, subtitle, content, author and date) This works
2. They click submit and the data is saved to mysql. this works
3. After clicking submit and point 2 is completed, a window pops up showing how their edits will look.

This is literally so staff can play around with their formatting (I know theres something called a wysiwyg but im not that skilled yet).

Member Avatar for whiteyoh

Hi,

I think I have sorted it.

All i needed to do was to make the same as I have used for the live cms, but to just not call upon that row anywhere other than in the sandbox area.

I just stuck with the header redirect when the submit button is clicked.

Think i was over complicating things a little

Member Avatar for Airshow

Whitey,

Well done .... but you might like to consider the following:

As a matter of design as opposed to coding, I would change things a little (probably less than you might think), thus avoiding the need for a popup window, which I feel could be somewhat user-unfriendly:

  • Use a frameset with Controls, Edit and Preview frames. Framesets are out of fashion but I think this would be a good use of one.
  • In the Control frame, have "Edit" and "Preview" buttons and possibly a "Save" button
  • The "Edit" and "Preview" buttons should dynamically resize the Edit and Preview frames such that one or other show and the other is minimised. In addition the "Edit" button should cause "Preview" to be refreshed.

The reason I say possibly include a "Save" button is that it should not be necessary (a) in a sandbox environment and (b) to achieve preview.

Now, what to put in the Edit and Preview frames. You will need two pages, yourPath/edit.php and yourPath/preview.php. These, I expect, will be much as you have already written but now without the need to open a popup window onload.

Communication between the frames will be (I assume) via form submission from the Edit page to the server, and thence directly into the Preview page. This is very easy to achieve by setting form attribute target="preview" (where "preview" is the name of the Preview frame).

Much of this will be a fairly simple refactoring of the code you have already written. The only bit you might find tricky is getting the control buttons to work given that they will act on objects in other frames. This is actually quite trivial.

Here's the frameset:

<frameset rows="30,*,0">
  <frame name="controls" src="controls.html">
  <frame name="edit" src="edit.php">
  <frame name="preview" src="">
</frameset>

Here's the code for the controls:

function editMode(){
	parent.document.body.rows = "30,*,0";//Hide preview; show edit.
}
function previewMode(){
	parent.edit.document.forms['myForm'].submit();//Submits the edit frame's form, thus causing the preview frame to be refreshed
	parent.document.body.rows = "30,0,*";//Hide edit; show preview.
}
function save(){
	parent.edit.save();//calls a save() function in the edit frame.
}

And here's the HTML for the controls:

<body>
<button onclick="editMode();">Edit Mode</button>&nbsp;
<button onclick="previewMode();">Preview Mode</button>&nbsp;
<button onclick="save();">Save</button>&nbsp;
</body>

Airshow

Member Avatar for whiteyoh

Airshow,

thanks very much for the information. Im going to have a play around with it later today.

I think i have something very similar to your description, but mine is a little more archaic. When the admin logs in, they select the page they wish to edit. They are presented with an idential screen to their selection, but each section has an edit button.
after editing and submitting, they are taken back to that page, with the edits in place.

I wanted to add the sandpit so people can get used to the editing techniques as all changes are live.

I think my next cms which i start in september will certainly contain your suggestions.

thanks again, hopefully i can start giving solutions.

Regards

Paul

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.