Jquery ajax post, get, etc, all doesn't work?

Question

Javascript:

function openEditor(){
    $("#editor").show().animate({width: 965, height: 380}, 1500);
    $("#editor textarea").show();
}

function closeEditor(){
    $("#editor").animate({width: 985, height: 1}, 1500, function(){
        $("#editor").hide();
        $("#editor textarea").hide();
    });
}

function setedit(){
    $.ajax({
        type: "POST",
        url: "engine.php",
        data: "title="+ $('title').val() +"&text="+ $('text').val(),
        success: function(msg){
            alert("Saved.");
            closeEditor();
            search();
        }
        beforeSend: function(){
            $('#mainField').html('<img src="data/images/loader.gif" alt="Loading...">');
        }
    });
}

function search(){
    $.get('engine.php?search='+ $('#search').val() , function(data) {
        $('#mainField').html(data);
    });
}

HTML:

<div id="wrapper">
  <div id="header">

    <span class="h1">Title</span>

    <div id="header-right">
        <form id="search" onsubmit="search(); return false;">
            <input type="text" name="search" value="Search for article name..." onfocus="if(this.value=='Search for article name...'){this.value=''};" onblur="if(this.value==''){this.value='Search for article name...'};" /> <img src="data/images/find.png" alt="search" onclick="document.forms['editorform'].submit();">
        </form>
    </div>
  </div>

  <div id="main">
    <div class="toolbox">
        <span class="tool"><a href="javascript:;" onclick="openEditor(); return false;"><img src="data/images/edit.png" alt="edit"></a></span>
    </div>
    <div id="mainField">
        lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor lorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolor
    </div>

    <div id="editor">
        <form action="engine.php" method="post" id="editorform" onsubmit="setedit(); return false;">
            <span class="edit">Edit</span>
            <div class="toolbox">
                <span class="tool"><a href="javascript:;" onclick="document.forms['editorform'].submit();"><img src="data/images/save.png" alt="save"></a></span>
                <span class="tool"><a href="javascript:;" onclick="closeEditor(); return false;"><img src="data/images/stop.png" alt="stop"></a></span>
            </div>
            <textarea name="text">lorem ipsum dolor lorem ipsum dolorlorem ipsum dolor lorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolorlorem ipsum dolor</textarea>
            <input type="hidden" name="title" value="home">
        </form>
    </div>
  </div>
</div>

CSS:

#editor {
    display: none;
    background: #F0F0F0;
}

span.edit {
    font-size: 25px;
}

#editor textarea {
    width: 950px;
    height: 250px;
    display: none;
}

.toolbox {
    float: right;
}

Hello again stackoverflow!

I want to make a search through articles with ajax, and get the content of those articles in a field. Also I want to make those articles editable... but the whole thing isn't working?!?!!!

The function to open the editor doesn't work... When I want to search and I press the search button, I go to engine.php... And I can't try the editing because I can't open the editing box...

What is wrong? Why isn't it working?

Here a fiddle: http://jsfiddle.net/rg7Sx/

Greetings

Answer 1

your submit function does not return true or false, so it will be submitted anyway. your action is engine.php.

return false to stay on the site.

function setedit(){
   ...
   return false;
}

i have to add, that you are mixing forms and ajax, which is not good.

better bind click events which trigger function, than using inline eventhandlers, as well.