Insert and Load Record using jQuery and Ajax.
Wall Script
Follow Me:
Friday, May 01, 2009

Insert and Load Record using jQuery and Ajax.

This tutorials explains how to insert and display record without refreshing web page. I had developed using jQuery and Ajax it's simple and useful take a look at this post.

Next Part
Slide down effect.

Insert and  Load Record using jQuery and Ajax.

Download Script     Live Demo

Database Design
My previous post : Twitter Like More Button with jQuery and Ajax.

inserting.php
Contains of javascript and HTML code.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js
">
</script>
<script type="text/javascript" >
$(function() {
$(".comment_button").click(function() {

var test = $("#content").val();
var dataString = 'content='+ test;

if(test=='')
{
alert("Please Enter Some Text");
}
else
{
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="ajax-loader.gif" align="absmiddle"> <span class="loading">Loading Comment...</span>');

$.ajax({
type: "POST",
url: "demo_insert.php",
data: dataString,
cache: false,
success: function(html){
$("#display").after(html);
document.getElementById('content').value='';
document.getElementById('content').focus();
$("#flash").hide();
}
});
} return false;
});
});
</script>
// HTML code
<div>
<form method="post" name="form" action="">
<h3>What are you doing?</h3>
<textarea cols="30" rows="2" name="content" id="content" maxlength="145" >
</textarea><br />
<input type="submit" value="Update" name="submit" class="comment_button"/>
</form>
</div>
<div id="flash"></div>
<div id="display"></div>



demo_insert.php
PHP Code display recently inserted record from the database.
<?php
include('db.php');
if(isSet($_POST['content']))
{
$content=$_POST['content'];
mysql_query("insert into messages(msg) values ('$content')");
$sql_in= mysql_query("SELECT msg,msg_id FROM messages order by msg_id desc");
$r=mysql_fetch_array($sql_in);
}
?>
<b><?php echo $r['msg']; ?></b>


Tutorials list

9lessos Table of Contents

Feel free post a comment. Please don't spam

Next Part
Insert a Record with animation slide down effect using jQuery and Ajax.
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


