开发者

How to insert data into field without refresh?

I need to know how can I add data from the database without refreshing the field ? I mean just like the working of Add Contacts in the Email. If I click the 'Add' button, I need to open a small window and contacts within it. If I check one or two开发者_运维技巧 contacts and press insert, it should be inserted in the 'To' field without refreshing the parent page..!!

How can I do that in php or JavaScript ? Please help me :)


You'll need to use ajax to do so. Ajaxform is great plugin for dynamically adding data to a page from a form. You can use $.ajax from jquery as well. http://jquery.malsup.com/form/#ajaxForm

$(document).ready(function() { 
    var options = { 
        target:        '#output1',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 

        // other available options: 
        //url:       url         // override for form's 'action' attribute 
        //type:      type        // 'get' or 'post', override for form's 'method' attribute 
        //dataType:  null        // 'xml', 'script', or 'json' (expected server response type) 
        //clearForm: true        // clear all form fields after successful submit 
        //resetForm: true        // reset the form after successful submit 

        // $.ajax options can be used here too, for example: 
        //timeout:   3000 
    }; 

    // bind form using 'ajaxForm' 
    $('#myForm1').ajaxForm(options); 
}); 

or regular ajax

$.ajax({
  url : url,
  data : {name : name}
  dataType : 'json',
  success : function(data) {}
});


You have to use AJAX, which today stands mostly for Asynchronous JavaScript And JSON. Since you seem to be new to this, I would strongly suggest using a good AJAX library like jQuery, YUI, Dojo, Prototype, etc. It will make your code much easier than doing it all by yourself, and probably also much more portable across browsers. Search for tutorials related to jQuery, AJAX and PHP. I've seen a good talk by John Resig some time ago who was demonstrating pretty much what you are trying to do with jQuery and PHP using very little code. Unfortunately I can't remember the title or link right now but you should be able to find it with no problems.


I can not quite understand your problem, but I think the dom operation can solve this.

Just take a look this example: http://jsfiddle.net/cyhello/Yfhrp/

Hope it helpful. Good luck!

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