I have a search that works with ajax. If the user clicks on one of the seach results, he gets on a new page. Now, if he klicks back on the browser UI, he gets back to the search. However, the value from the input is not getting saved and the search is empty. I would like to have keep the value.
The search is programmed in vue.js:
<template>
<div>
<div class="row">
<div class="col-12">
<div class="card no-shadow-card mb-2">
<div class="card-header primary-color white-text">
<div class="d-flex justify-content-between">
<span>Filter</span>
<div>
<a href="javascript:void(0)" class="card-toggle-body-visibility white-text"><i
class="fa fa-chevron-up rotated-icon" aria-hidden="true"></i></a>
</div>
</div>
</div>
<div class="card-body">
<div class="form-row mb-4">
<div class="col-md-6 mb-1">
<!-- First name -->
<input type="text" id="vacancieName" data-reset="filter"
class="form-control" placeholder="Name der Stellenanzeige" v-model="name">
</div>
</div>
<div class="form-row">
<div class="col-md-6">
<select class="md-form mdb-select"
name=""
searchable="Suchen"
v-model="company">
<option value="">Unternehmen</option>
<option v-for="ownCompany in ownCompanies" :value="ownCompany.id" v-text="ownCompany.title"></option>
</select>
<button type="button" class="btn-save btn btn-primary btn-sm">Ok</button>
</div>
<div class="col-md-6">
<select class="md-form mdb-select"
name=""
searchable="Suchen"
v-model="job">
<option value="" disabled>Beruf Auswählen</option>
<option v-for="avalibleJob in avalibleJobs" :value="avalibleJob.id" v-text="avalibleJob.name"></option>
</select>
<button type="button" class="btn-save btn btn-primary btn-sm">Ok</button>
</div>
</div>
<div class="col-12 float-right">
<button #click.prevent="getVacancies" type="button" class="btn btn-sm btn-light-blue">
Suchen
</button>
<button #click="resetFilter" type="button" class="btn btn-sm btn-unique">
Zurücksetzen
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<vacancie-index-result-componment v-for="vacancie in vacancies" v-bind:vacancie="vacancie"
:key="vacancie.id"></vacancie-index-result-componment>
</div>
</div>
</template>
<script>
import VacancieIndexResultComponentComapany from './VacancieIndexResultComponentCompany.vue'
export default {
name: 'VacancieIndexComponentCompany',
components: {
'vacancie-index-result-componment': VacancieIndexResultComponentComapany,
},
data() {
return {
avalibleJobs: [],
ownCompanies: [],
vacancies: [],
name: '',
company: '',
job: ''
}
},
methods: {}//Some Axios methods to get the results
}
</script>
There are two ways to resolve your problems
Use dialog to handle your new page,above the
<body></body>or your root element ,it coast less code to resolve. it’s will hold the code
in a single component
Hard way or the best way whatever you say, is to use the vue-route system, use <keep-alive></keep-alive> tags to cache your components,
and you’ll see the value is still there.you can also see it in
dev-tools anyway.
Related
I'm developing an app in Spring Boot with JSP in frontend. I have the following problem:
I have a table with different rows. I can click a button to update every row if I want. When I click in one row and change some data all works fine. The problem is when I click in one row, close or save this modal and following I open another row and edit again. The modal is good but when I save, I receive 2 POST to update the row behind and the actually row.
I don't use nothing strange... Probably I need to "clean" the modal when I close or save?
One of my modals (this happends in all table with modal to update the row)
Html/JSP:
<!-- UPDATE DISP MODAL -->
<div id="updateDispModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form id="updateDispForm" class="needs-validation">
<div class="modal-header">
<div class="modal-title">
<h5 id="modalTitle">
<spring:message code="shares.displacement.update.btn" />
</h5>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="activityCenter" class="col-form-label"><spring:message code="shares.displacement.table.activity.center" /></label>
<select id="activityCenter" name="activityCenter" class="form-control" required>
<option disabled selected="selected">
<spring:message code="shares.displacement.table.activity.center" />
</option>
<c:forEach items="${teamLeaders}" var="teamLeader">
<option value="${teamLeader.userId}">
<spring:message code="${teamLeader.name} ${teamLeader.surnames}" />
</option>
</c:forEach>
</select>
</div>
</div>
<div class="col-sm-12 col-md-6">
<div class="form-group">
<label for="displacementDate" class="col-form-label"><spring:message code="shares.displacement.table.total.time" /></label>
<input id="displacementDate" name="displacementDate" type="datetime-local" class="form-control" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<label for="manualHours" class="col-form-label"><spring:message code="shares.displacement.total.time" /></label>
<input type="time" class="form-control" id="manualHours" name="manualHours">
</div>
<div class="col-sm-12 col-md-6">
<label for="roundTrip" class="col-form-label"><spring:message code="shares.displacement.round.trip" /></label>
<input type="checkbox" class="form-control" id="roundTrip" name="roundTrip" style="width: 20px">
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<label for="observations" class="col-form-label"><spring:message code="shares.displacement.observations" /></label>
<textarea id="observations" name="observations" class="form-control" rows="6"></textarea>
</div>
</div>
</div>
<input type="hidden" class="form-control" id="projectId" name="projectId">
</div>
<div class="modal-footer clearfix">
<div class="w-100">
<div class="float-left">
<button type="button" class="btn btn-sm" data-dismiss="modal"><spring:message code="cerrar" /></button>
</div>
<div class="float-right">
<button id="updateDispBtn" type="button" class="btn btn-sm btn-success"><spring:message code="save" /></button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- /CREATE MODAL -->
JavaScript:
$('#updateDispBtn').click(function () {
$.ajax({
type: "PUT",
url: "/shares/displacement/" + id,
data: $('#updateDispForm').serialize(),
success: function(msg) {
$('#dTableSignings').DataTable().ajax.reload();
showNotify(msg, 'success');
},
error: function(e) {
showNotify(e.responseText, 'danger');
}
});
$('#updateDispModal').modal('hide');
});
Finally, the user Swati help me to solve this problem. I need to unbind the button before clicking event: button onclick function firing twice
Thanks!
I'm trying to toggle the class of this on click, I tried this but it doesn't seem to work. Any ideas? I have included some HTML now so that it is more easily understood what is going on.
$('.play-with-friends').on('click', function(){
$('.flipper', this).toggleClass('flipped');
});
HTML:
<div class="flipper">
<div class="row game-cards">
<div class="container col-lg-6">
<canvas id="game-circles"></canvas>
</div>
<div class="col-lg-6 game-info">
<h6 class="text-center">{{AwayTeam}} # {{HomeTeam}}</h6>
<p class="text-center">{{MatchTime}}</p>
<form>
<div class="form-group text-center">
<label for="home-team">{{HomeTeam}} -2.5</label>
<input type="number" class="form-control text-center" placeholder="Home Team Bet">
</div>
<div class="form-group text-center">
<label for="away-team">{{AwayTeam}}</label>
<input type="number" class="form-control text-center" placeholder="Away Team Bet">
</div>
<button type="submit" class="btn btn-primary btn-block">Submit</button>
<button type="button" class="btn btn-secondary btn-block play-with-friends">Play With Friends</button>
</form>
</div>
</div>
</div>
So please change your code to select .flipper:
$('.play-with-friends').on('click', function(){
$('.flipper').toggleClass('flipped');
});
When you do $('.some-class', elem) you're saying you want to target .some-class that's a child of elem. That's not what your HTML is showing – you actually have .flipper way above at the top level. How about using a different method, like closest, which will find an ancestor with the selector you specify:
$('.play-with-friends').on('click', function() {
$(this).closest('.flipper').toggleClass('flipped');
});
I have different file inputs I want displayed once the previous one has been selected. At the moment I have
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="input-group inputMargBtm">
<input type="text" class="form-control" id="fileOneContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileOne" name="fileOne" class="fileGroup" accept=".jpeg,.jpg">
</span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="filePadd">
<div class="input-group">
<div id="hideDivTwo" class="hiddenDiv">
<input type="text" class="form-control" id="fileTwoContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileTwo" name="fileTwo" class="fileGroup" accept=".jpeg,.jpg" disabled="true">
</span>
</span>
</div>
</div>
</div>
</div>
</div>
But I also have a lot more hidden rows for up to 10 inputs. So I dont need to create new code for each input within my Javascript, I am trying to display things dynamically. Essentially, if I select a file, it should display the next file input.
At the moment I have this
$(".fileGroup").on('change',function(){
var id = $(this).attr('id');
if (id.length) {
$(this).parents('.row').nextSibling('.row').child('.hiddenDiv').css("display", "table-footer-group");
}
});
So I get the id of the changed fileGroup. I then attempt to get its parents row, then get the next row, and display its hidden div. At the moment this does not seem to work. What would be the best way to display the next input block?
Thanks
Try with this code:
$(".fileGroup").on('change',function(){
var $next_element = $(this).parents('.row').next('.row').find('input[type="file"]');
if ($next_element.length) {
$next_element.prop('disabled', false);
}
});
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="input-group inputMargBtm">
<input type="text" class="form-control" id="fileOneContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileOne" name="fileOne" class="fileGroup" accept=".jpeg,.jpg">
</span>
</span>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<div class="filePadd">
<div class="input-group">
<div id="hideDivTwo" class="hiddenDiv">
<input type="text" class="form-control" id="fileTwoContainer" readonly>
<span class="input-group-btn">
<span class="btn btn-primary btn-file">
Browse… <input type="file" id="fileTwo" name="fileTwo" class="fileGroup" accept=".jpeg,.jpg" disabled="true">
</span>
</span>
</div>
</div>
</div>
</div>
</div>
The code is rather simple:
1. grab .row parent
2. look for the next element with .row class
3. find an file input in the next .row element
4. if the input exists, set its disabled attribute to
false
I have a piece of HTML that looks like this
<div id="imageContent">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="input-group form-group">
<input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source">
<span class="input-group-btn">
<button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button>
</span>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input class="form-control" type="text" placeholder="http://postbackurl.com"/>
</div>
</div>
</div>
</div>
Above that I have a button that looks like this
<div class="row text-center">
<div class="col-md-12">
<button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button>
</div>
</div>
Once that button is pressed I run a function to get the #imageContent div and append a new row with the same as before.
<script type="text/javascript">
function add_fields() {
var div = document.getElementById("imageContent");
div.insertAdjacentHTML('afterend','<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>');
}
</script>
This works as expected and adds a new row into the imageContent div.
See picture. If I click Select Image, it launches a modal window with all of my images, and when I select one, it runs this piece of js.
onInsertCallback: function (obj){
/** Populate the src **/
currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);
$('#myModal').hide();
}
The problem I am having is that it does not get the correct input area to insert the value into, and instead always updates the first element. The full js code looks like this.
$(document).ready(function() {
jQuery(document).ready(function() {
/** Keep track of which modal button was clicked. **/
var currentModalBtn;
jQuery('.modal-btn').click(function() {
currentModalBtn = jQuery(this);
});
jQuery('.laradrop').laradrop({
onInsertCallback: function(obj) {
/** Populate the src **/
currentModalBtn.closest('.input-group').find('input.file-src').val(obj.src);
$('#myModal').hide();
},
onErrorCallback: function(jqXHR, textStatus, errorThrown) {
// if you need an error status indicator, implement here
//Swal here
swal({
title: 'Error!',
text: 'An Error Occurred',
type: 'error',
showConfirmButton: false,
showCancelButton: true
});
},
onSuccessCallback: function(serverData) {
//
}
});
});
});
My question is, how can I ensure that I get the right input field that the button was clicked on to update that fields value and make sure the others stay as they were.
move var currentModalBtn; outside the ready so it is available to the callback(s)
Also have only one
$(document).ready(function() {
jQuery(document).ready(function() {
you have a mess of jQuery/$ and so on - this will likely work better:
function add_fields() {
var $div = $("#imageContent");
$div.append('<div class="row"><div class="col-md-5 col-md-offset-1"> <div class="input-group form-group"><input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source"><span class="input-group-btn"> <button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button> </span> </div> </div> <div class="col-md-5"> <div class="form-group"> <input class="form-control" type="text" placeholder="http://postbackurl.com"/> </div> </div> </div>');
}
var currentModalBtn;
$(function() {
/** Keep track of which modal button was clicked. **/
$("#imageContent").on("click",".modal-btn", function() {
currentModalBtn = $(this);
});
$("#test").on("click",function() {
currentModalBtn.closest('.input-group').find('input.file-src').val("hello");
$('#myModal').hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row text-center">
<div class="col-md-12">
<button type="button" class="btn btn-wd btn-info btn-fill btn" onclick="add_fields();" rel="tooltip">Add More Images</button>
</div>
</div>
<div id="imageContent">
<div class="row">
<div class="col-md-5 col-md-offset-1">
<div class="input-group form-group">
<input type="text" class="form-control file-src" id="file1" placeholder="File Thumb Source">
<span class="input-group-btn">
<button class="btn btn-info modal-btn" type="button" data-toggle="modal" data-target="#myModal">Select File</button>
</span>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<input class="form-control" type="text" placeholder="http://postbackurl.com"/>
</div>
</div>
</div>
</div>
<button type="button" id="test">
click
</button>
I trying to use the jQuery validate in modal but this doesn't work or don't call the action to validate the inputs.
this is my from into the modal, this are into a template name="modalregistro"
<form id="formregister" class="p-t-15 formregister" role="form" method="get">
<div class="row">
<div class="col-sm-12">
<div class="form-group form-group-default">
<label>Correo electrónico</label>
<input type="text" name="uname" placeholder="usuario#correo.com" class="form-control" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group form-group-default">
<label>Contraseña</label>
<input type="password" id="setPassword" name="user[password]" placeholder="Minimo de 8 Carácteres" class="form-control" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group form-group-default">
<label>Validar contraseña</label>
<input type="password" name="user[password_confirmation]" placeholder="Minimo de 8 Carácteres" class="form-control" required>
</div>
</div>
</div>
<div class="row m-t-10">
<div class="col-md-6">
<p>Estoy de acuerdo con <strong>TP Landings</strong>, terminos y condiciones de uso y su Privacidad.</p>
</div>
<div class="col-md-6 text-right">
¿Ayuda? Contactar el soporte
</div>
</div>
<hr class="b-dashed b-grey">
<div class="row">
<div class="col-sm-6 col-xs-12">
<button data-dismiss="modal" class="btn btn-default btn-lg btn-large btn-block text-uppercase">Cancelar</button>
</div>
<div class="col-sm-6 col-xs-12">
<button id="btnHecho" class="text-uppercase btn btn-primary btn-lg btn-large btn-block btn-cons show-notification" type="submit">Crear cuenta</button>
</div>
</div>
</form>
I call this template into my Layout of the website
<template name="website">
<section class="website">
{{> navbarWebsite}}
</section>
{{> modallogin}}
{{> modalregistro}}
</template>
and this is my rendered
Template.website.rendered = function(){
$(function(){
$('.formregister').validate()
});
jQuery('.formregister').validate({
rules: {
"user[password]": {
minlength: 2
},
"user[password_confirmation]": {
minlength: 2,
equalTo : "#setPassword"
}
}
});
}
the jQuery validate are on, and the website.rendered too but I don't know why validate it.
You are calling the .validate() method twice on the same form...
$(function(){
$('.formregister').validate()
});
jQuery('.formregister').validate({
rules: { ...
.validate() is the initialization method and once called on a particular form, it cannot be called again. All subsequent calls will be ignored. Since your rules are declared from the second instance, they are ignored.
EDIT:
Perhaps you don't realize that you're using a class selector when your form only has an id.
The form only contains an id:
<form id="formregister" ...
But your selector is targeting class="formregister":
$('.formregister')
To select id="formregister", you'll need to use an id selector:
$('#formregister')