Simplify Javascript

[nicoscodes]

Hey guys!

First time post here and I am only a begginer in programming. Anyway I have a few questions as I am stuck and have been for quite a while. I know this is a long post but it will cover the whole entire process of what I am doing at the moment. I really appreciate the time anyone can give me and will be happy to paypal someone over some $ for any help they can give me.

Firstly, I am working with a bit of javascript and PHP. I am using a javascript method to update content from my table data in mysql without reloading the page. It works very well but I want to simplify the way i do things with the javascript so I am not left with repetative lines of code.

Here is my javascript:

$(document).ready(function()
{

//Edit link action (1)
$('.edit_link').click(function(){$('.text_wrapper').hide();
var data=$('.text_wrapper').html();
$('.edit').show();$('.editbox').html(data);$('.editbox').focus();});

//Edit link action (2)
$('.edit_link2').click(function(){$('.text_wrapper2').hide();
var data=$('.text_wrapper2').html();$('.edit2').show();
$('.editbox2').html(data);$('.editbox2').focus();});

//Mouseup textarea false (1)
$(".editbox").mouseup(function(){return false});
//Mouseup textarea false (2)
$(".editbox2").mouseup(function(){return false});

//Textarea content editing (1)
$(".editbox").change(function(){$('.edit').hide();var boxval = $(".editbox").val();
var dataString = 'data='+ boxval;$.ajax({type: "POST",url: "update.php",data: dataString,cache: false,success: function(html){$('.text_wrapper').html(boxval);$('.text_wrapper').show();}});});
//Textarea content editing (2)
$(".editbox2").change(function(){$('.edit2').hide();
var boxval = $(".editbox2").val();var dataString = 'data2='+ boxval;$.ajax({type: "POST",url: "update.php",data: dataString,cache: false,success: function(html){$('.text_wrapper2').html(boxval);$('.text_wrapper2').show();}});});


//Textarea without editing (1)
$(document).mouseup(function(){$('.edit').hide();$('.text_wrapper').show();});
//Textarea without editing (2)
$(document).mouseup(function(){$('.edit2').hide();$('.text_wrapper2').show();});


});

As you can see I am having to repeat the functions and all I do is change the name. Instead of repeating the script like I am over and over again to recognise different textareas is there a way I can array it or something like this so I don't have endless lines of the same code over and over again? I have allot more then just 2 textareas but of course shortened it for this post.

 

Here is how I UPDATE the data in MySQL. I am looking into moving this over to PDO as I have be learning that PDO is the more safe and finctional option. My question here would be is there a simple way to UPDATE the rows instead of the way I doing this by repeating this process over and over again? I know I can use the: if (isset()); but I am troubled to work out how I would define the "id" of the data I am changing?

<?php
include("connection.php");

if($_POST['data'])
{
$data=$_POST['data'];
$data = mysql_escape_String($data);
$sql = "update slider set content='$data' where id='1'";
mysql_query( $sql);
}

if($_POST['data2'])
{
$data2=$_POST['data2'];
$data2 = mysql_escape_String($data2);
$sql = "update slider set content='$data2' where id='2'";
mysql_query( $sql);
}
?>

The HTML  is quite simple. The form is wrapped in a div and the "edit" link is defined by class which again I repeat by just copy and past, the select is done via "id" which I need to define in the UPDATE section:

<a href="#" class="edit_link" title="Edit">Edit</a>
<?
$sql=mysql_query("select content from slider where id='1'");
$row=mysql_fetch_array($sql);
$profile=$row['content'];
?>
<div class="text_wrapper" style=""><?php echo $profile; ?></div>
<div class="edit" style="display:none">
<textarea class="editbox" cols="23" rows="3" name="profile_box"></textarea>
</div>

<a href="#" class="edit_link2" title="Edit">Edit</a>
<?
$sql=mysql_query("select content from slider where id='2'");
$row=mysql_fetch_array($sql);
$profile=$row['content'];
?>
<div class="text_wrapper2" style=""><?php echo $profile; ?></div>
<div class="edit2" style="display:none">
<textarea class="editbox2" cols="23" rows="3"  name="profile_box"></textarea>
</div>

I hate asking for help but I really need some guidence here as myself and Javascript are not good friends and myself and PHP are just starting a relationship, if you know what I mean. Any examples of how to achieve this? I do beleive if anyone could put me in the right direction it would be a great script to share around as it is very functional.

I apologize for such a large post, however I really am stuck and have gone this far. I have researched google but find i just keep getting stuck. Idealy I just want to simplify the whole script, make it more functional and save myself the repetative task of going over the same thing again and again.
 

Edited May 7, 2013 by nicoscodes

[nogray]

Since you are querying the elements using class name, you can give all the similar elements similar class and use this in the function. this will be the element that fired the event. You would need to add the events once.

 

If you want to modify other related elements, you can get the parent node of this and use it as the context for your selection, e.g. $('.edit', this.parentNode).show();

Just make sure each row has one parent element, e.g. <div id="parent_row_123"><div ,,,></div><div ...</div></div><!-- closing parent -->