This is my part of html(ejs) file and I have multiple card forms(such as ID =myContent1, myContent2, myContetn3 ...) they receive ajax data when the i class=icon... is toggled. when the function(toggle) is activated, received ajax data mapping with myContent No. (ex. received ajax data ID 1 with myContent1 and 2 for myContent2 ... so on).
What I want to do is that, ajax data should be loaded when my html file is executed and automatically mapping with my card forms(based on card Id no)
need your kind help.
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="cardHeader3" style="visibility: hidden;">unSaved</div>
<div class="card-body">
<i class="icon-plus icons font-2xl" id="icon3" style="font-size: 5rem !important;margin-left: 46%;cursor:pointer;" onclick="toggler('myContent_3');"></i>
<div id="myContent_3" class="card-title" style="display: none;">
<form action="" method="post">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">sequence</span>
</div>
<input type="text" id="notiSeq_3" name="notiSeq" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">title</span>
</div>
<input type="text" id="title_3" name="title" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-tumblr"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Link</span>
</div>
<input type="text" id="link_3" name="link" class="form-control" value="">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-hand-o-left"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">exposureTime</span>
</div>
<input type="text" id="notiTime_3" name="notiTime" class="form-control" value="" readonly style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="cui-calendar"></i>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">Urgency</span>
</div>
<select class="form-control" id="viewYn_3" defaultValue="N">
<option value="N">N</option>
<option value="Y">Y</option>
</select>
<div class="input-group-append">
<span class="input-group-text">
<i class="icon-eye icons"></i>
</span>
</div>
</div>
</div>
<div class="form-group form-actions">
<button type="button" class="btn btn-primary" onclick ="save('3')">Save</button>
<button type="button" class="btn btn-secondary" onclick="del('3')">Delete</button>
</div>
</form>
</div>
</div>
</div>
</div>
And This is my part of js file. it currently works with when the card forms are toggled.
function toggler(divId) {
var tempId = divId.slice(-1);
var x = document.getElementById("icon" + tempId);
var y = document.getElementById("cardHeader" + tempId);
$.ajax({
url: GW_URL+'/myRestAPI/get/'+tempId,
type:'get',
contentType: "application/json",
dataType : "json",
cache: false,
success : function(data){
$("#notiSeq_" + tempId).val(data.exposureNo);
$("#title_" + tempId).val(data.title);
$("#link_" + tempId).val(data.link);
$("#notiTime_" + tempId).val(data.exposureTime + " - " + data.exposureTime2);
$("#viewYn_" + tempId).val(data.urgency);
},
error : function(jqXHR, textStatus, errorThrown){
console.log(jqXHR.responseText);
}
});
Related
I'm trying to clear my form every time I click publish:
$scope.product = {};
$scope.upload = function(user) {
var formData = new FormData;
$scope.product.owner = user;
for (key in $scope.product) {
formData.append(key, $scope.product[key]);
//console.log(key, ".........");
//console.log($scope.product[key]);
};
//getting the file
var file = $('#file')[0].files[0];
formData.append('image', file);
$http.post('http://localhost:3000/products', formData, {
transformRequest: angular.identity,
headers: {
'Content-Type': undefined
}
}).then(function(res) {
$scope.item = res.data;
console.log($scope.item.image);
products.displayuserlist.push({
owner: $scope.product.owner,
car: $scope.product.newCar,
//seaters: 5,
price: $scope.product.newPrice,
//contact: 38880000,
area: $scope.product.businessArea,
image: $scope.item.image
});
$scope.product = null;
});
};
All the input fill has been clear except for
<form ng-submit="upload(currentUser())">
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Car</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Perodua Myvi" class="form-control" ng-model="product.newCar" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Price(RM) per day</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="80" class="form-control" ng-model="product.newPrice" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Business Area</label>
</div>
<div class="col-xs-5">
<input type="text" placeholder="Universiti Malaysia Sabah" class="form-control" ng-model="product.businessArea" required>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
<label>Insert Car Image</label>
<br>
</div>
<div class="col-xs-5">
<!--<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Image
</button>-->
<input type="file" id="file" ng-model="product.postimage" />
</div>
<div class="col-xs-5"></div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-xs-2">
</div>
<div class="col-xs-5">
<button type="submit" class="btn btn-primary btn-sm pull-right">
<span class="glyphicon glyphicon-globe"></span> Publish
</button>
</div>
<div class="col-xs-5"></div>
</div>
</div>
<br>
<br>
</form>
I have tried to use angular.element("input[type='file']").val(null); and $setPristine() but it does not work. How do I do this?
You can try this
$scope.product.postimage = null;
$('#file').val('');
I created a grid using AngularJS Datatables and added two more buttons "edit" and "delete" in the last column.
How does the grid/table is rendered?
HTML
<!-- Required CSS and JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.0/plugins/bootstrap/datatables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.dataTables.min.css">
<!-- AnglarJS, AngularJS Datatables and related plugins -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.1/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.4.2/angular-ui-router.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.0/angular-datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.0/plugins/bootstrap/angular-datatables.bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.0/plugins/buttons/angular-datatables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-datatables/0.6.0/plugins/columnfilter/angular-datatables.columnfilter.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.flash.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
<!-- Table/grid -->
<table datatable dt-options="concessoes.standardOptions" dt-columns="concessoes.standardColumns" dt-instance="concessoes.dtInstance" class="table table-condensed table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th data-hide="phone">ID</th>
<th data-class="expand"> Processo</th>
<th data-class="expand"> Objeto</th>
<th data-hide="phone"><i class="fa fa-fw fa-map-marker txt-color-blue hidden-md hidden-sm hidden-xs"></i> UF</th>
<th>Região</th>
<th data-hide="phone,tablet"> Macrossegmento</th>
<th data-hide="expand"> </th>
</tr>
</thead>
</table>
JavaScript/ "ConcessoesCtrl"
var vm = this;
vm.dtInstance = {};
vm.standardOptions = DTOptionsBuilder
// This is from where the data is coming
.fromSource('/api/BasesDados/Concessoes/concessoes.php')
.withOption('scrollX', '100%')
.withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
.withBootstrap()
.withButtons([
{extend: 'colvis', text: 'Vizualização'},
{extend: 'copy', text: 'Copiar'},
{extend: 'print', text: 'Imprimir'},
{extend: 'excel', text: 'MS Excel'},
{
text: 'Incluir projeto',
key: '1',
action: function (e, dt, node, config) {
// This is the function to add a project
$scope.adicionarProjeto();
}
}
]);
// Conlunas que serão mostradas
vm.standardColumns = [
DTColumnBuilder.newColumn('id').notVisible(),
DTColumnBuilder.newColumn('processo'),
DTColumnBuilder.newColumn('objeto'),
DTColumnBuilder.newColumn('uf'),
DTColumnBuilder.newColumn('regiao'),
DTColumnBuilder.newColumn('macro'),
DTColumnBuilder.newColumn(null).withTitle('Ações').notSortable().renderWith(botoesDeAcao)
];
// Action buttons: edit and delete buttons
function botoesDeAcao(data, type, full, meta) {
vm.projeto[data.id] = data;
return '<button class="btn btn-info btn-xs" ng-click="editarProjeto(' + data.id + ')">' +
' <i class="fa fa-edit"></i>' +
'</button> ' +
'<button class="btn btn-danger btn-xs" ng-click="excluirProjeto(' + data.id + ')">' +
' <i class="fa fa-trash-o"></i>' +
'</button>';
}
// This is the function to edit the data
$scope.editarProjeto = function (projetoId) {
// It calls a directive which renders the edititng form
var formularioDeEdicao = $compile("<div formulario-do-projeto></div>")($scope);
$("article#render-form").html(formularioDeEdicao);
// TODO: Editar os dados, chamar o servidor para fazer as alterações, então, dar um refresh na tabela
vm.dtInstance.reloadData();
};
How does the grid look like?
When I click the edit button (in blue) a directive is called and then a form for editing the data is opened.
HTML Template
<form id="order-form" class="smart-form" novalidate="novalidate" enctype="multipart/form-data">
<header>
<button type="submit" class="btn btn-default btn-lg">
<i class='fa fa-arrow-circle-left'></i>
</button>
<b class="text-warning">Concessão & PPPs</b>
</header>
<fieldset>
<legend><strong>Projeto</strong></legend>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-circle"></i>
<input type="text" name="NomeDoPrograma" placeholder="Nome do programa" ng-model="NomeDoPrograma">
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-bars"></i>
<input type="text" name="NomeDoProcesso" placeholder="Nome do processo" ng-model="NomeDoProcesso">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-bullseye"></i>
<input type="text" name="Objeto" placeholder="Objeto" ng-model="Objeto">
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-usd"></i>
<input type="text" name="InvestimentoEstimado" placeholder="Investimento estimado" ng-model="InvestimentoEstimado">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-tree"></i>
<select type="text" name="Natureza" placeholder="Natureza" ng-model="Natureza">
<option value="">Natureza</option>
<option value="Concessão">Concessão</option>
<option value="PMI">PMI</option>
<option value="PPP">PPP</option>
</select>
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-circle-o"></i>
<select type="text" name="Esfera" placeholder="Esfera" ng-model="Esfera">
<option value="">Esfera</option>
<option valur="Estadual">Estadual</option>
<option value="Federal">Federal</option>
<option value="Municipal">Municipal</option>
</select>
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-map-marker"></i>
<select name="Uf" ng-model="Uf">
<option value="">Estado</option>
<option ng-repeat="estado in estados" value="{{estado}}">{{estado}}<option>
</select>
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-map-o"></i>
<select name="Regiao" placeholder="Região" ng-model="Regiao">
<option value="">Região</option>
<option value="Centro-oeste">Centro-oeste</option>
<option value="Nordeste">Nordeste</option>
<option value="Norte">Norte</option>
<option value="Sudeste">Sudeste</option>
<option value="Sul">Sul</option>
</select>
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-industry"></i>
<select name="Macrossegmento" placeholder="Macrossegmento" ng-model="Macrossegmento">
<option value="">Macrossegmento</option>
<option value="Saneamento básico">Saneamento básico</option>
<option value="Infraestrutura urbana">Infraestrutura urbana</option>
<option value="Energia">Energia</option>
<option value="Multissetorial">Multissetorial</option>
<option value="Mobilidade urbana">Mobilidade urbana</option>
<option value="Logística">Logística</option>
<option value="Construção naval">Construção naval</option>
</select>
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-life-ring"></i>
<input type="text" name="Modalidade" placeholder="Modalidade" ng-model="Modalidade">
</label>
</section>
</div>
</fieldset>
<fieldset>
<legend><strong>Edital & licitação</strong></legend>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-trophy"></i>
<input type="text" name="VencedorDaLicitacao" placeholder="Vencedor da licitação" ng-model="VencedorDaLicitacao">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-calendar"></i>
<input type="text" name="PrevisaoDoEdital" placeholder="Previsão do edital" ng-model="PrevisaoDoEdital">
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-calendar-minus-o"></i>
<input type="text" name="PublicacaoDoEdital" placeholder="Publicação do edital" ng-model="PublicacaoDoEdital">
</label>
</section>
</div>
</fieldset>
<fieldset>
<legend><strong>Controle</strong></legend>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-link"></i>
<input type="text" name="LinkDoProcesso" placeholder="Link do processo" ng-model="LinkDoProcesso">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-compass"></i>
<input type="text" name="FonteDaConsulta" placeholder="Fonte da consulta" ng-model="FonteDaConsulta">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-user-circle"></i>
<input type="text" name="Validador" placeholder="Validador" ng-model="Validador">
</label>
</section>
</div>
<div class="row">
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-list-ul"></i>
<input type="text" name="SituacaoDoProcesso" placeholder="Situação do processo" ng-model="SituacaoDoProcesso">
</label>
</section>
<section class="col col-6">
<label class="input"> <i class="icon-append fa fa-certificate"></i>
<input type="text" name="StatusDaOperacao" placeholder="Status da operação" ng-model="StatusDaOperacao">
</label>
</section>
</div>
<section>
<label class="checkbox">
<input type="checkbox" name="Validacao" ng-model="Validacao">
<i></i>Validar as informações acima</label>
</section>
</fieldset>
<fieldset>
<legend><strong>Anexos</strong></legend>
<section>
<div class="input input-file">
<span class="button">
<input type="file" name="Arquivo" onchange="this.parentNode.nextSibling.value = this.value" ng-model="Arquivo">Procurar arquivos
</span>
<input type="text" placeholder="Incluir arquivos" readonly="">
</div>
</section>
</fieldset>
<fieldset>
<legend>
<strong>Histórico</strong>
</legend>
<section>
<label class="textarea"> <i class="icon-append fa fa-history"></i>
<textarea rows="5" name="Observacoes" placeholder="Observações sobre o projeto e outras informaçoes importantes" ng-model="Observacoes"></textarea>
</label>
</section>
</fieldset>
<footer>
<button type="submit" class="btn btn-danger">
Excluir projeto <i class='fa fa-trash'></i>
</button>
<button type="submit" class="btn btn-default">
Cancelar <i class='fa fa-times'></i>
</button>
<button type="submit" class="btn btn-default">
Salvar & Voltar <i class='fa fa-save'></i>
</button>
<button type="submit" class="btn btn-primary" ng-click="salvarProjeto()">
Salvar <i class="fa fa-send-o"></i>
</button>
</footer>
</form>
JavaScript/ "formularioDoProjeto"
.directive('formularioDoProjeto', ['FormData', function (FormData) {
return {
restrict: "AE",
templateUrl: "app/database/concessoes/formulario-do-projeto.html"
};
}])
My doubt is how do I create a button to go back to the grid after aditing tha data from a directive that is rendered in the same page as the grid?
How does the form directive looks like?
When I click the edit button the function editarProjeto() is called and it renders the directive to the DOM using the .html() method:
$scope.editarProjeto = function (projetoId) {
var formularioDeInclusao = $compile("<div formulario-do-projeto></div>")($scope);
$("article#render-form").html(formularioDeInclusao);
//vm.dtInstance.reloadData();
};
Now, what is the approach to add a "back to the grid" button in the form such that the grid keeps its latest state (when the user uses a filter and calls the edit form, she/he will find the form the same way it was left before calling the edit form when she/he presses the "back" button**?**
Sorry for any mistake when asking the question. If you downvote this question, please, let me know why, so I can correct the issues.
Found a solution:
HTML
<table ng-show="!editing">...</table>
<project-form ng-hide="!editing"></project-form>
JavaScript
.controller('ProjectCtrl', function($scope){
// It starts as false so the grid/table is shown first
$scope.editing = false;
$scope.backToGrid = function(){
$scope.editing = false;
};
// When I want to edit the project I set the $scope.editing to true, so the form is shown
$scope.editProject = function(projectId){
$scope.editing = true;
// The rest of the steps goes here
};
});
I have the following code snippet:
(document)
.on("submit", ".edit-employee-form", function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr("action"),
method: $(this).attr("method"),
dataType: "html",
context: this,
data: $(this).serialize(),
success: function (response) {
p = $(this).parent();
p.prevAll('#first-name').html($(this).find("#first_name").val());
p.prevAll('#last-name').html($(this).find("#last_name").val());
p.prevAll('#email').html($(this).find("#email").val());
p.prevAll('#remain_case').html($(this).find("#remain_case").val());
$(this).parent().hide();
console.log('yay');
},
error: function (response, error) {
console.log("ERROR");
console.log(response);
console.log(error);
}
});
}
);
What it does is it submits a form to edit a particular employee (a list is displayed on the page) and then updates the html to reflect the changes the user submitted.
My problem is that some of the employees are also added via ajax calls, so their corresponding list elements are added dynamically to the html. I don't seem to be able to access their divs with id first-name, last-name, email etc. Any advice on how I can select divs which have been added dynamically?
I'm sorry for this being an image but I don't seem to be able to copy off the chrome console. The second element is added dynamically.
<div class="container firm-employees">
<div class="row">
<div class="col-lg-3 table-header">Name</div>
<div class="col-lg-2 table-header">Surname</div>
<div class="col-lg-3 table-header">E-Mail</div>
<div class="col-lg-1 table-header">Cases</div>
<div class="col-lg-3 table-header">Options</div>
</div>
<div class="row manage-user-row">
<div class="col-lg-3" id="first-name">Gray</div>
<div class="col-lg-2" id="last-name">Sawyer</div>
<div class="col-lg-3" id="email">masakotypu#hotmail.com</div>
<div class="col-lg-1" id="remain_case">1</div>
<div class="col-lg-3">
<button type="button" id="205" class="btn btn-default btn-xs edit-user-button">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
Edit User
</button>
<a href="edit/22">
<button type="button" class="btn btn-default btn-xs">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
Edit Secretaries
</button>
</a>
</div>
<div id="ed-205" class="edit-employee-box">
<form id="ef-205" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/205">
<div class="row">
<div class="col-lg-3">
<label for="first_name" class="form_label">First Name</label>
<input type="text" name="first_name" value="Gray" id="first_name" class="form-control">
</div>
<div class="col-lg-3">
<label for="last_name" class="form_label">Last Name</label>
<input type="text" name="last_name" value="Sawyer" id="last_name" class="form-control">
</div>
<div class="col-lg-3">
<label for="email" class="form_label">E-Mail</label>
<input type="text" name="email" value="masakotypu#hotmail.com" id="email" class="form-control">
</div>
<div class="col-lg-3">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<label for="phone" class="form_label">Phone Number</label>
<input type="text" name="phone" value="+899-67-1063253" id="phone" class="form-control">
</div>
<div class="col-lg-3">
<label for="remain_case" class="form_label">Remaining Cases</label>
<input type="text" name="remain_case" value="1" id="remain_case" class="form-control">
</div>
<div class="col-lg-3">
</div>
<div class="col-lg-3">
</div>
</div>
<div class="row">
<div class="col-lg-3">
<br>
<input type="submit" class="btn btn-success btn-md" value="Update User">
<a href="edit/22">
<button type="button" class="btn btn-info btn-md">
Reset Password
</button>
</a>
</div>
<div class="col-gl-3">
</div>
</div>
</form>
</div>
</div>
<div class="row manage-case-row"><div class="col-lg-3" id="first-name">Evan</div><div class="col-lg-2" id="last-name">Thompson</div><div class="col-lg-3" id="email">pubazof#hotmail.com</div><div class="col-lg-1" id="remain_case">2</div><div class="col-lg-3"><button type="button" id="206" class="btn btn-default btn-xs edit-user-button"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit User</button> <button type="button" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> Edit Secretaries</button></div></div><div class="edit-employee-box" id="ed-206"><form id="ef-206" class="edit-employee-form" method="get" action="http://127.0.0.1/tlaf/forms/index.php/app_user/update/206"><div class="row"><div class="col-lg-3"><label for="first_name" class="form_label">First Name</label><input type="text" name="first_name" value="Evan" id="first_name" class="form-control"></div><div class="col-lg-3"><label for="last_name" class="form_label">Last Name</label><input type="text" name="last_name" value="Thompson" id="last_name" class="form-control"></div><div class="col-lg-3"><label for="email" class="form_label">E-Mail</label><input type="text" name="email" value="pubazof#hotmail.com" id="email" class="form-control"></div><div class="col-lg-3"> </div></div><div class="row"><div class="col-lg-3"><label for="phone" class="form_label">Phone Number</label><input type="text" name="phone" value="+927-10-4155477" id="phone" class="form-control"></div><div class="col-lg-3"><label for="remain_case" class="form_label">Remaining Cases</label><input type="text" name="remain_case" value="2" id="remain_case" class="form-control"></div><div class="col-lg-3"></div><div class="col-lg-3"> </div></div><div class="row"><div class="col-lg-3"><br><input type="submit" class="btn btn-success btn-md" value="Update User"><button type="button" class="btn btn-info btn-md">Reset Password</button></div><div class="col-gl-3"></div></div></form></div></div>
</div>
Your code should be sure the order of finished ajax calls because it's too fast to follow with human eyes. If when appending ajax call is not completed, you cannot select those elements using even element id.
To do so, you should put ajax function calls in "success handler".
if Number one is success then Number two in the one's success handler, and Number three in two's success handler, and so on...
The simple solution is to use PROMISE to get all of ajax relative functions in order.
Please refer to the link : https://api.jquery.com/promise/
To check the element is successfully appended in time, check out the console with 'console.info or console.log" or something like that. if it's length is 0, then the appending ajax call is not yet completed.
I have a Jquery function to activate and deactivate forms based off the current form. When I click on the submit button I can get the value of the activeform on the page load if I have it set to ID, but nothing off the second form. When I set it to class it doesn't seem to load any at all and I get no alert back when I click the submit. My jquery is as such:
<script>
$(document).ready(function() {
var activeform = "register";
$("#loginlink").click(function(e) {
var activeform = "login";
$("#login").show("blind", 1000);
$("#register").hide("blind", 1000);
})
$("#registerlink").click(function(e) {
var activeform = "register";
$("#register").show("blind", 1000);
$("#login").hide("blind", 1000);
})
$(".submit").click(function(e) {
e.preventDefault();
alert(activeform);
});
});
</script>
And the code for my forms:
<p>
<form id="register">
<div class='row'>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for username><i class="fa fa-user"></i> Username</label>
<input class="form-control" type="text" id="username"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for password><i class="fa fa-key"></i> Password</label>
<input class="form-control" type="password" id="password"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for email><i class="fa fa-envelope"></i> Email</label>
<input class="form-control" type="text" id="email"></div>
<div class="col-xs-4"><i class="fa fa-info-circle" title="You may be notified of delayed or denied payments." data-toggle="tooltip"></i></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for submit><i class="fa fa-info" data-toggle="tooltip" title="By Registering you Agree to be Bound by our Terms of Service"></i></label>
<button type="button" class="btn btn-success form-control" class="submit">Register</button></div>
<div class="col-xs-4"></div>
</div>
</form>
<form id="login" style="display:none;">
<div class='row'>
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for username><i class="fa fa-user"></i> Username</label>
<input class="form-control" type="text" id="username"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<label for password><i class="fa fa-key"></i> Password</label>
<input class="form-control" type="password" id="password"></div>
<div class="col-xs-4"></div>
</div>
<div class="row">
<div class="col-xs-4"></div>
<div class="col-xs-4">
<br />
<button type="button" class="btn btn-success form-control" class="submit">Login</button></div>
<div class="col-xs-4"></div>
</div>
</form>
</p>
Login | Register
Last but not least. Here's a fiddle. :)
https://jsfiddle.net/rm6j5da9/2/
You were recreating the activeform variable every time in the click event. remove the var keyword. you already declared that as a global variable inside the document ready scope.
$(function(){
var activeform = "register";
$("#loginlink").click(function(e) {
activeform = "login";
$("#login").show("blind", 1000);
$("#register").hide("blind", 1000);
});
$("#registerlink").click(function(e) {
activeform = "register";
$("#register").show("blind", 1000);
$("#login").hide("blind", 1000);
});
$(".submit").click(function(e) {
e.preventDefault();
alert(activeform);
});
});
Also you need to make sure that you have the submit css class on both the login and register buttons
Here is a working sample
<form novalidate class="form-horizontal">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="text-capitalize">
</div>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputUsluga3" class="col-sm-2 control-label">Usluga</label>
<div class="col-sm-6">
<select id="inputUsluga3" class="form-control">
<option>Kombi</option>
<option>Hotel</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputOdDatum3" class="col-sm-2 control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i>Od datuma</label>
<div class="col-sm-6">
<input id="inputOdDatum3" type="text" class="form-control" ng-model="fromDate" data-max-date="{{untilDate}}" placeholder="Početak perioda" bs-datepicker data-date-format="dd.MM.yyyy" />
</div>
</div>
<div class="form-group">
<label for="inputDoDatum3" class="col-sm-2 control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i>Do datuma</label>
<div class="col-sm-6">
<input id="inputDoDatum3" type="text" class="form-control" ng-model="untilDate" data-min-date="{{fromDate}}" placeholder="Kraj perioda" bs-datepicker data-date-format="dd.MM.yyyy" />
</div>
</div>
<div class="form-group">
<label for="inputStanica" class="col-sm-2 control-label">Stanica</label>
<div class="col-sm-6">
<select id="inputStanica" ng-model="airport" class="form-control">
<option>PUY</option>
<option>ZAG</option>
<option>SPL</option>
<option>DUB</option>
</select>
</div>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" ng-click="getData()">Dohvati podatke</button>
</div>
</div>
</div>
</form>
MY Http request looks like this
$scope.getData = function() {
$http.get("/Services/JoppdService.svc/getKombiImport/" + $scope.fromDate + "/" + $scope.untilDate + "/" + $scope.airport)
.success(function (response) {
$scope.education = response;
});
}
After submiting i have request in console that looks like this
http://localhost:8080/Services/JoppdService.svc/getKombiImport/undefined/undefined/undefined
dateFrom, dateUntil and airport is not binded. Where is problem ?
Use ng-submit, bind the required parameters into an object obj, like obj.fromDate, obj.untilDate, and obj.airport in the form. Use button type as submit
Your html would transform into,
<form novalidate class="form-horizontal" ng-submit="getData(obj)">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="text-capitalize">
</div>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputUsluga3" class="col-sm-2 control-label">Usluga</label>
<div class="col-sm-6">
<select id="inputUsluga3" class="form-control">
<option>Kombi</option>
<option>Hotel</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputOdDatum3" class="col-sm-2 control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i>Od datuma</label>
<div class="col-sm-6">
<input id="inputOdDatum3" type="text" class="form-control" ng-model="obj.fromDate" data-max-date="{{obj.formDate}}" placeholder="Početak perioda" bs-datepicker data-date-format="dd.MM.yyyy" />
</div>
</div>
<div class="form-group">
<label for="inputDoDatum3" class="col-sm-2 control-label"><i class="fa fa-calendar"></i> <i class="fa fa-arrows-h"></i> <i class="fa fa-calendar"></i>Do datuma</label>
<div class="col-sm-6">
<input id="inputDoDatum3" type="text" class="form-control" ng-model="obj.untilDate" data-min-date="{{obj.untilDate}}" placeholder="Kraj perioda" bs-datepicker data-date-format="dd.MM.yyyy" />
</div>
</div>
<div class="form-group">
<label for="inputStanica" class="col-sm-2 control-label">Stanica</label>
<div class="col-sm-6">
<select id="inputStanica" ng-model="obj.airport" class="form-control">
<option>PUY</option>
<option>ZAG</option>
<option>SPL</option>
<option>DUB</option>
</select>
</div>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Dohvati podatke</button>
</div>
</div>
</div>
</form>
Pass obj in ng-submit method getData() which now looks like, getData(obj)
You got to convert the fromDate and untilDate into String. Have a look at this. Replace convertToString() below with the solution mentioned in that link.
Then in your controller getData() would look like,
$scope.getData = function(obj) {
var fromDate = convertToString(obj.fromDate);
var untilDate = convertToString(obj.untilDate);
var airport = obj.airport;
$http.get("/Services/JoppdService.svc/getKombiImport/"+fromDate+"/"+untilDate+"/"+.airport)
.success(function (response) {
$scope.education = response;
});
}
Also, do not have empty spaces (" ") while forming URLs.
If you want to initialize anything, use ng-init like this
You would need to wrap your content inside if you have not already
Also you should use for date inputs
You must use ng-init to initialize these values like ng-init="fromDate = 0".
You could also just declare these variables at the begining of your controller such as $scope.fromDate = 0;