开发者

Ajax edit box problem

开发者 https://www.devze.com 2023-02-04 00:16 出处:网络
Well, basically i have the following code (i\'m using jQuery). I\'m using the code b开发者_StackOverflowellow to update dynamicallyfield via ajax post. All is working fine but when i use code for dyna

Well, basically i have the following code (i'm using jQuery). I'm using the code b开发者_StackOverflowellow to update dynamically field via ajax post. All is working fine but when i use code for dynamically generated content with more than one input fields, that code is not working. I'm using "live" but seems that this not work. Any solution? Thanks in advance.

My html code:

<span class="text_wrapper">
<span class="imageInf"><a href="tag/1235">1235</a></span>
<a href="javascript:;" class="edit_link" title="Add/Edit">
<img src="i/edit.png" class="middle">
</a>
</span>
<span class="edit" style="display:none"><input type="text" class="editbox" name="mediatags" value="1235"></span>

My JavaScript code:

//ajax edit box
$(document).ready(function()
{
//Edit link action
$('.edit_link').live("click", function()
{
$('.text_wrapper').hide();
var data=$('.text_wrapper').html();
$('.edit').show();
$('.editbox').html(data);
$('.editbox').focus();
});
//Mouseup textarea false
$(".editbox").mouseup(function()
{
return false
});
//Textarea content editing
$(".editbox").live("change", function()
{
$('.edit').hide();
var boxval = $(".editbox").val();
var dataString = 'data='+ boxval;
$.ajax({
type: "POST",
url: "editPicName.php",
data: dataString,
cache: false,
success: function(html)
{
$('.text_wrapper').html(boxval);
$('.text_wrapper').show();
}
});
});
//Textarea without editing.
$(document).mouseup(function()
{
$('.edit').hide();
$('.text_wrapper').show();
});
});


If you want to pass more than 1 parameter in your post request, you need to include in the "data" option of your $.ajax function.

So say you want to pass values of 2 input fields "data1" and "data2"

You $.ajax call would look like this


$.ajax({
  type: "POST",
  url: "editPicName.php",
  data: "data1=value1&data2=value2",
  cache: false,
  success: function(html)
  {
    $('.text_wrapper').html(boxval);
    $('.text_wrapper').show();
  }
});


where i'm assuming "value1" and "value2" are the current values of those input fields.

You can also send the data option of $.ajax call as JSON. I'd recommend you do it this way( it looks cleaner)


$.ajax({
  type: "POST",
  url: "editPicName.php",
  data: ({data1 : "value1", data2 : "value2"}),
  cache: false,
  success: function(html)
  {
    $('.text_wrapper').html(boxval);
    $('.text_wrapper').show();
  }
});


0

精彩评论

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