Save data via ajax

[ckoehler]

Hello,

I have run into a problem with the editor. I am trying to save the text via ajax without reloading the page, so I have a onclick event on the submit button. Unfortunately the text isn't there when I hit that button, and wym.update() refreshes the page because wym cannot be found. I tried using the tip from another thread with var wym=aWYM_INSTANCES[0];, but that didn't work either.
Adding the class wymupdate to the submit button isn't an option since that requires reloading the page; all it does is call wym.update() anyway.

Any ideas?
Thanks!

Christoph

[misterm]

Just from the top of my head, the update() is simply a function, the submit will then be submitted by javascript. I'm almost certain you can rewrite it to do an XHR-call. Just dive into the main wym-editor.js

I think..

[jfh]

Hi Christoph, I think you need to use the postInit option.

Try something like this:

Code: Select all

postInit: function(wym) {

  $j('input.your-button-class').click( function() {
    wym.update(); //clean up the HTML and update the textarea value
    //do your AJAX call here
    return false; //disable the default behaviour
  });

}


You can also use another element (like an image) and bind the event handler on it, so the form doesn't get sent.

[ckoehler]

Thanks for the info! I haven't got a chance to play with that yet but will do so soon.

Christoph

[ckoehler]

Works flawlessly, thank you!

[jfh]

Cool!

It'd be nice if you could post a code example with the AJAX call, so other users can learn how it works.
Thanks!

[ckoehler]

And here it is!

Code: Select all

$(document).ready(function() {
     $.ajaxSetup( {
      url: "myurl.php",
      type: "POST"
   });
   
   $(".wymeditor").wymeditor({
   
      // fill text from the content div into the editor
      html: $("#userresume").html(),
      postInit: function(wym) {
        $j("#submit").click( function() {
         
          wym.update(); //clean up the HTML and update the textarea value

         // get text from the text area
         var text = $("#text").val();
         
         // make ajax call to server
         var html = $.ajax({
            data: "cmd=settextt&text="+text,
            success: function(msg) {
            
               // replace text from content div with updated text
               $("#userresume").html(text);
               
            },
         });

          return false; //disable the default behaviour
        });

      }
   });
});