CODEWITHSUNDEEP
jqueryajaxcodeigniterviewcontroller
Stacy J
Stacy J

Reputation: 2781

codeigniter controller not running while using ajax

This question is also related to my earlier post

jquery ajax form submit not working with codeigniter but working otherwise

I want to submit a form without loading a new php page. I am using codeigniter. When I run the controller with predefined values it works fine and is inserting the values in the database. But when I run ajax, my controller is not running or is not being called. This is my code :- 

<script language='JavaScript' type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script>
    $('#submit_article').click(function(){

        var article_title = document.getElementById("title").value;
        var article_body = document.getElementById("body").value;

        $.ajax({
            url: '<?php echo base_url()."/main/submit_article";?>',
            type: 'POST',
            dataType: 'json',
            data: 'title='+article_title + '&body='+article_body,
            success: function(output_string){
                $('#result_table').append(output_string);
            }
        });
    });
</script>

<form name="article_form" method="POST" action="">
<input type="text" name="title" id="title" placeholder="Title for your article" />
<br>
<textarea rows="12" name="body" id="body" placeholder="Tell your story"></textarea>
<br>
<input type="submit" name="submit_article" id="submit_article" value="Post" />
</form>

Upvotes: 0

Views: 346

Answers (2)

Code Prank
Code Prank

Reputation: 4250

Try this:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script type="text/javascript">
    $('#submit_article').click(function(e){
       e.prevenDefault();
       $.post(
         '<?php echo site_url("main/submit_article");?>',
         $('#article_form').serialize()
       ).success(function(resp) {
          $('#result_table').append(output_string);
       });
    });
</script>

<form id="article_form" method="post" action="<?php echo site_url('main/submit_article');?>">
    <input type="text" name="title" id="title" placeholder="Title for your article" />
    <br>
    <textarea rows="12" name="body" id="body" placeholder="Tell your story"></textarea>
    <br>
    <input type="submit" id="submit_article" value="Post" />
</form>

Upvotes: 1

Muhammad Raheel
Muhammad Raheel

Reputation: 19882

Try code like this. Change submit to button

<script language='JavaScript' type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js'></script>
<script>
    $('#submit_article').click(function(){
       $.ajax({
            url: $('#article_form').attr('url'),
            type: 'POST',
            dataType: 'json',
            data: $('#article_form').serialize(),
            success: function(output_string){
                $('#result_table').append(output_string);
            }
        });
    });
</script>

<form name="article_form" method="POST" action="<?php echo site_url('main/submit_article');?>">
    <input type="text" name="title" id="title" placeholder="Title for your article" />
    <br>
    <textarea rows="12" name="body" id="body" placeholder="Tell your story"></textarea>
    <br>
    <input type="button" id="submit_article" value="Post" />
</form>

Upvotes: 1

Related Questions