Processing PHP variable in javascript and returning back to PHP

Question

I am working on an application where I fetch data from database and process it using javascript/jquery like this:

 $sqlEdit = "select revisionContent from tbl_revision where revisionId='".$_SESSION['contentId']."'"; //Query to fetch the result
 $rsEdit = $dbObj->tep_db_query($sqlEdit);
 $resEdit = $dbObj->getRecord($rsEdit);
 $IdLessContent = $resEdit['revisionContent']; 
 <script language="javascript"> 
 var getSavedContent = '<?php echo json_encode($IdLessContent); ?>';
 var trimmedCont=($.trim(getSavedContent).slice(1));
 //console.log(trimmedCont);
 var lengthCont= trimmedCont.length;
 var trimmedCont=$.trim(trimmedCont.slice(0,lengthCont-1));
 console.log(trimmedCont);
 var test = $('<div class="addId">');
 test.append(trimmedCont);
 //console.log(test.html());
 test.children().each(function(index, value) {
 $(this).attr('id', "com-"+randomString());
 });
 //console.log(test.html()); 
 viewContent = test.html();

I get the required data in viewContent.I want to display it on the page in this section

 <div id="mainWrap" onClick="fnDestroyEditable();">
 <?php echo $resEdit['revisionContent']; ?> //THis is the unprocessed data displayed directly from database.I want to display the processed data here
 </div> 

I know we cannot get javascript variables to PHP as both are different (one server side and other client). But then how can I achieve this in my scenario? EDIT I would like to add that the returned data is HTML stored in the database.So,I get the html->process it(add id attribute)->want to return back after processing

• darma: Have you heard about JSON ? You can switch from Javascript objects to PHP arrays and vice-versa with the json_encode and json_decode functions : php.net/manual/fr/book.json.php
• coderunner: I have used json_encode above.But still learning.Can you help me out how it would work in my case.It would prove to be great help!

Answer 1

you can put the viewContent inside #mainWrap using javascript. just make sure the DOM is loaded wrapping your js code with $(document).ready() and add:

$('#mainWrap').html(viewContent);

at the end of your function.

$(document).ready(function () {
 var getSavedContent = '<?php echo json_encode($IdLessContent); ?>';
 var trimmedCont=($.trim(getSavedContent).slice(1));
 //console.log(trimmedCont);
 var lengthCont= trimmedCont.length;
 var trimmedCont=$.trim(trimmedCont.slice(0,lengthCont-1));
 console.log(trimmedCont);
 var test = $('<div class="addId">');
 test.append(trimmedCont);
 //console.log(test.html());
 test.children().each(function(index, value) {
 $(this).attr('id', "com-"+randomString());
 });
 //console.log(test.html()); 
 viewContent = test.html();
 // put viewContent in the innerHtml of your wrapper
 $('#mainWrap').html(viewContent);

});

if you need to send back info to the server you have to do it with ajax. I added a javascript function addId() that will be invoked on click on one of the elements. the new code is:

$(document).ready(function () {
 var getSavedContent = '<?php echo json_encode($IdLessContent); ?>';
 var trimmedCont=($.trim(getSavedContent).slice(1));
 //console.log(trimmedCont);
 var lengthCont= trimmedCont.length;
 var trimmedCont=$.trim(trimmedCont.slice(0,lengthCont-1));
 console.log(trimmedCont);
 var test = $('<div class="addId">');
 test.append(trimmedCont);
 //console.log(test.html());
 test.children().each(function(index, value) {
 $(this).attr('id', "com-"+randomString());
 });
 //console.log(test.html()); 
 viewContent = test.html();
 // put viewContent in the innerHtml of your wrapper
 $('#mainWrap').html(viewContent);
 $('#mainWrap .addId').children().click(function({
 addId(this);
 }));
}
addId = function(elem){
 // elem is the child element you clicked on
 // $(elem).attr('id') should be "com-[randomString]"
 $.ajax({
 type: "POST",
 url: "path/to/php/script", // update id PHP script
 data: data, // whatever you need in json format
 dataType: "json",
 error: function() {
 // error function you want to implement
 errorFunction();
 },
 success: function(resp) {
 // do whatever you need with the response from you PHP action
 }
 });
};

if you need to to call server with out human interaction just substitute

$('#mainWrap .addId').children().click(function({
 addId(this);
}));

with:

$('#mainWrap .addId').children().each(function({
 addId(this);
}));

• coderunner: I tried it and it worked,but I am not sure how efficient this way of handling PHP objects/content is.The content I insert in mainWrap is editable and could be saved back to the database,when the user edits his page.Can you suggest any other work around about how I can go about handling the scenario.The application is a template builder where user can create static HTML templates.He can save them and re-edit the templates with the help of few components in a drag and drop environment
• barvaz: are you talking about content management page? inline object's records editing? if so, it's up to you designing the system's architecture. try to google "inline CRUD + Php + ajax".

Answer 2

if I undesrstand you, you shold only add in the end of your js code this line:

$('#mainWrap').html(viewContent);

If you want to send JS data to PHP, you should use ajax request.

• coderunner: Thank you karim!Yes I tried it and it worked,but I am not sure how efficient this way of handling PHP objects/content is.The content I insert in mainWrap is editable and could be saved back to the database,when the user edits his page.Can you suggest any other work around about how I can go about handling the scenario.The application is a template builder where user can create static HTML templates.He can save them and re-edit the templates with the help of few components in a drag and drop environment.