1

Is this the correct way to call my javascript function with jquery? I have spent the last 5 hours trying to figure out why this won't work.

<form class="rpt" id="rpt" action="">

$(function() {
  $("#rpt").submit(doSave);
});
</script>

Here is the small snippet of code in the javascript wysiwyg editor. I'm still using the exact same form tag in my html.

        // Save
        case "Save":
            WYSIWYG.updateTextArea(n);
            var form = WYSIWYG_Core.findParentNode("FORM", this.getEditor(n));
            if(form == null) {
                alert("Can not submit the content, because no form element found.");
                return;
            }
            form.submit();
        break;
0

4 Answers 4

2

There are two variants of the submit function. If you call $('#rpt').submit(); you are firing the "submit" event of the form. If you call $('#rpt').submit(myFunctionName); You are binding myFunctionName to the "submit" event of the form. This will not be fired when the page loads, but only when you try to submit the form. As such, this code:

<form id="rpt" method="GET" action="http://www.google.com/search">
Search: <input type="text" name="q"> <input type="submit" value="Go">
</form>

And this Javascript:

function myFunctionName() {
   alert('The form is being submitted!');
   return false; // cancel the event (ie, the form will not be sent)
}
$(function() {
    $('#rpt').submit(myFunctionName);
});

Will call the myFunctionName function only when the form is submitted (either by manually pressing the "Go" button or by pressing enter when the text field is focused). Here is a sample of it at work. If you want to run a particular function when the page loads, all you have to do is pass something to the $(document).ready(); function, or $() for short:

function onLoadDoThis() {
    alert('Page is loaded!');
}
$(document).ready(onLoadDoThis); // $(onLoadDoThis); is the same thing

And here is an example of this. Hope this cleared some stuff up...

EDIT

Ok, so I whipped up a working example of what you are trying to do. At first I was annoyed you couldn't get this to work, but there were actually quite a number of limitations you have to work around because of how crappy this editor is. Anyways, onto the explanation:

The first problem is that the library overrides the use of $ to its own little function. So the jQuery awesomeness is not possible the regular way. Thankfully, jQuery is awesome and you can get around that by doing something like this:

$j = jQuery.noConflict();

Now instead of doing $(...); you have to do $j(...);. If you are not aware of this it is likely you were trying to write jQuery code and nothing was happening.

The next hurdle you were probably having is that for most events, when you do something like $(selector).myevent(aFunction); it is assumed that doing $(selector).myevent(); will fire said event. However, this is not true of the submit event. Unless the form action is triggered by a user the code you bind to the submit of a form won't be called when the form is submitted by code. So even though the line in the source code of the editor that does form.submit(); is simply firing the native submit event of the form, even if you bind an event to this event with Javascript it won't be called in this circumstance because the user didn't trigger the submit event, code did.

Due to this limitation, it gets increasingly tricky to achieve what you want without editing the source code of the editor. You see, the editor attaches its "create all the dashboard crap" stuff to the window's load event. This event fires after jQuery's DOM ready event, as the whole point of jQuery's ready is to fire as soon as possible and not a second later, while window.load takes its sweet time. So what we have to do is ditch the jQuery bind code (grimace) and use the editor's own binding code to attach an event directly afterwards its own "create the dashboard" function. At this point, the dashboard has already been created so we can access the Save button and make it do what we want - only after removing its original event of calling the 'Save' function you found in the source code.

At the end of the day, the code ends up looking like this:

$j = jQuery.noConflict(); // give up ownership of $ to WYSIWYG

WYSIWYG.attach('textarea1', full); // first attach the event to create this widget

WYSIWYG_Core.addEvent(window, "load", function() {
    // and now override the Save button
    // the removeAttr('onclick') is crucial to stop it
    // from doing what it normally does (Which is submit the form)
    $j('#Save').removeAttr('onclick').click(function() {
        var form = $j('#myform');
        var data = form.serialize();
        var type = form.attr('method');
        var url = form.attr('action');
        $j.ajax({
            url: url,
            type: type,
            data: data,
            dataType: 'json',
            success: function(d) {
                if(d.success == 1) {
                    $j('#notice').html('Everything went alright! High fives.');
                } else {
                    $j('#notice').html('Something went wrong. Eep.');
                }
            }
        });        
    });
});

While my_handler.php is a very simple script that just returns a json string:

