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

Improve this question
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

Reset to default
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);
}));
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

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
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".
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.

Improve this answer

1 Comment

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.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.