Question

I’m having trouble getting ajax to work with jquery and codeigniter. I’ve followed multiple tutorials but nothing seems to work. I’m trying to implement an upvote button that sends post data using ajax to be inserted into a db. Any help is much appreciated.

The code from my view:

<pre>
<?php foreach($query->result() as $row): ?>
<div>
<form action="" method="post">
<input type="hidden" name="story_id" value=<?php echo $row->id; ?>>
<input type="submit" name="story_id" class="button" id="submit_btn" value=<?php echo      $row->id;?>>
</form>
</div>
<?php endforeach; ?>
</pre>

The jquery script I’m using:

<pre>
<script type="text/javascript">
$(document).ready(function(){
$(".button").click(function(){
    var form_data = {
        story_id: $(this).val()
    };
    $.ajax({
        url: "<?php echo base_url('cyoa/upvote'); ?>",
        type: 'POST',
        data: form_data,
        success: function() 
            {
            $("#upvote").hide();
            }
    });
    return false;
});
});

</script>
</pre>

Answer 1

Best way is to serialize your form data and send that to the server:

<script type="text/javascript">
$(document).ready(function(){
  $(".button").click(function(){
    var form_data = $("#myform").serialize();
    $.ajax({
        url: "<?php echo base_url('cyoa/upvote'); ?>",
        type: 'POST',
        data: form_data,
        success: function() 
            {
            $("#upvote").hide();
            }
    });
    return false;
  });
});

</script>

To access the form, give it a id:

<form id="myform" action="" method="post">