Comment system with jQuery and problem it!!!

[eluser]SaSa[/eluser]
Hello
I want creation a comment system with jQuery but i do not know why not working.
I did a lot search but did not succeed to fix it.
(Get value form and print(echo) to page, without refresh page, with jQuery (live-online))
I show codes for you, what is your suggestion to fix this problem?

jQuery:

Code:

$(document).ready(function(){
///insert comment to databese///////////////////////
    $(".submit").click(function(){    
        var entry_id = $("#entry_id").val();
        var comment_body = $("#comment_body").val();
        var comment_name = $("#comment_name").val();
        var comment_email = $("#comment_email").val();
        var comment_url = $("#comment_url").val();
        var dataString = 'entry_id=' + entry_id + '&comment;_body=' + comment_body + '&comment;_name=' + comment_name + '&comment;_email=' + comment_email + '&comment;_url=' + comment_url;
        
        if (comment_body == '' || comment_name == '' || comment_email == '' || comment_url == '') {
            alert('Please Give Valide Details');
        }
        else {
            $("#flash").show();
            $("#flash").fadeIn(400).html('<span class="loading">Please wait ...</span>');
            $.ajax({
                type: "POST",
                url: "/zig-co/blog/comment_insert",
                data: dataString,
                cache: false,
                success: function(html){                                    
                    if(data.entry_id){
                $("#message_ajax").html("<div class='errorMessage'>Sorry " + data.entry_id + ", Sorry" + data.comment_name + ", Sorry" + data.comment_email + ", Sorry" + data.comment_body + ", Sorry" + data.comment_date + "</div>");
            } else {
                $("#message_ajax").html("<div class='successMessage'>ok" + data.entry_id + ", ok" + data.comment_name + ", ok" + data.comment_email + ", ok" + data.comment_body + ", ok" + data.comment_date + "</div>");
            }
                }
            });
        }
        return false;
    });
    
});

html:

Code:

<div id="update" class="timeline"></div>
                <div id="flash" align="center"></div>
                
                <div id="message_ajax"></div>
                
                &lt;form action="" method="post" accept-charset="utf-8"&gt;                
                &lt;input type="hidden" name="entry_id" id="entry_id" value="&lt;?=$entry_id?&gt;" /&gt;
                <p>&lt;textarea name="comment_body" id="comment_body" rows="10" title="text"&gt;&lt;/textarea></p>
                <p>&lt;input type="text" name="comment_name" id="comment_name" title="name"&gt;
                &lt;input type="text" name="comment_email" id="comment_email" title="email"&gt;
                &lt;input type="text" name="comment_url" id="comment_url" title="url"&gt;
                &lt;input type="submit" class="submit" value="Submit" ?&gt;&lt;/p>
                
                &lt;/form&gt;

Controller:

Code:

function comment_insert()
    {
    $this->blog_model->comment_insert();
    
    $today = jgmdate("j F Y");
        $return_arr = array (
            'entry_id' => $this->input->post('entry_id', TRUE),
            'comment_name' => strtolower($this->input->post('comment_name', TRUE)),
            'comment_email' => $this->input->post('comment_email', TRUE),
            'comment_body' => $this->input->post('comment_body', TRUE),
            'comment_date' => $today ,
        );
    echo json_encode($return_arr);
    }

Model:

Code:

function comment_insert()
    {
        $today = jgmdate("j F Y");
        $data = array (
            'entry_id' => $this->input->post('entry_id', TRUE),
            'comment_name' => strtolower($this->input->post('comment_name', TRUE)),
            'comment_email' => $this->input->post('comment_email', TRUE),
            'comment_body' => $this->input->post('comment_body', TRUE),
            'comment_date' => $today ,
        );
        return $this->db->insert('comment', $data);
    }

[eluser]Zero-10[/eluser]
Maybe it's in html where it says "form action". Try deleting it and replacing it with:

Code:

<?=form_open('link/to_controller/comment_insert');?>

You also have a '?' at the end of your submit button, I've never seen that before?

I don't have too much experience but that's my suggestion. Hope this works

[eluser]marjune[/eluser]
just try to alert the data after submitting it and see if you've got all you want?

[eluser]dUspan[/eluser]
yes.try first to click alert the value of the input's.
that's my method on debugging jquery.

i always first check if jquery is working second check if it gets the value and last check if it post to your php.

[eluser]Pedro Luz[/eluser]
if you are using jquery to make the ajax call you dont even need <form bla bla>
you just need the inputs and a button

and make sure you use e.preventDefault() to avoid suff from the submit button.
and next do your ajax call.

Code:

