Add Nested repeater dynamically - javascript

I have a form where user can add multiple questions using repeater and inside the question the user can add multiple input option. As the question types are many so I'm fetching questions options through ajax and rendering it under the question.
Now when the question option are rendered through ajax i call, this is the html response
<div class="inner-repeater">
<div data-repeater-list="inner-list">
<div data-repeater-item>
<div class="form-group">
<label>Dropdown Answer</label>
<input type="text" name="dropwdown[]"
placeholder="Member will be able to choose one option"
class="form-control question_answer">
</div>
<a href="javascript:void(0);" data-repeater-delete>Remove Dropdown option</a>
</div>
</div>
<div class="form-group">
<div class="col p-0">
<button class="btn btn-primary" data-repeater-create type="button"><i
class="os-icon os-icon-folder-plus"></i>
Add Dropdown option
</button>
</div>
</div>
</div>
<script>
$(".repeater-a").repeater({
repeaters: [{
// (Required)
// Specify the jQuery selector for this nested repeater
selector: '.inner-repeater'
}],
});
</script>
I append this code under the question. due to this solution plugin is being initialized again and then if i click on add button the whole question is repeated again with current dropdown options.
Is there a way to dynamically add the inner repeater and initialize it without effecting the main repeater
URL - https://github.com/DubFriend/jquery.repeater/

Related

Submit form after search button is pressed using bootstrap

<div class="container">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span id="search_concept">Filter</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>electronics</li>
<li>movies</li>
<li class="divider"></li>
<li>All</li>
</ul>
</div>
<form method="POST" name="form" action="#">
<input type="hidden" name="search_param" value="all" id="search_param">
<input type="text" class="form-control" name="x" id="query" placeholder="Search term...">
<span class="input-group-btn">
<button class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</form>
</div>
</div>
</div>
</div>
ISSUE
Everytime I press Go button; I redirect to same page; which I want however by drop down acts funky; like it doesn't replace the 'filter' button with appropriate choosen filter inside dropdown-menu when after the form gets submitted. Here's the code for that. However before I press go button it works as expected. What could be happening?
<script>
$(document).ready(function(e){
$('.search-panel .dropdown-menu').find('a').click(function(e) {
e.preventDefault();
var param = $(this).attr("href").replace("#","");
var concept = $(this).text();
$('.search-panel span#search_concept').text(concept);
$('.input-group #search_param').val(param);
});
});
</script>
JS FIDDLE: https://jsfiddle.net/0e37tvyx/
There is nothing wrong in this. Your fiddle code works fine for all UI change operations. But because your form supports POST method, all your form parameters are submitted as POST request. You have three possible options (may be more than that too) to preserve the state of last chosen filters:
Use ajax request instead of form submit with entire page refresh. In this way you will have to add content from server response in your page; that is search results.
If your content is generating dynamically. I mean to say you are using PHP / JSP / ASP / Any Other Templating Library, you can use that, to update the HTML code based upon the search request, i.e. search_param request param.
The other way is use cookies. When user changes the option in front end preserve the filter option search_param in cookies. And on ready state of document; read those saved cookies if exists or fallback to default option all if not already stored in cookies.
Check out the fiddle for cookie based implementation. Not that I have added cookies plugin of jQuery.
https://jsfiddle.net/ksbora/3w6k171f/2
Note: Cookies has size limitations too and cross site origination restrictions. So, be careful which option you choose.

How to put form validation in angularjs

I have form like below,
<div ng-if="vm.settingsObj.others.name === 'Course Specialization'">
<div class="form-group">
<div class="col-xs-12" ng-repeat="specialization in vm.settingsObj.course_specialization">
<div class="row">
<div class="form-group col-sm-8" >
<input name="course_specialization{{$index}}" class="form-control" placeholder="Course Specialization" ng-model="specialization.value" >
</div>
<div class="form-group col-sm-4">
<button ng-click="vm.removeStatus('course_specialization',$index)" class="btn btn-danger">Remove</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<button class="btn btn-blue" ng-click="vm.addStatus('course_specialization')" >ADD</button>
</div>
</div>
Here i am incrementing the input field when i click on 'Add' button but when i leave input fields as empty and click on save it is getting saved.So what i need is form validation when my field is empty.Can anyone please help me.Thanks.
You have to wrap all inputs in a single form tag so that you can use angular form validation. Angular provides a well set of validations using classes and form controller and you should go for that. For more information you can find a reference from below links:
link one
or for a overview you can follow
link two

How can I clear fields after submit?

I'm trying to reset the values of the fields after sending the data. Does anyone have a hint how can I clear the fields using javascript?
<div class="form-group">
<label>Código da Matéria</label>
<input required class="form-control" type="text" name="codigoMateria"/>
</div>
<div class="form-group">
<label>Nome</label>
<input required class="form-control" type="text" name="nome"/>
</div>
</div>
<div class="row text-left">
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-primary btn-block">Salvar</button>
Like Jaromanda said there is a reset method for form elements.
To use it you will need to already have a correct form. Then you’re talking about sending the data. For this you need a submit button.
After this to reset your content you can bind the submit event with a function which use the reset method for your form.
here is a fiddle: https://jsfiddle.net/r56nvn51/1/
If you use the input element with the submit type attribute it will send the data and the reset the page which resets the inputs.
Aside from doing that you will need to add some script.
And you do not need the type in your button element.

Creating boootstrap panels based on the value given in text field

I've a simple bootstrap text field for entering ticket quantity. When I enter ticket quantity as 2, then I want two bootstrap panels having a form created automatically. If the value is 3, then 3 bootstrap panels having a form are created automatically. How can I do it?
JsFiddle link: https://jsfiddle.net/gcxxehwf/
Html code:
<div class="col-md-12 col-xs-12">
<div class="field">
<label for="price">Ticket quantity:</label>
<input type="number" name="tquantity" value="" class="form-control" id="tquantity">
</div>
</div>
<div class="col-md-8 col-xs-12" id="participantpanel"></div>
By using AngularJS it would be much easier than with the jQuery append method. Just use the ng-repeat directive and repeat the panel as often the value is.

How to refetch a scope value in view using angularjs

First of all sorry if my title doesn't quite explain my problem. I have a form which is create a set of question dynamically. In the code below I use ng-repeat="opt in q.options" and I have a button which add a new option.
My view code
<div>
<label for="">Options: </label>
<a ng-click="addOption($event, $index)">
<i class="icon-plus-sign icon-large"></i> Add option
</a><br /><br />
<div ng-repeat="opt in q.options">
<label><span>{{opt.id}}.</span></label>
<input type="text" ng-model="opt.text" placeholder="Add new possible answer here.">
<a ng-click="q.options.splice($index,1)"><i class="icon-remove-sign icon-large"></i></a>
</div>
</div>
<div>
<label for="required_credit">Answer: </label>
<select id="city" ng-options="c for c in options">
</select>
<!-- <ul>
<li ng-repeat="opt in q.options">{{opt.id}}</li>
</ul> -->
What I want is to reuse q.options in my select tags but it the problem is it doesn't populate. I've used ul li tags then ng-repeat="q.options" and it worked but I want to use it using the select tags.
PS: The reason why I want to use the same model is to simply get the appended data which I inserted dynamically.
For instance:
I have 2 input buttons and I add a new input button
Since I'm using the same model my select option would then be updated then it would have 3 options as well.
Accordingly the ngSelect documentation, ng-model is a required parameter for ngSelect. I believe, you want to store your selected value somewhere ;)

Categories

Resources