Question

I am working on a application which can save user-created HTML templates. Here, the user will have some HTML components at his disposal and would be able to create static HTML pages using those components.

I am auto saving the content of the page using a javascript function.

     function saveContent(){    
        //var getContent=$('#mainWrap').children().removeAttr('id');
        var $getContent=$('#mainWrap');
        var $finalContent=$getContent.children().removeAttr('id');
        var auto="auto";
        var pageId = <?php echo $pageId;?>; 
        var webId  = <?php echo $webId;?>;
        var userId = <?php echo $userId;?>;
        $.ajax({
            url:"auto_save.php",
            type:"POST",
            dataType:"text",
            data:"txtComp="+$('#mainWrap').html()+"&auto="+auto+"&pageId="+pageId+"&webId="+webId+"&userId="+userId
        }); 
    }   

    var interval = 1000 * 60 * 0.30; // where X is your every X minutes
    setInterval(saveContent,interval);

Issue: I want to to remove the IDs from the HTML components that the user saves, because the IDs are auto generated and not needed when the user publishes the template (on his domain after creation). I have a main wrapper that wraps the entire page called id=mainWrap. If I try to remove the IDs like this $('#mainWrap').children().removeAttr('id'); they are also removed from the current context of the DOM, i.e they are removed from the page where the user is editing his template.

Question: How can I remove the IDs from the HTML elements without affecting the current context of the mainWrap object?

I tried assigning it to another object like this

    var $getContent=$('#mainWrap');
    var $finalContent=$getContent.children().removeAttr('id');

but still it failed.

Any comments or corrections on whether this is possible? Or am I going about this the wrong way?

Update : The issue is solved to some extent.
Next I want to add the id’s back when the user comes back to the edit page.
I get the above saved content using this code

    <?php
    $sqlEdit = "select revisionContent from tbl_revision where revisionId='".$_SESSION['contentId']."'"; //The query to get the record
    $rsEdit = $dbObj->tep_db_query($sqlEdit);//The database object to execute the query   
    $resEdit = $dbObj->getRecord($rsEdit);                                                                                       
    $IdLessContent = $resEdit['revisionContent'];//Variable with the record

     ?>

Now,I want to use this PHP variable in javascript,so I did this.

  <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));
    var pageContent=$('<div class="addId">').append(trimmedCont);  //Here I tried creating a div dynamically and appending the content to the div.But now I am not able to manipulate or work on this dyamic div and get NULL when I alert saying $('.addId').html();
    $('.addId').children().attr('id', 'test');               //I tried doing this but does not work

This is not working.Can you throw some light on it

Answer 1

You can just cycle through the elements in your #mainWrap and remove the id like:

var getContent = $('#mainWrap');
var finalContent = getContent.parent().clone().find('*').removeAttr('id');

Example: http://jsfiddle.net/7m8g4/6/

Security wise you should realize this is a client-side script that is removing the id attributes from the html. There are ways though to manipulate the JavaScript or to bypass it by (for instance) calling the URL in your Ajax request directly with false data.

So you should never rely on your JavaScript only. Make sure your code will not cause problems if for any reason the JavaScript doesn’t act as expected. You can do this for instance by searching for id attributes (use a regex) and generate an error message in case there are still some id attributes found. Another way would be to remove them server-side (in PHP) as well if any are found. To achieve this you could do a regex search and replace the matches with empty strings or by making use of substrings. Up to you!

Hope it all makes sense!

EDIT

If you want to add new id attributes back later on you can do something like:

var newContent = $(finalContent).first().wrap('<div class="addId" />');
newContent = $(newContent).parent().find('*').each(function(index, value) {
   $(this).attr('id', index);
});

See that in work here.