在jquery ui模式中加载ajax数据（提交后）

I would like to pass data from a input form to my codeigniter controller, then return a view via JSON that will then be opened in a jquery ui dialog modal...phew!

It isn't working though. On submit, it refreshes the page, and no alerts work either (if I put it at the beginning of the findcat() function).

Here is my Javascript function:

function findcat(){
    var valinput = $('#category_form').val();
    $.ajax({
        type: "POST",
        async: true,
        url: 'http://rickymason.net/omnia/ajax/findcategory',
        dataType: 'json', 
        data: { valinput: valinput },
        success: function(content){
            $('#category_modal').html(content['content']);
            $('#category_modal').dialog({
                autoOpen: false,
                title: 'Hello',
                modal: true,
                height: 350,
                resizable: false 
            });
        return false;
        }
    });  
}

And my HTML:

<div class="cus_input">
    <form id="category_form" onsubmit="return findcat();">
        <input type="text" id="category_input" name="category_input" placeholder=" Find Category"/>
        <input type="image" id="category_submit" src="<?php echo base_url() ?>img/board/icons/add.jpg" id="homeSubmit" value="X"/>
    </form>
</div>

my controller is just a mockup to try and send some sort of content back:

    public function findcategory()
    {
        $page['content'] = 'hello-testing';
        return json_encode($page);
    }

Assuming return false; is used to stop the form from submitting, its in the wrong place. It should be directly in findcat as you have it it is in the ajax success function.

function findcat(){
    var valinput = $('#category_form').val();
    $.ajax({
        type: "POST",
        async: true,
        url: 'http://rickymason.net/omnia/ajax/findcategory',
        dataType: 'json', 
        data: { valinput: valinput },
        success: function(content){
            $('#category_modal').html(content['content']);
            $('#category_modal').dialog({
                autoOpen: false,
                title: 'Hello',
                modal: true,
                height: 350,
                resizable: false 
            });
        }
    });  
    return false;
}

Your form is likely doing a POST which is causing the refresh.

Take

onclick="return findcat();

out of the form tag and just put it on an a tag.

<a href="#" onclick="return findcat();">Click</a>

what I am not understanding is that why you are not using submit button on your form, and the codeigniter controller should echo and not return. here's a solution for you, regardless to your form.

Jquery:

function findcat(){
    var valinput = $('#category_form').val();
    $.ajax({
        type: "POST",
        async: true,
        url: 'http://rickymason.net/omnia/ajax/findcategory', //you can use site_url here whic is better for you
        dataType: 'json', 
        data: { valinput: valinput },
        success: function(content){
            $('#category_modal').html(content.content);//not content['content'] 
            $('#category_modal').dialog({
                autoOpen: false,
                title: 'Hello',
                modal: true,
                height: 350,
                resizable: false 
            });
        }
    });  
    return false; //should be in your function scope and not the ajax scope
}

for your controller:

public function findcategory()
    {
        $page['content'] = 'hello-testing';
        echo json_encode($page); // echo and not return for codeigniter
    }

For anyone who happens upon this question..here is my solution in thanks to the above comments.

Regarding the page submission and reload.

Jquery's .live will take care of it. In your JS, simply add the following,

$('#category_form').live('submit', function(){

in front of your function. This will catch your submit, run the function, then reload the page. To prevent the reload, at the end of the function, add return false;

Regarding the Modal and AJAX problem...In my original code, didn't, "prep" the dialog.

I didn't realize it due to my novice programming ability, but you need to first set up your dialog div with the following code:

$('#category_modal').dialog({
    autoOpen: false,
    title: 'Hello',
    modal: true,
    height: 350,
    resizable: false
});

After that, use $("#category_modal").dialog("open"); to "activate" it following the ajax request.

$('#category_form').live('submit', function(){
    var valinput = $('#category_input').val();
    $.ajax({
        type: "POST",
        async: true,
        url: 'http://rickymason.net/omnia/ajax/findcategory',
        dataType: 'json', 
        data: { valinput: valinput },
        success: function(content){
            $('#category_modal').html(content['content']);
            $("#category_modal").dialog("open");
        }
    });  
    return false;
});

Hope this helps!