Geek Answers Handbook

Create a list in javascript and add it to a div in html

I have a javascript function that gets some values ​​from ajax. From javascript, I add these values ​​to a div whose display is not by default. In my function from ajax, I also get an array of values. My task is to make an html list inside my div based on array values. Can anyone help me do this.

Javascript Function :

function showpopup(id)
{
var advid=id;
$.ajax
({
    type:"post",
    url:"ajax_getadv.php?function=getadv",
    data:{id:advid},
    cache:false,
    success:function(data){
        var values=data;
        var myarray=values.split("/");
        var name=myarray[0];
        var email=myarray[1];
        var country=myarray[2];
        var web=myarray[3];
        var advid=myarray[4];
        var count=myarray[5];
        var val=myarray[6]
        var mytitle=val.split(",");
        document.getElementById("advname").innerHTML = name;
        document.getElementById("advid").innerHTML = advid;
        document.getElementById("email1").innerHTML = email;
        if(country!="")
        {
            document.getElementById("country").innerHTML = country;
        }
        else
        {
            document.getElementById("country").innerHTML = "Not Available";
        }
        if(web!="")
        {
            document.getElementById("website").innerHTML = web;
        }
        else
        {
            document.getElementById("website").innerHTML = "Not Available";
        }
var generateHere = document.getElementById("newlist");
           var mycount=mytitle.length;
        alert(mycount);

         for( var i =  0 ; i < mycount ; i++)
         {  
            generateHere.innerHTML = '<div class="someclass"><ul><li>My Text</li></ul></div>';
         }
    }   
});

document.getElementById('box-config-modal1').style.display='block';

}

Here mytitle is the array that I want to display as a list. I put a for loop to create a list in a div. I have to show mytitle , not My text.

HTML div :

<!--SHOW MODAL 1-->
<div id="box-config-modal1" class="modal hide fade in" style="display: none;">
<div class="box" id="box-details">
<h4 class="box-header round-top">Details</h4>
<div class="box-container-toggle" style="padding-left:20px;padding-right:20px;">
    <div class="box-content" >
    <form name="popup" id="popup" >
    <fieldset>
        <button class="close" data-dismiss="modal"></button>
        <h3>User Details</h3>
        <div class="control-group">
            <div class="controls"> <label class="control-label" for="typeahead" style="width:100px;float:left;" >Name </label><label id="advname" style="padding-left:150px;"></label></div>
        </div>
        <div class="control-group">
            <div class="controls"><label class="control-label" for="typeahead" style="width:100px;float:left;" >ID </label><label id="advid" style="padding-left:150px;"></label></div>
        </div>
        <div class="control-group">
            <div class="controls"><label class="control-label" for="typeahead" style="width:100px;float:left;">Email </label><label id="email1" style="padding-left:150px;"></label></div>
        </div>
        <div class="control-group">
            <div class="controls"><label class="control-label" for="typeahead" style="width:100px;float:left;">Country </label><label  id="country" style="padding-left:150px;"></label ></div>
        </div>
        <div class="control-group">
            <div class="controls"><label class="control-label" for="typeahead" style="width:100px;float:left;">Website </label><label  id="website" style="padding-left:150px;"></label ></div>
        </div>
<div class="" id="newlist">
</div>
        <div class="modal-footer">
            <a href="" onClick="window.close()" class="btn btn-primary" data-dismiss="modal">Exit</a>
        </div>
        </fieldset>
    </form>
    </div>
</div>  
</div>


  

It is in this div that I want to create a list. I added a new div with id newlist

+4
2

, w3, . webcomponents shadowDOM .

.

DOM Javascript HtmlDOMElement 1 DOM.

function showpopup(id)
{
    var advid=id,
        options = {
            type:"post",
            url:"ajax_getadv.php?function=getadv",
            data:{id:advid},
            cache:false,
            success: OnSuccess
        };

    $.ajax(options);
}


