0

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

2
  • 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 Commented Jan 24, 2013 at 13:16
  • 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! Commented Jan 24, 2013 at 13:18

2 Answers 2

2

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);
}));
2
  • 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 Commented Jan 24, 2013 at 17:50
  • 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". Commented Jan 25, 2013 at 0:59
1

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.

1
  • 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. Commented Jan 24, 2013 at 14:41

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.