<?php
// process your stuff here, set success as 1 or 0
$success = 1;
print json_encode(array('success' => $success));
?>

And here is an example of it in action.

Personally, I really don't like this particular editor and I would suggest you check out something else.

Either way, though, I hope this helped.

Sign up to request clarification or add additional context in comments.

16 Comments

I'm curious. Why does your post begin with "Hey, Frank"?
Hey Paolo... Thank GOD you showed up. lol.. This thing is making me crazy! Something sooo simple and I have spent half of my Sunday trying to get it working and it STILL isn't. Anyhow.. Thanks so much for the help. Let me ask you.. I have a wysiwyg editor that uses form.submit(). This is tied to a little icon on the editor. After reading what you posted (and thank you for the link btw) which one do I need?
@nutjob: What does the editor do on form.submit and what do you want to do on submit?
Ok, I think the form.submit simply fires whatever action="" is is the form tag. At least that's how it was working before. What I'd like is to have is your code simply echo back to the user whether the submission was successful or not, like on the other forms that you helped me with. This one is just different because of the javascript submit.form(). I don't know how to get it to work. If it were a regular input button, no sweat.
Maybe you need to piece together an actual example of what you're trying to do. A WYSIWYG editor should not really be messing around with the form's submit event - all it does is presentational - are you assuming that something happens on the submit event? When you say "all it does is fire whatever is action" that is what the browser is doing by default, so you can just bind an event to the form's submit event and do your processing there...
|
1

Since "rpt" is the name of the class and the name of the form, you could use "." or "#" and it will work assuming "doSave" is the name of a function to be used as a callback. So, it can be called like this:

$(".rpt").submit(doSave);
function doSave(){
  //do something
}

or you can have the function itself can be the parameter:

$(".rpt").submit(function(){
  //do something here
});

EDIT: If you don't want the form to postback. Add a "return false;".

$("#rpt").submit(doSave);
function doSave(){
  //do something
  alert("form submit fired");
  return false;
}

4 Comments

Hi Jose, thanks again for the help. This is really strange because I have taken your code and instead of relying on the inline js tag where I have the doSave function, I have placed the doSave function directly into the html between the script tags and I STILL can't get the alert to fire. Here is what I am using. $(".rpt").submit(doSave); function doSave(){ alert(); }
@nutjob - the alert() needs to have something or it will not fire. Ex: alert("some message");
Thanks Jose. I have tried it every which way. I just tried it now with alert('dfadfdadf'); and still nothing at all. :/ Thanks for the hand Jose.
Thanks for the edit Jose. You won't believe this but it doesn't work. I still get the same exact white screen after I submit the form. No alert at all. This is really weird. I also checked that the id name "rpt" wasn't being used elsewhere and it isn't, only in the form tag.
0

It's even simpler than that:

$("#rpt").submit(doSave);

If that doesn't work, it's because you work with a JQuery set, even though you are interested in submitting the form element. If so, try convincing JQuery that it's only a single element:

$("#rpt").eq(0).submit(doSave);

2 Comments

Hey machine, thanks for the help. I just tried both pieces of code but instead of showing me the alert inside that function, I am being directed to a blank white page. I don't understand this.. I'm about half nuts over this. :)
Hi machine. I actually put the function inside of html between acript tages and still can't get this thing to fire. $(".rpt").submit(doSave); function doSave(){ alert(); }
0

It's possible that the doSave function must be defined earlier in source than the code binding it to the submit event...

This code does NOT work

// doSave is undefined at this point
$("#rpt").submit(doSave);

// Now we've defined doSave, but it's too late.
function doSave(){
  //do something
  alert("form submit fired");
  return false;
}

I believe this code ought to work:

$("#rpt").submit( function (){
    alert("submitted");
    return false;    
});

Or if you must define doSave separately, try this:

// First define doSave
function doSave(){
  //do something
  alert("form submit fired");
  return false;
}

// Then bind it
$("#rpt").submit(doSave);

3 Comments

jsbin.com/isoya defines the function after it binds it and it works fine for me on FF at least
Well, I am grasping at ANYTHING and I tried all three pieces of code above and still nothing. I'm making the assumption that $("#rpt").submit(doSave); should bind the id rpt and call the function. right?
Shrugs I gave it a shot. My new opinion is that we need to see more code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.