CODEWITHSUNDEEP
phpjavascriptjquerymysql
coderunner
coderunner

Reputation: 935

Adding id's to html components dynamically using jquery

I am trying to auto save the content of my page and dump it into the database.Before inserting it, I want to remove the id's of the HTML elements as those are auto generated and not needed later apart from the edit page where user edits them.(I have achieved this) But,the issue I am facing is when the user comes to re-edit the page,I want to again add the id's back.(through a random function which we have written). This is how I fetch the data from database using PHP

    <?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');               //Itried doing this but does not work

How can I achieve it?I have tried adding a dynamic div,but failed.Is there a issue with the DOM?Am I not getting the dynamic div in the DOM?Please have your say and share thoughts.
Thank you for your time

Upvotes: 2

Views: 1617

Answers (3)

Evgeniy Chekan
Evgeniy Chekan

Reputation: 2665

Run this in a JS-console, and you will get the idea:

var some = $('<div class="myadd">');
some.append('<span>hey</span>');

console.log(some.html());
console.log($('.myadd').html());

some.children().attr('id', 'neat');

console.log(some.html());
console.log($('.myadd').html());

Upvotes: 3

Kevkong
Kevkong

Reputation: 460

I think the problem is, that you dynamically create the div, but you do not append it to your document.body or anything like that. So your selector simply do not find the element in the DOM. But even without adding the dynamically created div to the DOM it should be possible to access it directly, so pageContent.children().attr('id', 'test'); should work, but this would assign an id to all children of the div. You could eather use var pageContent=$('<div class="addId" id="test">').append(trimmedCont); or pageContent.get(0).id = "test"

Upvotes: 2

Dipesh Parmar
Dipesh Parmar

Reputation: 27364

Why don't you try getJson jquery function.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
    $.getJSON('x-request.php', function(data) {
        var items = [];
        $.each(data, function(key, val)
        {
            items.push('<li id="' + key + '">' + val.from + ' -> ' + val.to + '</li>');
        });
        $('<ul/>',
        {
            'class': 'my-new-list',
            html: items.join('')
        }).appendTo('body');
    });

});

</script>

And write you query for getting json_encode string in x-request.php

Upvotes: 2

Related Questions