$(".submit").click(function(e){
e.preventDefault();

[eluser]CodeIgniteMe[/eluser]
[quote author="sara" date="1309255644"]Hello
I want creation a comment system with jQuery but i do not know why not working.
I did a lot search but did not succeed to fix it.
(Get value form and print(echo) to page, without refresh page, with jQuery (live-online))
I show codes for you, what is your suggestion to fix this problem?

jQuery:

Code:

$(document).ready(function(){
///insert comment to databese///////////////////////
    $(".submit").click(function(){    
        var entry_id = $("#entry_id").val();
        var comment_body = $("#comment_body").val();
        var comment_name = $("#comment_name").val();
        var comment_email = $("#comment_email").val();
        var comment_url = $("#comment_url").val();
        var dataString = 'entry_id=' + entry_id + '&comment;_body=' + comment_body + '&comment;_name=' + comment_name + '&comment;_email=' + comment_email + '&comment;_url=' + comment_url;
        
        if (comment_body == '' || comment_name == '' || comment_email == '' || comment_url == '') {
            alert('Please Give Valide Details');
        }
        else {
            $("#flash").show();
            $("#flash").fadeIn(400).html('<span class="loading">Please wait ...</span>');
            $.ajax({
                type: "POST",
                url: "/zig-co/blog/comment_insert",
                data: dataString,
                cache: false,
                success: function(html){                                    
                    if(data.entry_id){
                $("#message_ajax").html("<div class='errorMessage'>Sorry " + data.entry_id + ", Sorry" + data.comment_name + ", Sorry" + data.comment_email + ", Sorry" + data.comment_body + ", Sorry" + data.comment_date + "</div>");
            } else {
                $("#message_ajax").html("<div class='successMessage'>ok" + data.entry_id + ", ok" + data.comment_name + ", ok" + data.comment_email + ", ok" + data.comment_body + ", ok" + data.comment_date + "</div>");
            }
                }
            });
        }
        return false;
    });
    
});

[/quote]

Notice your ajax url value, "/zig-co/blog/comment_insert". If your url is example.com/index.php/blog/view, then the ajax would generate "example.com/index.php/blog/view/zig-co/blog/comment_insert" call to your CI Application (which isn't what it should be. I recommend you declare a global javascript variable that contains the "site_url()" of the CI Installation before your javascripts. e.g.:

Code:

<?php
echo '[removed]';
echo 'var ROOT = "' . site_url() . '"'; // would produce example.com/index.php
echo '[removed]';
?>

and then use it to your ajax calls.

Code:

$.ajax({
url : ROOT+"/zig-co/blog/comment_insert" // would produce example.com/index.php/zig-co/blog/comment_insert
})

and I also recommend using Firefox with Firebug Add-on (has the best tools for debugging ajax/javascript codes at run-time)

[eluser]titandj[/eluser]
Hi!


You have some inconsistencies in your code...

In Jquery:

Although it can be omitted, and the ajax function should detect the type of data returned, is good practice to declare the type of data expected in response:

Code:

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  success: success,
  dataType: 'json'   // <----you omit this statement
});

In Controller:

do not understand you want to do with this function into the controller, I guess it is a debug of the data received...

In Model:

You should not perform an insert, without validating the data from the client, either because they may have brought a wrong or no data.

I recommend that collect and validate data in the controller

If you see your role in codeigniter is working properly, set default data and calls the same as any other page in the browser:

CONTROLLER EXAMPLE:

Code:

function comment_insert()
    {
    $arr_data = array();
    $arr_data['entry_id'] = $this->input->post('entry_id', TRUE);
    $arr_data['comment_name'] = strtolower($this->input->post('comment_name', TRUE));
    $arr_data['comment_email'] = $this->input->post('comment_email', TRUE);
    $arr_data['comment_body'] = $this->input->post('comment_body', TRUE);
    $arr_data['comment_date'] = jgmdate("j F Y");

    //Test data
    $arr_data['entry_id'] = 1;
    $arr_data['comment_name'] = 'One name';
    $arr_data['comment_email'] = '[email protected]';
    $arr_data['comment_body'] = 'One body';
    $arr_data['comment_date'] = jgmdate("j F Y");

    if($this->blog_model->comment_insert($arr_data)){
      echo json_encode(array('message' => 'all done!'));
    }else{
      echo json_encode(array('message' => 'not work!'));
    }
    
    }

Call the function in your application in a browser:

http://mydomain.com/index.php/myControll...ent_insert

If all goes well, and performs the insert will see:

{"message":"all done!"}

Or the specific PHP error or the json error:

{"message":"not work!"}

In this case, the error is in the data inseción.


test and comments!