96 comments:

  1. Is it spam proof?

    ReplyDelete
  2. nice one... but please... remove the layout tables. we live in 2009

    ReplyDelete
  3. why use $("#flash").show();
    $("#flash").fadeIn(400).html('img src="ajax-loader.gif" align="absmiddle"> span class="loading">Loading Comment...span>');??

    jquery.ajax has the option: beforeSend use that insteed

    ReplyDelete
  4. Thanks for this script and thanks for your effort too... :)

    Thanks,
    Vivek
    [http://www.developersnippets.com]

    ReplyDelete
  5. good script but your shirt is better.

    ReplyDelete
  6. thanks from http://www.bugzlife.com

    ReplyDelete
  7. really good good i seach this tutorial anytime

    ReplyDelete
  8. how do i limit the displayed comment?

    ReplyDelete
  9. good script, but how can I load old messages first and use a button to delete the message with the same script

    ReplyDelete
  10. Nice script, but open to SQL injection.

    ReplyDelete
  11. thanks... it helps me a lot

    ReplyDelete
  12. Thanks for script, it's really great and simple. I'm using it for tags... it would be great if there would be solution to reverse display order of submitted content.
    This is the part to be edited but I cant figure out how to solve it:
    success: function(html){
    $("#display").after(html);
    }

    ReplyDelete
  13. how to create share any links like facebook using jquery

    ReplyDelete
  14. thanks, excellent script, just what i was looking for!!

    ReplyDelete
  15. Is it possible to pass POST[] array to jquery insert.?

    ReplyDelete
  16. Brilliant, it really made things come to lite, for a whole day I was struggling with something, but this... Awesome mate, keep it up.

    ReplyDelete
  17. thanks for the script...:)

    ReplyDelete
  18. When adding more than one record problem is the problem can you help when you add?

    ReplyDelete
  19. Is there a way to make this code reusable? (i.e several comment boxes on the same page)

    ReplyDelete
  20. very good! :)

    ReplyDelete
  21. very nice post but doesnt work in ie 6 version pls help ????

    ReplyDelete
  22. Can someone please tell me how to use the element.replace(html) function in this, rather than the after function?

    I'm sure it's a very simple workaround but I can't get it working, it just hangs on loading. I need it to replace the whole lot because I am bring up all records in a date order that the user enters.

    Any help would be really appreciated, I'm tearing my hair out!

    ReplyDelete
  23. Don't bother approving my comment. FOr some reason I was trying to use a prototype function and when I realised it was Jquery I just used replaceWith. Simples!

    Lovely script, thanks!

    ReplyDelete
  24. If I insert "You & Me" then only You will be submitted all the string after & will be terminated. Any suggestion...

    ReplyDelete
  25. For safety this should be

    $content=$_POST['content'];


    $content=mysql_real_escape_string($_POST['content']);

    ReplyDelete
  26. thanks for the coding i really need that one

    ReplyDelete
  27. any idea to how I would add a "see older posts button" ?

    ReplyDelete
  28. This is a very good tutorial

    ReplyDelete
  29. great output!..but my problem is whenever i refresh the page, the comment will be removed in the current page..can anyone help me with this problem?

    thanks u!

    ReplyDelete
  30. how to put in it my blog? help me please i want this so badly

    ReplyDelete
  31. You should definitely use a function like sprintf() to protect yourself against SQL injection attacks.

    ReplyDelete
  32. Wao Exact the same i was looking for thanx for sharing this

    ReplyDelete
  33. This is the script I was looking for. Awesome tips given by you brother. I will try to implement it ASAP on my site.

    ReplyDelete
  34. The post is best I like it. I think this post is very help full to the software developers. those who have a query about jQuery & Ajax.

    ReplyDelete
  35. As jquery is important & easy to learn.Also it is important in programming language

    ReplyDelete
  36. HI friends Thank for making it available

    ReplyDelete
  37. how do i fix this error
    <===
    mysql_fetch_array(): supplied argument is not a valid MySQL result resource in example.com/web/videos/demo_insert.php on line 20
    ===>

    ReplyDelete
  38. Great tutorial.. Thx alot mister

    ReplyDelete
  39. Hi. How do you give style to the div where the text is displayed? It doesn't work when you download the script?
    Thanks for the script.

    ReplyDelete
  40. Really very helpful!!

    ReplyDelete
  41. Script is very good for jquery learner!
    how do u write HTML(designing part) by hand or with any software?

    ReplyDelete
  42. Thank you boss, you have solved my one of biggest prob by this article

    ReplyDelete
  43. Hello Sri!
    I tried your script. it was working fine and now i am trying to implement it with for just email. But i am confuse how to use regular expression to check valid email through javascript on client-side before sending ajax request?

    As i had tried php regex which was working fine but there was an error because it was on server-side.
    So help me out how to implement javascript regex?
    I tried many tuts on this but didn't get success!

    ReplyDelete
  44. hmmm.. the thing i was searching for

    ReplyDelete
  45. hmmm.. the thing i was searching for

    ReplyDelete
  46. good and easy to understand..

    ReplyDelete
  47. can u please tell sql command for making tables

    ReplyDelete
  48. I want to send 3 parameters to save in the database. Name, age, description are the parameters. How do i build the dataString for this requirement.

    ReplyDelete
  49. Thank you so much I really appreciate this!

    ReplyDelete
  50. SUPER YAAR ,GREAT I LIKE IT.

    ReplyDelete
  51. that all i need . Thank you so much . A great tutorial

    ReplyDelete
  52. Does this script display records automatically when another person inserts record from another location ?

    ReplyDelete
  53. thanks for give me this script.

    ReplyDelete
  54. ain't working bro everytime i put the (script type="text/javascript" src="http://ajax.googleapis.com/ajax/
    libs/jquery/1.3.0/jquery.min.js"
    /script)
    my table is just messing up. do you know why?anyway thanks for the code :D

    ReplyDelete
  55. If someone has PHP submit and retrieve code on two separate files??

    ReplyDelete
  56. I have question on this statement "success: function(html)"

    how to pass multiple value to the html parameter?

    thanks

    ReplyDelete
  57. nice If we Reload the Webpage All the contents are lost.How to fix it

    ReplyDelete
  58. Thanks for you ajax form. Please let me know that ,if I want to add multiple data then what I should change?

    ReplyDelete

Make in India