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

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