function createControlGroup(options) {
   var options = options || {};


   options.id = options.id  || "ukn-"+Date.now();
   options.for = options.for || options.id;
   options.displayText = options.displayText || "NotSet";
   options.displayValue = options.displayValue || "Unknown";

   var cntrlGrpElm = document.createElement("div"),
       cntrlElms = document.createElement("div"),
       cntrlLabel1 = document.createElement("label"),
       cntrlLabel2 = document.createElement("label");

   var cntrlGrpElmClass=document.createAttribute("class"),
       cntrlElmsClass=document.createAttribute("class"),
       cntrlLabel1Class=document.createAttribute("class");

   cntrlGrpElmClassAttr.nodeValue="control-group";
   cntrlGrpElm.attributes.setNamedItem(cntrlGrpElmClassAttr);

   cntrlElmsClass.nodeValue="controls";
   cntrlElms.attributes.setNamedItem(cntrlElmsClass);

   cntrlLabel1Class.nodeValue="control-label";
   cntrlLabel1.attributes.setNamedItem(cntrlLabel1Class);


   var cntrlLabel2Id=document.createAttribute("id");
   cntrlLabel2Id.nodeValue=options.id;
   cntrlLabel2.attributes.setNamedItem(cntrlLabel2Id);

   var cntrlLabel1For=document.createAttribute("for");
   cntrlLabel1For=options.for;
   cntrlLabel1.attributes.setNamedItem(cntrlLabel1For);

   var cntrlLabel1Text = document.createTextNode(options.displayText),
       cntrlLabel2Text = document.createTextNode(options.displayValue);

   cntrlLabel1.appendChild(cntrlLabel1Text);
   cntrlLabel2.appendChild(cntrlLabel2Text);

   cntrlElms.appendChild(cntrlLabel1);
   cntrlElms.appendChild(cntrlLabel2);

   cntrlGrpElm.appendChild(cntrlElms);

   return cntrlGrpElm;
}

OnSuccess

function OnSuccess(e) {    
    var values=e.responseText;

    var myarray=values.split("/");

    var name=myarray[0],
        email=myarray[1],
        country=myarray[2],
        web=myarray[3],
        advid=myarray[4],
        count=myarray[5],
        val=myarray[6];

    var mytitle=val.split(",");

    var title1=mytitle[0],
        title2=mytitle[1],
        title3=mytitle[2];

DOMElement, .

    var cntrlGrpElms = document.createElement("fieldset");
    var cntrlGrpElmsClass = document.createAttribute("class");
    cntrlGrpElmsClass.nodeValue = "contrl-group-list";
    cntrlGrpElms.attributes.setNamedItem(cntrlGrpElmsClass);

    cntrlGrpElms.appendChild(createControlGroup({"id":"item-1","displayText":"Item 1", "displayValue":"Value of Item 1"}));
    cntrlGrpElms.appendChild(createControlGroup({"id":"item-2","displayText":"Item 2", "displayValue":"Value of Item 2"}));
    cntrlGrpElms.appendChild(createControlGroup({"id":"item-3","displayText":"Item 3", "displayValue":"Value of Item 3"}));
    cntrlGrpElms.appendChild(createControlGroup({"id":"item-4","displayText":"Item 4", "displayValue":"Value of Item 4"}));

. , , : fieldset, div.modal-footer. CSS , .

, DOMElement ( ) document.body.

    document.body.appendChild(cntrlGrpElms);
}  /* End of - $.ajax - 'OnSuccess' Callback*/

. , . HTML, , .

, , ( ) eventArg.. , , , , , , , ... F12 . ( html dom. "" ). showpopup (id) . .. "e 'eventArg .. " e" .. .. -, , .

- jqXHR (XmlHttpRequest)..

: , jqXHR (, , ) ( ).

, XHR2 , blob arraybuffer.. 'bson' (Binary json), , blob, , .. .. , Newtonsoft.json .Net framework.

XHR2 ( XHR Level 1) blob, , Google.

w3.org 2012 . ( -2.. ) 2014 . W3.org:

XHR - , " "

+4

HTML-, innerHTML, :

function divCall()
{
      document.getElementById('myDiv').innerHTML += 'your newly added text';

}

//make sure your div id is myDiv
0

More articles:


All Articles