Thursday 28 June 2012

Submiting data with jquery to database without page reloading




When working with large number of forms,the main problem araises will be the time required for submitting a data to server and returing result from server which takes a large time. so it makes our site more slower.IIn this modern world where people want things to be done just in less than a second. so here iam explaining how we can submit a page without any page reloading. You know that as php is a sever side scripting language we cannot do without a refresh using php. but with the help of jquery we can do it in a better way.so the main thing is that you should have the jquery library included in your page then do like this what i explain:-

consider a form like tihis:-
<form action="" method="post" enctype="multipart/form-data">

<input type="text" name="postname" size="25" maxlength="90" tabindex="2" value="" id="postname" /></div>

<label class="error" for="title" id="postname_error">This field is required.</label>

Conent:-<textarea name="postcontent" tabindex="6" maxlength="90" id="postcontent">

</textarea>
<label class="error" for="content" id="postcontent_error">This field is required.</label>
<textarea name="tags" tabindex="6" maxlength="90" rows="5" cols="40" id="tags">

</textarea>
<label class="error" for="tags" id="tags_error">This field is required.</label>
status:-<input type="radio" id="publish1" name="radPublish" value="0" tabindex="12"/>
വേണം <input type="radio" name="radPublish" id="publish2" value="1" checked="checked"  tabindex="13"/>
<div class="col350"><input type="submit" class="button" name="saveForm" value="Save" />
</form>
make sure that form action is specified as null and all the fields hae id's corresponding to it. so we can retrieve the values of this fields using id by javascript.
so then please add the following js code under the file:-

<script type='text/javascript'>
$(function() {;
  $('.error').hide();// hiding all error labels
  $('input.text-input').css({backgroundColor:"#FFFFFF"});
  $('input.text-input').focus(function(){
    $(this).css({backgroundColor:"#FFDDAA"});
  });
  $('input.text-input').blur(function(){
    $(this).css({backgroundColor:"#FFFFFF"});
  });

  $(".button").click(function() {// this activates when class button is clicked
// validate and process form
// first hide any error messages
    $('.error').hide();
var postcontent =  $("input#postcontent").val();//getting value of post content

 var postname = $("input#postname").val();//getting value of postname
if (postname == "") {
      $("label#postname_error").show();
      $("input#postname").focus();
      return false;
    }

var tags = $("#tags").val();//getting value of tags
if (tags == "") {
      $("label#tags_error").show();
      $("#tags").focus();
      return false;
    }


var publish=0;
  if(document.getElementById('publish1').checked){// getting whether published or not
    publish=0;
  }else{
     publish=1;
  }
 


var dataString = 'postname='+ postname + '&postcontent=' + postcontent + '&tags=' + tags + '&publish=' + publish ;// concatinating to datasting

$.ajax({// ajax method of post and specify whether this data to go in the argument url .
      type: "POST",
      url: urlRoot+"user/submitposts",
      data: dataString,
      success: function() {
        $('#contact_form1').html("<div id='message'></div>");// if posted success then it will give a message like this
        $('#message').html("<h2><span style='color:black; background:green'>Post created!</span></h2>")
       
        .hide()
        .fadeIn(1500, function() {
         $('#MyDynamicDiv').load(urlRoot'+'allposts');//reloading page
          $('#message').append("");
        });
      }
     });
    return false;
});
});
// runOnLoad(function(){
//   $("input#name").select().focus();
// });

</script>
so after this it's time to add posts to databse so in the submit post.php.. write like this
function submitposts(){
$this->init();
$this->layout ='';
$postname=trim(strip_tags($_POST['postname']));

$postcontent=trim($_POST['postcontent']);
$tags=trim(strip_tags($_POST['tags']));
$publish=$_POST['publish'];
$postid=$_POST['blogid1'];
$userid1=$_POST['userid1'];
$tdate=date('y-m-d h-i-s');
$year=date("Y");
$month=date("M");
$save['Post']=array('blog_id'=>$postid,'name'=>$postname,'content'=>$postcontent,'tags'=>$tags,'published'=>$publish,'date_add'=>$tdate,'views'=>0,'month'=>$month,'year'=>$year);
$f=$this->Post->save($save);
exit;



}
here it will be saved in database

No comments:

Post a Comment