javascript - How to get my dynamically created div to show up on page after ajax call -


i have project trying implement jquery. have add button, everytime clicked, create new record on in database. trying figure out how ajax call recognize new data , display on screen, without me having manually refresh screen, hoping use fadein or similar show new div.

this checklist system,so can edit checklist adding steps on fly , reorder existing steps wrote loaddata function loop through records , append appropriate data, not sure how auto refresh div when adds new step. don't want reload entire page, newly created div. 

$(function() {    loaddata();  });  // drag , drop steps , update database  $('#steps').sortable({    update: function(event, ui) {      var data = $(this).sortable('serialize');        data = data + '&id=' + json.idchecklist + '&ver=' + json.version;      $.ajax({        data: data,        type: 'post',        url: '../processes/reorder.php',        success: (function() {})        });      }  });    //load data  function loaddata() {    $.ajax({      url: '../json/test.php',      type: 'get',      datatype: 'json',      success: function(data) {        json = data        $('#details').find('h2').html(data.idchecklist);        $('#details').find('h4').html(data.status);        $.each(data, function(k, v) {            if (k == "steps") {            count = 1;            $.each(v, function(key, value) {              $('#steps').append('<span>' + count + '</span><div id=step' + value.idstep + '>' + value.steptext + '</div>');              count++;              text[count] = value.steptext;            })          }        })        }    })  }  //add new step  $('#add').click(function() {    console.log(count);    div = $('#step-' + count);    $.ajax({      type: 'post',      data: {        id: json.idchecklist,        ver: json.version,        step: count      },      url: '../processes/addstep.php',      success: (function() {          div.fadein('fast')        })    })    })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>  <div class="jumbotron"></div>  <div id="details">    <h2></h2>    <h4></h4>  </div>  <div id="steps">    </div>  <button id=add value="add">add</button>


Comments

Post a Comment

Popular posts from this blog

javascript - Create a stacked percentage column -

i have collection of data : var data = [ {"p301a":"10","p301b":"7","p301c":"7","p301d":"3","p301e":"8","p301f":"8","p301g":"8","p301h":"8","p301i":"8","p301j":"8","p301k":"8","p301l":"8","p301m":"8","p301n":"8","p301o":"8","age":"31-40 years","profesion":"2","position":"2"}, {"p301a":"5","p301b":"4","p301c":"4","p301d":"4","p301e":"4","p301f":"4","p301g":"4","p301h":"4","p301i":"4","p301j":"4","p301k":"4...
Read more

Optimising Firebase database by automatically overwriting data -

in firebase app have following structure: posts latest all users can write posts > latest . want limit entries 20 posts save space in database. , posts beyond 20 unnecessary never shown on homepage. how can limit posts 20, when user writes posts > latest posts @ end drop off (be deleted) automatically? this sample should you. you need : const max_log_count = 20; exports.removeold = functions.database.ref('/posts/latest/{postid}').oncreate(event => { const parentref = event.data.ref.parent; return parentref.once('value').then(snapshot => { if (snapshot.numchildren() >= max_log_count) { let childcount = 0; const updates = {}; snapshot.foreach(function(child) { if (++childcount <= snapshot.numchildren() - max_log_count) { updates[child.key] = null; } }); // update parent. removes children. ...
Read more

javascript - Angular UI-Grid customTemplate directive causing rows to load slowly/? -

Image
each grid cell can have more 1 customtemplate loaded. have directive holds watcher on model_col_field listen cell updates on scroll when dom rows updated , recompile celltemplate . without watcher , $compile rows repeat on scroll, showing same set of rows. is there more angular way of approaching or way improve performance? relevant controller code: create gridoptions.data & gridoptions.columndefs : var customtemp = '<div ng-repeat="opt in grid.appscope.colvalueoptionsmodel" ng-init="tempstring=model_col_field.clazz+opt.key;"><comparison-directive dbo="model_col_field" attobj="opt" fff="grid.appscope.getattributetemplate(tempstring)" /></div>'; $scope.gridoptions.columndefs = [ { name:'yindex',pinnedleft:true,celltemplate: customtemp, displayname:'index'}, { name:'col1',celltemplate: customtemp}, { name:'col2',celltemplate: c...
Read more