0

I'm having problem after appending elements it comes without jquery theme. I tried to apply the theme manually but still doesn't work with input box and the select box. Is there any way to fix this or way of how did I write the code of how to append elements is wrong. Also the code of remove button didn't work

here is my javascript code:-

 $(window).on('pageinit', function() {
 $(document).ready(function(){
    $("#Sadd").click(function() {
 var tDiv = $('#GPA1');
    var i = $('#GPA1 h1').size() + 1;
 $('<li class="ui-li-static ui-body-inherit" style="border:none"><h1>Module ' + i +':</h1></li><li class="ui-field-contain ui-li-static ui-body-inherit" data-role="fieldcontain" style="border:none"><label for="Sc' + i +'">Credits:</label><input type="number" step="0.01" id="Sc' + i +'" name="Sc' + i +'" data-clear-btn="true"></li><li class="ui-field-contain ui-li-static ui-body-inherit ui-last-child" data-role="fieldcontain" style="border:none"><label for="Sgrade' + i +'" class="select">Grade:</label><select class="Sgrade' + i +'" data-theme="f" id="Sgrade' + i +'"><option value="-1">—</option><option value="4">A</option><option value="3.7">A-</option><option value="3.3">B+</option><option value="3">B</option><option value="2.7">B-</option><option value="2.3">C+</option><option value="2">C</option><option value="1.7">C-</option><option value="1.3">D+</option><option value="1">D</option><option value="0">F</option></select></li>').appendTo(tDiv);
  i++;
     return false;
  });
 $("#Sremove").click(function() {
  var i = $("#GPA1 h1").length();
                if( i > 5 ) {
                        $(this).parents('h1').remove();
                        i--;
                }
                return false;
    
    
  });   
  });
});

Here is a picture of what is happening when I add new element:- enter image description here

and here is a demo of my html and javascript just click add button and you will see the result

http://jsfiddle.net/tny5mh2n/

Jonathan Lonowski
  • 121,453
  • 34
  • 200
  • 199
Shihab
  • 29
  • 6
  • 1
    [jQuery Mobile does not apply styles after dynamically adding content](http://stackoverflow.com/questions/7999436/jquery-mobile-does-not-apply-styles-after-dynamically-adding-content) – Jonathan Lonowski Nov 13 '15 at 06:15
  • The input element has a surrounding div which you missed out.
    Check the example -> http://jsfiddle.net/tny5mh2n/1/ Similarly, the select element is also not matching with the dynamic select that you are creating.     – Vamsi Nov 13 '15 at 06:18
  • @JonathanLonowski that was helpful. thanks – Shihab Nov 13 '15 at 06:41

2 Answers2

2

There was issue with div tag you didn't add div tag in that try to replace with this even i have updated in http://jsfiddle.net/tny5mh2n/2/

$('<li class="ui-li-static ui-body-inherit" style="border:none"><h1>Module ' + i +':</h1></li><li class="ui-field-contain ui-li-static ui-body-inherit" data-role="fieldcontain" style="border:none"><label for="Sc' + i +'">Credits:</label><div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear"><input type="number" step="0.01" id="Sc' + i +'" name="Sc' + i +'" data-clear-btn="true"><a href="#" class="ui-input-clear ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all ui-input-clear-hidden" title="Clear text">Clear text</a></div></li><li class="ui-field-contain ui-li-static ui-body-inherit ui-last-child" data-role="fieldcontain" style="border:none"><label for="Sgrade' + i +'" class="select">Grade:</label><div class="ui-select"><div class="ui-btn ui-icon-carat-d ui-btn-icon-right ui-btn-f ui-corner-all ui-shadow" id="Sgrade5-button"><span class="Sgrade5">—</span><select class="Sgrade' + i +'" data-theme="f" id="Sgrade' + i +'"><option value="-1">—</option><option value="4">A</option><option value="3.7">A-</option><option value="3.3">B+</option><option value="3">B</option><option value="2.7">B-</option><option value="2.3">C+</option><option value="2">C</option><option value="1.7">C-</option><option value="1.3">D+</option><option value="1">D</option><option value="0">F</option></select></div></div></li>').appendTo(tDiv);
Santosh
  • 393
  • 2
  • 11
0

i cant see the html though.but i fall in same problem before. firstly you should use $.on instead of $.click.and secondly while you add elements dynamically you should get your child dynamic elements by their parents. you cannot get them directly by their class or id after creating them dynamically

Borshon saydur rahman
  • 130
  • 2
  • 10
  • it's here http://jsfiddle.net/tny5mh2n/ the $.click is working fine and I can add elements. the problem is solved but I can't figure a way to remove them – Shihab Nov 13 '15 at 07:59
  • I want the user to be able remove the modules that will be appended and the modules from 1 to 5 should not be removed – Shihab Nov 13 '15 at 08:59
  • 1
    ok man i have seen your code.i wouldnt be doing the code that way if i would be doing that work. now i can see a solution for you. Firstly encapsulate every set into a div and give every div a dynamic id.and a common class. when you delete them. loop through that common class and remove the last one.thats a very easy solution. – Borshon saydur rahman Nov 13 '15 at 09:18
  • Ok am not sure if I'm done it correctly or not here is the updated fiddle http://jsfiddle.net/tny5mh2n/9/ and the problem now it's start adding modules from 21 and then adding to the previous module and that's include id of select box and the input box. For the removing can you give me sample of the loop that I should apply it will be helpful – Shihab Nov 13 '15 at 10:30
  • I followed what you've suggest and the problems are solved but I didn't use the loop since I want the user to remove the added modules one by one and I did that with if statement thanks again you've made my day. – Shihab Nov 13 '15 at 13:10