mysql update with jquery ajax

Question

I am trying to update a mysql db from a textarea with jquery and ajax but cannot get the updated content of the text area to pass through to the php page.

I have a page and on the page I click a button which opens a layer and calls the edit_box function.

the layer then fills the form fields with data from the db.

the textarea is a nicedit box and all works well until I click save and any changes I have made to the textarea are not passed. Only the original content.

its seems so obvious but I cant seem to fathom the issue

any help appreciated

heres the code

html page

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
  #popupbox{ 
    padding:0;
    width: 99%;
    height: auto;
    margin: 0px auto;   
    position:absolute;
    background: #FBFBF0; 
    border: solid #000000 2px; 
    z-index: 9000; 
    font-family: arial; 
    visibility: hidden; 
   }
 </style>
 <script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
 <script>

 function get_edit_content(box_id,page_ref,template_ref)
   {
  $.get("get_content.php", { box_id: box_id, page_ref: page_ref, template_ref:template_ref } )
  .done(function(data) {
      document.getElementById("box_id").value = box_id; 
      document.getElementById("edit_content").value=data;
      var area1 = new nicEditor({fullPanel : true}).panelInstance("edit_content",{hasPanel : true});         
      });  
   }


   function edit_box(showhide,box_id,page_ref,template_ref){
     if(showhide == "show"){    
    get_edit_content(box_id,page_ref,template_ref);
            document.getElementById('popupbox').style.visibility="visible";
     }else if(showhide == "hide"){
            document.getElementById('popupbox').style.visibility="hidden";      
     }  
   }

  $(document).ready(function()
{    
      $('#sub').click(function (e) 
    { 
      e.preventDefault(); 
      $.ajax({type:'POST', url: 'update_textarea.php', data:$('#myFrm').serialize(), success:
      function(response) 
        {
         alert(response);
        }
     });

   });
});
</script>
</head>

<body>
 <div id="popupbox">
  <form id="myFrm">
    <input type="hidden" name="page_ref" value="<? echo $page_ref; ?>" />
    <input type="hidden" name="template_ref" value="<? echo $template_ref; ?>" />
    <input type="hidden" id="box_id" name="box_id"/>
    <textarea name="edit_content" id="edit_content"  style="width: 500px; height:500px;"></textarea>
    <button id="sub" >Save</button>
    <center><a href="javascript:edit_box('hide');">close</a></center> 
  </form>

 </div>
</body>
</html>

php page

 <?
    include("connect.php"); 
$page_ref = $_POST['page_ref'];  
$template_ref = $_POST['template_ref'];
$box_id = $_POST['box_id'];
$edit_content = addslashes($_POST['edit_content']);  
if(mysql_query("UPDATE site_content SET content='$edit_content' WHERE page_ref='$page_ref' AND template_ref='$template_ref' AND box_id='$box_id' AND box_type='text'"))
    {
        echo "page_ref=".$page_ref." template_ref=".$template_ref." box_id=".$box_id." edit_content=".$edit_content;
    }
else
    {
        echo "error";
    }


   ?>

You are using [an **obsolete** database API](http://stackoverflow.com/q/12859942/19068) and should use a [modern replacement](http://php.net/manual/en/mysqlinfo.api.choosing.php). You are also **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that a modern API would make it easier to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Apr 15 '13 at 15:05

score 0 · Answer 1 · answered Apr 15 '13 at 13:35

0

It all looks ok at first sight, but try this:

$query = "UPDATE site_content SET content='$edit_content' WHERE page_ref='$page_ref' AND
template_ref='$template_ref' AND box_id='$box_id' AND box_type='text'";
echo "Query = $query <br />";
mysql_query($query);

This will output the query you are trying to run, and might help in debugging. Please try this, and post the result of the echo here.

answered Apr 15 '13 at 13:35

Borniet

3,544
4
24
33

Hi I updated the php page with your code and this was the returned output " Query = UPDATE site_content SET content=' newtext ' WHERE page_ref='170' AND template_ref='15' AND box_id='10' AND box_type='text'
" but the actual content of the box was "newtext bnvnvbsasas" – Barry Watts Apr 15 '13 at 13:41
I find that if I remove the nicedit from the textarea then is psses through any updated text so its something to do with the nicedit – Barry Watts Apr 15 '13 at 13:49
Yes Indeed, been trying out some stuff too, and it boils down to that. Get rid of nicedit I would say... – Borniet Apr 15 '13 at 13:51
I cant I need a free rich text editor with all the features like changing font etc and it fits the bill. If I pass the form values therough to the php page not using ajax its fine its just when using the jquery ajax is when I have the problem, thats why I posted here to see if anyone can help me – Barry Watts Apr 15 '13 at 14:02

score 0 · Accepted Answer · answered Apr 15 '13 at 20:23

ok managed to solve the problem with this little snippet.

$(document).ready(function() {
 $('#sub').click(function() {
   var edit_content = $('#myFrm').find('.nicEdit-main').text(); 
   var box_id = $('#myFrm').find("#box_id").val();
   var page_ref = $('#myFrm').find("#page_ref").val();
   var template_ref = $('#myFrm').find("#template_ref").val();
   $.post("update_textarea.php", {box_id:box_id, page_ref:page_ref, template_ref:template_ref, edit_content:edit_content },
  function(status){
   alert(status);       
   });
 });
});

I put the save button outside the form to stop the form being posted.

mysql update with jquery ajax

2 Answers2