CODEWITHSUNDEEP
jqueryajax
Milen
Milen

Reputation: 11

Ajax edit box problem

Well, basically i have the following code (i'm using jQuery). I'm using the code bellow 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();
});
});

Upvotes: 0

Views: 573

Answers (1)

Punit Rathore
Punit Rathore

Reputation: 970

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();
  }
});

Upvotes: 1

Related Questions