A little AJAX Handholding with SQL

[TobyRT]

Hi all,

I've got a CMS which currently works quite nicely - but it's ugly and not hugely user friendly - a lot of additional clicking.

I've redesigned it so it's looking much nicer, but I kind of want to avoid having to reload the entire page each time.

Cue: AJAX. I've got the basic AJAX functionality running so that index.php has a link which calls edition_detail.php and places the contents thereof in the div called #content. So far, so good.

What I'm struggling with is the button functionality!

edition_detail.php is essentially a 3 phase page.
1) If you're going to it raw, show a disabled form, displaying all the detail.
2) If a button is clicked (name is 'Edit') it displays the same form, but with the fields editable; and of course there will be a 'Submit' button which takes me on nicely to phase...
3) which is if the form is submitted, it updates the database and displays the data as per phase 1.

Where I'm at:
Displaying the initial form fine.
On clicking 'edit', if I add an onclick httprequest, I can display the 'edit' mode IF I store it in a second php file (say, 'edition_detail_edit.php'. What I can't seem to do is successfully post form data or actions.

From what I've read, I need to use something like jQuery to update the data, but what I can't fathom is how to pass the initial 'edit mode' statement within the 'content' div.

Is it even possible to do what I'm trying to do? Most tutorials I've seen seem to keep referring to a separate file.

I'm rather new to AJAX and very new to jQuery, so if someone could help me through this I'd be terribly grateful! I've been reading and playing with the concepts all day, but the logic of how it works just isn't really kicking in!

Cheers in advance,

Toby

[ixalmida]

It sounds to me you're just toggling form field properties. I don't see a need to redisplay or post the form until the user is done editing. Just start with field locked or disabled. Edit simply enables all the fields. User makes their changes then "locks" the form again. It isn't until the user is done that you have to save what's on the form. That's one page load in my book.

Option 2)
If you're looking to make "live" changes in the edit mode, simply use a mouse event to update each field as you go. For example:

<script>
function updateField(fieldName, fieldValue, recordID)
{
  url = "update_fld.php?rid=" + recordID + "&fname=" + fieldName + "&fvalue=" + encodeURI(fieldValue);
  ajaxObj.open('get', url, true);
  ajaxObj.send(null);
}
</script>

<input type="text" name="field1" onblur="updateField(this.name, this.value, <?php echo $recordID ?>)" />

(Note that we don't need the response text here from Ajax unless we're troubleshooting, so I've left off the onreadystatechange function.)

update_fld.php script...

$recordID = $_GET['rid'];
$fieldName = $_GET['fname'];
$fieldValue = mysql_real_escape_string(strip_tags(urldecode($_GET['fvalue'])));
mysql_query("UPDATE myTable SET $fieldName = '$fieldValue' WHERE recordID = $recordID");

Of course, this code is incomplete and needs better validation and such.

Option 3)
If you've got your form nestled within a complex page that you don't want to repost when you save your form data, you might want to look into putting the form in an IFRAME and have the form target the IFRAME when you submit it.

There's probably other ways to do things as well, so take my suggestions with a grain of salt.

[TobyRT]

Thanks Ixalmida.

I'm afraid I'm quite new to the ajax (and javascript) side of things - hence the 'hand-holding' part of the subject!

I can't use the onBlur method as I'm already using that for a form validation script (spry framework), although I think for some pages, applying that script to a button beside each field could work. With your method, I'm guessing 'this.name' automatically picks up the name of the form element (such as 'title')m yes?

Ideally, however, I'd like to keep the form loosely in it's current format. The page is to be used by editors who are likely to change their minds a lot - modus operandi sort of dictates that it should be a 'edit all then save' methodology rather than piecemeal. I still kind of need to be able to make the 'edit' function work too for layout purposes, or is there a way I can make this button make all 'disabled' text fields, areas, selects and radios suddenly become 'enabled' using javascript?

I've considered an iframe type solution, but I kind of want to know if it can be done in ajax (the principle of the thing to an extent). Is ajax the way forward with this, or am I just making work for myself?

With the file 'edition_detail.php' I currently have an if() else() scenario based around the 'submit' button, but when I POST details, it doesn't seem to get picked up when the form action is $_SERVER['PHP_SELF']. or 'edition_detail.php'

[ixalmida]

I'm not sure why you can't use the same onblur event to trigger two functions, but be that as it may...

The Javascript to enable all form fields is pretty simple:

function enableAll()
{
  var myForm = document.form1;
  for(var i = 0; var < myForm.elements.length; i++)
  {
    myForm.elements[i].disabled = false;
  }
}

To disable again, just change false to true.

Alternately, you could use the "readOnly" property if you want to lock out user input but don't want the fields to be grayed out. The same true/false values apply.

Note: you can be more selective about which fields you are locking by checking the element's type or some other property:

if(myForm.elements[i].type == "checkbox")
  myForm.elements[i].readOnly = false;

About Ajax...

I'm turning to Ajax for more and more tasks as I get comfortable with it, and I'm sure you would too. It really isn't that complicated and it adds interactivity and efficiency to your application. You just need to understand how to order the statements (some online tutorials are notoriously WRONG about the order of statements and why they need to be in that order).

Remember these general steps when using Ajax:
1) Create the ajax object with ActiveXObject or XMLHttpRequest (browser dependent)
2) Configure the ajax object (i.e. - ajaxObject.open('get', someURL, true) )
3) Configure any required headers with setRequestHeader (not always necessary)
4) Define an onreadystatechange function (if screen output is required)
5) Use send() to run the Ajax script

Note that the LAST step is to run the actual script - the rest is all setup.

[TobyRT]

Cheers - it's this 'getting comfortable' thing I'm struggling with - mainly I think because I don't really speak javascript. Can you recommend a good place to get to grips with point 2? It's all these objects that are baffling me, and when (and how) to use them!

I'll have a play with the enable/disable javascript thing as I think that sorts out the first part of my problem.

I suppose in essence what I'm after is the functionality of an iframe but without using one, using a DIV instead. My main issue seems to be passing the variables to the file, but I think your script above might help me do that - it's just going to require more re-coding than I expected.

[ixalmida]

Ajax plus a div or Javascript plus iFrame has some similarities, but I find Ajax to be a little more compact overall. Filling a div with Ajax isn't hard at all.

Here's a complete, workable Ajax implementation:

<script language="javascript">
  // Initialize Ajax object variable...
  var ajaxObj = null;

  // Function to create the Ajax object...
  function getObj() {
    if (window.ActiveXObject)
       return new ActiveXObject('Microsoft.XMLHTTP');
    else if (window.XMLHttpRequest)
      return new XMLHttpRequest();
    else {
      alert('Your browser does not support AJAX.');
      return null;
      }
    }

  // Function to fill the div using Ajax...
  function fillDiv() {
    // Get the Ajax object...
    ajaxObj = getObj();
    // URL to the page we want in the div...
    url = "someScript.php";
    // Open the Ajax connection...
    ajaxObj.open('get', url, true);
    // Define function to handle the output...
    ajaxObj.onreadystatechange = function () {
        if(ajaxObj.readyState == 4 || ajaxObj.readyState == 'complete') {
          document.getElementById('emptyDiv').innerHTML = ajaxObj.responseText;
        }
      }
    // Run the Ajax script...
    ajaxObj.send(null);
    }
</script>

<div id="emptyDiv"></div>
<input type="button" value="Click Me" onclick="fillDiv()" />

The "filler" page, someScript.php:

<p>This paragraph will display in the emptyDiv div.</p>

<?php
echo "<p>So will this paragraph.</p>";
?>