modify $.get data with jquery

Question

What I would like to do is use $.get to pull data in from another source. With the now returend items in the varible "data" I want to access a node and stick in some of my own html inside it. After doing so, I would like to store the now "completed" data in a varible that can be displayed on screen.

$.get("view/contractCreator.html", function(puzzel){

        $.get("controller/controller.php", { command: "contractCreatorDisplay"},function(data){

            var contents            =       "";
            data                    =       jQuery.parseJSON(data);
            var contractTypeLen     =       data.length;
            for(var i = 0; i < contractTypeLen; i++){
                contents    +=      "<div class='actionBox' data-contractType='"+data[i].room_type_id+"' style='width:300px;height:350px;background-color:rgba(101, 201, 168, 0.9);'>";
                contents    +=      "<div class='actionBox' data-input='title' data-placeholder='title' style='width:300px;height:50px;background-color:rgba(82,131,158,0.9); clear:both;'><input type='text' id='title' class='inputFill' placeholder='title' value='"+data[i].room_type_name+"'></div>";
                contents    +=      "<div class='actionBox' data-input='description' data-placeholder='desciption' style='width:300px;height:110px;background-color:rgba(74,150,129,0.9); clear:both;'><input type='text' id='description' class='inputFill' placeholder='title' value='"+data[i].room_type_desc+"'></div>";
                var contractsLen = data[i].rent_contracts.length;
                for(var x = 0; x < contractsLen; x++){
                    contents    +=      "<div class='actionBox' data-contract_id='"+data[i].rent_contracts[x].rent_contract_id+"' data-pdfId='"+data[i].rent_contracts[x].pdf_id+"' data-duration='"+data[i].rent_contracts[x].rent_contract_duration+"' data-deposit='"+data[i].rent_contracts[x].rent_contract_deposit+"' data-rent='"+data[i].rent_contracts[x].rent_contract_rent+"' style='width:149px;height:94px;background-color:rgba(82,131,158,0.9);border-right: 1px solid rgba(150,229,210,0.9);border-bottom: 1px solid rgba(150,229,210,0.9);'><img src='img/addWhite.png' style='height:40px;margin-top:15px;'/><p style='margin-top:10px;font-size:12px;color:white;'>not done</p></div>";
                }
                contents    += "</div>";
            }

            var completePuzzel = $(puzzel).$('#contractArea').html(contents);
            console.log(completePuzzel);
            transition(completePuzzel);
        });
    });

This line is where I would like to insert data I get from another source.

 var completePuzzel = $(puzzel).$('#contractArea').html(contents);

Any help would be fantastic and appreciated!

Hmm..if getJSON is relevant here, then my answer must be wrong. Your code is confusing..so I'm not too sure. — m59
– m59, Commented Dec 15, 2013 at 19:25

m59 · Accepted Answer · 2013-12-15 19:24:52Z

1

If I understand you correctly - you can create an element and add the markup in data to it. Then search that element with jQuery selectors, make the changes to want as usual, and then append the elements contents (the changed data) wherever you want on the page.

This is assuming that by "node" you mean a DOM element - which is the normal meaning.

var $elem = $(<div></div>)

$elem.html(data);

$toChange = ('.someSelector', $elem); //find .someSelector elem in your data
$.toChange.text('I got changed!'); //make your change

$('.someElemOnPage').append($elem.contents()); //append your changed "data" markup somewhere in the DOM.

answered Dec 15, 2013 at 19:24

m59

43.9k14 gold badges122 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

modify $.get data with jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related