Topic: Input field loaded with Ajax Error

grafjakob1 pro asked 7 years ago

I have a problem when i load input fields via Ajax. The Labels are not placed correctly - the input field is superimposed by the label. After clicking the input the first time, it is working correctly (The label is shown in the top of the input and getting blue when active...) - like it should be. Is there some way to re-initialize the input stuff. Didn't find anything in the documentation Thanks

Kamil Paciepnik free answered 7 years ago

grafjakob1, please write me at JS scripts that you load first. Regards

grafjakob1 pro answered 7 years ago

what i guess, is that i have to reload some part of the the mdb-script which sets the label on the right position and colors it blue after the line "$(‘#add-form’).html(rep.html);" - but didn't found a possibility to do it yet. Edit: And of course the first div on form is class="col-md-12", but this do not change anything

grafjakob1 pro answered 7 years ago

Page with some other inputs which are working correctly... for example... <div class="md-form"> <div class="md-form"> <i class="fa fa-pencil prefix"></i> <textarea type="text" id="description" name="description" class="md-textarea"></textarea> <label for="trip_description">Description text</label> </div> </div> . . . <div id="add-form">Some Text</div> . . . <script type="text/javascript"> $('#add-form-button').click(function (){ $.ajax({ type: 'GET', url: '/Ajax/Trips/AddForm', dataType: 'html', success: function (data) { var rep = JSON.parse(data); if (rep.code == 200) { $('#add-form').html(rep.html); } }, error: function (xhr) { console.log(" An error occured while loading via Ajax: " + xhr.status + " " + xhr.statusText); } }); }); </script> ------------------------ The html variable what i send back: html=' some other html... <div class="md-form"> <div class="md-form"> <!--<i class="fa fa-tag prefix"></i>--> <input id="create-region-title" type="text" placeholder="Enter a title for your region"> <label for="create-region-title">Name for your region</label> </div> </div> <div class="col-md-6"> <div class="md-form"> <i class="fa fa-calendar-o prefix"></i> <input placeholder="Selected date" type="text" id="start_date" name="start_date" class="form-control date-picker"> <label for="start_date">Choose a start date...</label> </div> </div> some other html... <script type="text/javascript"> $('.date-picker').pickadate(); </script> '; I have now a simmilar problem also with an datepicker... the datepicker is not shown up right until the first opening of it... The error shown in the console: TypeError: $(...).pickadate is not a function[Weitere Informationen]

Kamil Paciepnik free answered 7 years ago

Hi grafjakob1, I can't recreate your problem. Could you please share your code? Regards

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.


Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No