Hoping someone can help.
This is my first time using Vue and I have been asked to create a teams page which pulls data from a list, groups the names by team name in an array and displays them in card format. I have managed to do all this, however when the cards are clicked I'm looking to have all the team members and their role (e.g developer, product manager etc) display in a modal along with the team image
I have used the index as the ID for each card which is working fine but I am unsure as to how to pass this to the modal to display the correct members for each team when the card is clicked. I have tried various methods I've found on here but none seem to relate exactly to what I'm doing and my lack of Vue knowledge is hindering me as I can do this easily with normal HTML/JS.
It's also probably worth mentioning that due to work PC permissions and the fact this is being built on SharePoint I am having to use the Vue CDN and implement this in 1 HTML file rather than using components.
Many Thanks in advance and I hope this makes sense
Here is my HTML:
<div class="container">
<h1 class="page-heading">MEET<span style="color:#ff0000">IN</span>G THE TEAM</h1>
<p class="intro-text">This is a chance for you to tell your Country and the other teams who you are and what you stand for. You’ll
need a team name, team mascot image, who’s in your team and what you want to say to the world.</p>
<br>
<button class="btn btn-outline-light" type="button" role="button" data-target="#create-modal" data-toggle="modal" id="create-team">Create a New Team</button>
<button class="btn btn-outline-light" type="button" role="button" data-target="#create-modal" data-toggle="modal" id="update-team">Update Your Team</button>
<div class="row" id="team-cards">
<div class="col-md-4" v-for="(team, index) in teams" :key="team[0].teamname" v-if="team[0].teamname !== 'No Team'">
<a href="'#teamModal' + index" data-toggle="modal">
<div class="card" v-bind:id="index">
<img v-bind:src="teammate.teamimage" class="card-img-top" v-for="teammate in team" v-if="teammate.teamimage !== null" :key="teammate.teamimage">
<div class="card-body">
<h5 class="card-title"><strong>{{ team[0].teamname }}</strong></h5>
<p class="card-text" v-for="teammate in team" v-if="teammate.teamdescription !== null" :key="teammate.teamdescription">{{ teammate.teamdescription }}</p>
</div>
<div class="card-footer">
<img class="group-image" v-for="teammate in team" v-if="teammate.hackertype !== 'Developer'" :key="teammate.hackertype" src="https://community.global.hsbc/sites/DigiHub/SiteAssets/hub_assetts/Hack%20Teams/Images/red%20group.png">
<!-- <img class="group-image" v-for="teammate in team" v-else-if="teammate.hackertype !== 'Product Manager' || teammate.hackertype == 'Developer'" :key="teammate.hackertype" src="https://community.global.hsbc/sites/DigiHub/SiteAssets/hub_assetts/Hack%20Teams/Images/yellow%20group.png"> -->
<!-- <img class="group-image" v-for="teammate in team" v-if="teammate.hackertype == 'Developer' || teammate.hackertype == 'Product Manager'" :key="teammate.hackertype" src="https://community.global.hsbc/sites/DigiHub/SiteAssets/hub_assetts/Hack%20Teams/Images/green%20group.png"> -->
<a href="https://community.global.hsbc/sites/DigiHub/SitePages/Hack-Chat.aspx" target="_blank">
<img class="chat-image" src="https://community.global.hsbc/sites/DigiHub/SiteAssets/hub_assetts/Hack%20Teams/Images/chat.png">
</a>
</div>
</div>
</a>
</div>
</div>
</div>
<!-- Team Modal -->
<div class="modal fade" v-bind:id="['teamModal'+index]" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title"><b>{{ team[0].teamname }}</b></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<br>
<div class="modal-body" v-for="teammate in team">
<p>{{ teammate.name }}</p>
<p>{{ teammate.hackertype }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And my VueJS:
$(function () {
var appTeamCards = new Vue({
el: '#app-teams',
data: {
teams: [],
teamMembers: [],
},
mounted: function() {
this.getTeams();
},
methods: {
getTeams: function() {
var self = this;
$.ajax({
url: '/sites/DigiHub/_api/web/lists/getbytitle(\'global-hackathon-reg\')/items?$orderby=Modified desc',
method: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function (data) {
var posts = data.d.results;
readData(posts);
console.log(self.teams);
},
});
function readData(data) {
self.teams = groupBy(data, "teamname");
};
function groupBy(collection, property) {
var i = 0, val, index,
values = [], result = [];
for (; i < collection.length; i++) {
val = collection[i][property];
index = values.indexOf(val);
if (index > -1)
result[index].push(collection[i]);
else {
values.push(val);
result.push([collection[i]]);
}
}
return result;
}
},
}
});
$('#update-team').click(function(){
$("#new-member-form").hide();
$("#reg-another-update").show();
$("#update-form").show();
});
$('#create-team').click(function(){
$("#new-member-form").show();
$("#update-form").show();
$("#reg-another-update").hide();
});
$('#reg-another-update').click(function(){
$("#new-member-form").show();
$("#reg-another-update").hide();
$("#update-form").hide();
});
$('#submit-team-btn').click(function(){
$("#update-form").attr("disabled", "disabled");
});
});
It seems I had the right solution but the syntax was slightly wrong. I have made the following amendments and my code now works as expected.
The card anchor reference should be written as follows:
<a :href="'#teamModal' + index" data-toggle="modal">
Modal ID:
<div class="modal fade" :id="'teamModal' + index" v-for="(team, index) in teams" :key="team[0].teamname" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
Related
I'm using vue-slick link https://www.npmjs.com/package/vue-slick inside a bootstrap modal and when i use a v-for loop to loop through the items it display's this.
Here's a snippet of my code
import Slick from 'vue-slick';
export default {
props: ['vehicleRequest'],
components: {'slick': Slick},
data() {
return {
vehicle: {
model: '',
licensePlate: '',
type: '',
currentMileage: '',
Availability: '',
imageUrl: ''
},
vehicles: [],
slickOptions: {
infinite: true,
slidesToShow: 5,
slidesToScroll: 3,
},
}
},
mounted() {
console.log("vehicleRequestId: " + JSON.stringify(this.vehicleRequest));
},
methods: {
updated() {
this.reInit();
},
reInit() {
this.$refs.slickone.reSlick();
},
reserveVehicle() {},
allocateVehicle() {},
getVehicleRequest(id) {},
approveOnline() {
console.log("approve online!");
},
approveOffline() {
console.log("approve offline!");
},
declineRequest() {
$('#declineRequest-Modal').modal('hide');
console.log("vehiclerequest: " + this.vehicleRequest);
console.log("declined");
},
viewVehicle(vehicles) {
let self = this;
self.vehicles = vehicles
$('#viewVehicle').modal('show');
}
}
}
<div
class="modal fade"
id="viewVehicle"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalCenterTitle"
aria-hidden="true"
>
<div class="modal-dialog modal-lg modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalCenterTitle">{{vehicle.licensePlate}}</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<i
class="fas fa-times-circle"
aria-hidden="true"
style="font-size:20px;color: #6e6f6c;"
></i>
</button>
</div>
<div class="modal-body">
<slick ref="slickone" :options="slickOptions">
<div v-for='vehicle in vehicles' :key="vehicle.id">
<img :src="vehicle.vehicle_image_url">
</div>
</slick>
</div>
<div class="col-md-10 mx-auto mb-4">
<div class="row">
<div class="col-md-6">
<div class="w-100">
<button
type="button"
style="margin-left: 25%; padding-left: 20px; padding-right: 20px;"
id="alternativeVehicle"
#click="allocateVehicle()"
class="unicef-btn unicef-reset small-button"
>ALLOCATE ALTERNATIVE VEHICLE</button>
</div>
</div>
<div class="col-md-6">
<div class="w-100">
<button
type="button"
style="margin-left: -7%;"
#click="reserveVehicle()"
id="reserve"
class="unicef-btn unicef-primary small-button"
>RESERVE</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
What could be the problem ?
Sorry guys I was too busy that I hadn't got time to post the above solution anyway I've figured a way to do it although the css styling needs polishing but it still solves what I wanted. What I did was to create property in data called currentIndex and also a function called current vehicle in the computed property. Then I looped the [currentIndex] to get the currentVehicle
computed:{
currentVehicle: function(){
return this.vehicles[Math.abs(this.currentIndex) % this.vehicles.length];
},
},
So the currentVehicle() returns the index of the vehicle in view.
Here's a working one
https://jsfiddle.net/nelsonk/ka01zvtm/
apologies if this is crazy simple or has been answered a million times before. I just don't seem to be able to make any sense of the other Q&A threads I've been reading.
I am trying to work out how to determine if an array has a particular value in one of it's fields accross all of the rows. In other words, I just want it to ask if there is a "preQualTypeID" of 1 in any of the rows, and if not, I'm getting it to hide a part of the modal.
here is the HTML code for the modal:
<div class="modal fade hide" id="preQualModal" tabindex="-1" role="dialog" aria-labelledby="preQualsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="preQualsModalLabel">
<i class="fas fa-graduation-cap"></i>
<span>Prerequisite Qualifications</span>
</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-12">
<div class="d-none" id="preQual_AccedemicDetails">
<div class="row pt-1 pb-3">
<div id="preQual_Academic">#*API data goes here*#</div>
</div>
</div>
<div class="d-none" id="preQual_AccessDetails">
<div class="row pt-1 pb-3">
<div id="preQual_Access">#*API data goes here*#</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And here is the Javascript that I'm trying to implement:
$(function () {
$('#preQualModal').modal({
keyboard: true,
backdrop: "static",
show: false
}).on('show.bs.modal', function () {
var url = "/api/PreQualViewData/";
var qualId = $(event.target).closest('td').data('id');
$.get(url + qualId, function (data) {
var accedemicExist = data.some(function (data) { data.preQualTypeID === 1 });
if (accedemicExist == true) {
$('#preQual_AccedemicDetails').removeClass('d-none');
};
});
});
});
The main thing that I can't get to work is this bit:
var accExist = data.some(function (data) { data.preQualTypeID === 1 });
It always results in "False" and I'm guessing it is an issue with my sytax. When I debug, it says that the "data.preQualTypeID" is undefined, so I'm guessing I've done this wrong, but I don't know where to start. I'm not experienced in Javascript and I find the language a bit confusing.
The API is being built by an ASP controller and looks like this (I've taken out some of the detail to make it easier to read):
[{"qualification":"Graduate Management Training Scheme","level":7,"preQualTypeID":2},
{"qualification":"Degree","level":6,"preQualTypeID":1},
{"qualification":"A Levels","level":3,"preQualTypeID":1},
{"qualification":"GCSEs","level":2,"preQualTypeID":1}]
If anyone can point me in the right direction, I'd be very greatful. Will update with the implementation and vote up those that help.
Thanks
Please let me know if I need to give anymore information.
You can use filter to check if data which received from backend in ajax has preQualTypeID = 1 or not depending on this removeClass .
Demo Code :
var data = [{
"qualification": "Graduate Management Training Scheme",
"level": 7,
"preQualTypeID": 2
},
{
"qualification": "Degree",
"level": 6,
"preQualTypeID": 1
},
{
"qualification": "A Levels",
"level": 3,
"preQualTypeID": 1
},
{
"qualification": "GCSEs",
"level": 2,
"preQualTypeID": 1
}
];
//filter json aray
var accedemicExist = $(data)
.filter(function(i, n) {
return n.preQualTypeID === 1; //check if prequaltypeid=1
});
//if length > 0 exist
if (accedemicExist.length > 0) {
console.log("it exist do something")
//do something
} else {
console.log("not there sorry")
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
So in the near future my shop is going to upgrade to Bootstrap 4 but we cannot do this until we solve the issue with using remote modals. Here is an example of how we load our modals. The reason we use remote modals is because the modal-body is dynamic and may use different file based on the url. I have heard that using jQuery("#newsModal").on("load",..) is an alternative but how could I do this? I found this but I am not sure how my anchor would look and how to build the url to load the remote data.
Global PHP include file:
<div id="NewsModal" class="modal fade" tabindex="-1" role="dialog" data-
ajaxload="true" aria-labelledby="newsLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="newsLabel"></h3>
</div>
<div class="noscroll-modal-body">
<div class="loading">
<span class="caption">Loading...</span>
<img src="/images/loading.gif" alt="loading">
</div>
</div>
<div class="modal-footer caption">
<button class="btn btn-right default modal-close" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
modal_news.php file:
<form id="newsForm">
<div id="hth_err_msg" class="alert alert-danger display-hide col-lg-12 col-md-12 col-sm-12 col-xs-12">
You have some errors. Please check below.
</div>
<div id="hth_ok_msg" class="alert alert-success display-hide col-lg-12 col-md-12 col-sm-12 col-xs-12">
✔ Ready
</div>
<!-- details //-->
</form>
Here is how we trigger the modals :
<a href="#newsModal" id="modal_sbmt" data-toggle="modal" data-target="#newsModal"
onclick="remote='modal_news.php?USER=yardpenalty&PKEY=54&FUNCTION=*GENERAL'; remote_target='#NewsModal .noscroll-modal-body'">
<span class="label label-icon label-info">
<i class="fa fa-bullhorn"></i>
</span>
Promotional Ordering
</a>
I think I need to do something like this when building anchor dynamically:
a) Replace paramters with data-attrs
b) Use the event invoker to get the data-attrs using event.target.id
Thanks to Tieson T. and this post I was able to effectively pass parameters to the remote modal using this technique except if you have multiple modals
I have also included some helpful techniques inside this example as to how you may pass parameters to the remote modal.
bootstrap_modal4.php:
<div class="portlet-body">
Add Attendee <i class="fa fa-plus"></i>
</div>
<!-- BEGIN Food Show Attendee Add/Edit/Delete Modal -->
<div id="attendee" class="modal fade" tabindex="-1" role="dialog" data-ajaxload="true" aria-labelledby="atnLabel" aria-hidden="true">
<form id="signupForm" method="post">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<label id="atnLabel" class="h3"></label><br>
<label id="evtLabel" class="h6"></label>
</div>
<div class="modal-body">
<div class="loading"><span class="caption">Loading...</span><img src="/images/loading.gif" alt="loading"></div>
</div>
<div class="modal-footer">
<span class="caption">
<button type="button" id="add_btn" class="btn btn-success add-attendee hidden">Add Attendee <i class="fa fa-plus"></i></button>
<button type="button" id="edit_btn" class="btn btn-info edit-attendee hidden">Update Attendee <i class="fa fa-save"></i></button>
<button type="button" id="del_btn" class="btn btn-danger edit-attendee hidden">Delete Attendee <i class="fa fa-minus"></i></button>
<button class="btn default modal-close" data-dismiss="modal" aria-hidden="true">Cancel</button>
</span>
</div>
</div>
</div>
</form>
</div>
<script>
jQuery(document).ready(function() {
EventHandlers();
});
function EventHandlers(){
$('#attendee').on('show.bs.modal', function (e) {
e.stopImmediatePropagation();
if($(this).attr('id') === "attendee"){
// Determines modal's data display based on its data-attr
var $invoker = $(e.relatedTarget);
var fscode = $invoker.attr('data-fscode');
console.log(fscode);
// Add Attendee
if($invoker.attr('data-atnid') === "add"){
$("#atnLabel").text("Add New Attendee");
$(".add-attendee").removeClass("hidden");
}
else{ //edit/delete attendee
$("#atnLabel").text("Attendee Maintenance");
$(".edit-attendee").removeClass("hidden");
}
//insert hidden inputs
//add input values for post
var hiddenInput = '<INPUT TYPE=HIDDEN NAME=FSCODE VALUE="' + fscode + '"/>';
$("#signupForm").append(hiddenInput);
}
});
$('#attendee').on('hidden.bs.modal', function (e) {
$(".edit-attendee").addClass("hidden");
$(".add-attendee").addClass("hidden");
$("#signupForm input[type='hidden']").remove();
});
// BOOTSTRAP 4 REMOTE MODAL ALTERNATIVE FOR BOOTSTRAP 3v-
$('#add-attendee').on('click', function(e){
$($(this).data("target")+' .modal-body').load($(this).data("remote"));
$("#attendee").modal('show');
});
}
</script>
bootstrap_remote_modal4.php:
<form id="signupForm">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
Hello World!
</div>
</form>
<script>
$(document).ready(function(){
console.log('<?php echo $_GET["USERNAME"]?>'); //passed through url
});
</script>
NOTE: I am having problems with event propagation during the show.bs.modal event which I have a global show.bs.modal that is propagating up to this event handler due to multiple modals so if you have multiple modals make sure to handle them correctly.
Here is a screen shot of the results which clearly show propagation is taking place but the parameter passing techniques are working.
You might find it easier to use something like Bootbox.js, which can be used to dynamically create Bootstrap modals.
Given what you've shown, it would work something like:
trigger modal
with
$(function(){
$('.show-modal').on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
$.get(url)
.done(function(response, status, jqxhr) {
bootbox.dialog({
title: 'Your Title Here',
message: response
});
});
});
});
This assumes response is an HTML fragment.
Bootbox hasn't officially been confirmed to work with Bootstrap 4, but I haven't run into any problems with it yet (modals seem to be one of the few components that don't have updated markup in BS4).
Disclaimer: I am currently a contributor to Bootbox (mainly updating the documentation and triaging issues).
If you must use only the Bootstrap modal, you're actually after load(). You would probably do something like:
$(function(){
$('.show-modal').on('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
var dialog = $('#NewsModal').clone();
dialog.load(url, function(){
dialog.modal('show');
});
});
});
I am retrieving friend objects via facebook graph API. The idea is to display a list of the names of returned friends, allow user to select one or more friends from this list, and determine the IDs of the friends selected by user once a button is clicked.
So far, I have the following code...
detail.js:
Template.detail.helpers({
...
listOfFriends: function() {
var list = new Array();
if (Meteor.user()) {
list = Meteor.user().profile.listOfFriends;
}
return list;
},
...
});
Template.detail.events({
...
'click .select-friends': function(e) {
e.preventDefault();
// Display modal.
$('#friend_list_modal').modal('show');
Meteor.call('getFacebookFriends', function(err, response) {
if (err) {
alert(JSON.stringify(err));
} else {
if (response.statusCode != 200) {
alert("Error: " + response.statusCode);
}
}
});
},
'click #get_ids_button': function(e) {
e.preventDefault();
var checkedFriendNames = {}, counter = 0;
$("#friend_list li.active").each(function(idx, li) {
checkedFriendNames[counter] = $(li).text();
counter++;
});
// At this point, I have a list of names in checkedFriendNames,
// but I want the IDs and maybe other attributes as well.
$('#friend_list_modal').modal('hide');
}
});
detail.html:
<template name="detail">
<div class="page page-detail">
...
<div class="container">
<div class="btn btn-danger list-friends pull-right" data-toggle="tooltip" title="list friends">
<span class="glyphicon glyphicon-user"></span>
</div>
</div>
</div>
<!-- Modal -->
<div id="friend_list_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">List of Friends</h4>
</div>
<div class="modal-body">
<div>
<div style="max-height: 300px; overflow: auto;">
<ul id="friend_list" class="list-group checked-list-box">
{{#each listOfFriends}}
<li class="list-group-item">{{name}}</li>
{{/each}}
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<button id="get_ids_button" type="button" class="btn btn-default">Get IDs</button>
</div>
</div>
</div>
</div>
</template>
server.js:
Meteor.methods({
...
getFacebookFriends: function() {
this.unblock();
var graphResponse = Meteor.http.call("GET", "https://graph.facebook.com/v2.5/me/friends", {
params: {
access_token: Meteor.user().services.facebook.accessToken
}
});
// Save user's list of friends.
Meteor.users.update(Meteor.userId(), {$set: {"profile.listOfFriends": graphResponse.data.data}});
return graphResponse;
},
...
});
What is the best way, in Meteor, to bind the friend object (with id, name, ... attributes) to the DOM and then get these attributes, such as friend ID, back once a selection is made by user?
I'm not sure if Meteor makes this any easier, but you could use data attributes to store extra information about your friend objects in the HTML element.
To save:
<li class="list-group-item" data-friend-id="{{id}}">{{name}}</li>
To retrieve:
var friendId = $(li).data('friendId');
I have some modal forms to complete some fields, in this case I have 2 modal forms, 1 for Jury and 1 for Contact, when I press 'Add' link, in both cases works fine, but the problem is when I want to edit contact.
When I press Edit in both cases I call controller to complete the Java form and then, return to view and simulate a click in "Add" button with JQuery. In jury case works fine, but in Contact I only get a dark screen (like if modal works), but modal window never appear. Other problem is, when I press Edit button in Jury and then close the jury modal form, when I press Edit in Contact it launch the jury modal form...
Contact Modal and Add link (Edit link doesn't works)
<div class="row margin-top-10">
<div class="col-xs-2 col-md-2 col-md-push-10">
<a id="btnAddCForm" href="#modal-cForm-form" data-toggle="modal" class="btn fpa btn-block pull-right">AÑADIR NUEVO</a>
</div>
</div>
<div id="modal-cForm-form" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title">Nuevo/Editar Forma de contacto</h4>
</div>
<div class="modal-body">
<div class="scroller" style="height:390px" data-always-visible="1" data-rail-visible1="1">
Some fields
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn default">CANCELAR</button>
<button type="button" onclick="addContactForm();" class="btn fpa">ACEPTAR</button>
</div>
</div>
</div>
</div>
Jury Modal and Add link (Works fine)
<div class="row margin-top-10">
<div class="col-xs-2 col-md-2 col-md-push-10">
<a id="btnAddJurado" href="#modal-jury-form" data-toggle="modal" class="btn fpa btn-block pull-right">AÑADIR NUEVO</a>
</div>
</div>
<div id="modal-jury-form" class="modal fade" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="resetValues();"></button>
<h4 class="modal-title">Nuevo/Editar Jurado</h4>
</div>
<div class="modal-body">
<div class="scroller" style="height:300px" data-always-visible="1" data-rail-visible1="1">
Some Fields
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" onclick="resetValues();" class="btn default">CANCELAR</button>
<button type="button" onclick="addJury();" class="btn fpa">ACEPTAR</button>
</div>
</div>
</div>
</div>
Onload (In main html document)
window.onload = function () {
/*<![CDATA[*/
var idJuryAux = /*[[${person.juryAux.id}]]*/
null;
var idContactFormAux = /*[[${person.contactFormAux.id}]]*/
null;
/*]]>*/
var idProvincia = $('#provinceField').val();
var idPais = $('#countryField').val();
if (idPais == '-1') {
$('#provinceField').attr("readonly", true);
} else {
$('#provinceField').attr("readonly", false);
}
if (idProvincia == '-1') {
$('#cityField').attr("readonly", true);
} else {
$('#cityField').attr("readonly", false);
}
if (idJuryAux != null) {
/*<![CDATA[*/
var idCat = /*[[${person.juryAux.category}]]*/
null;
var idCargo = /*[[${person.juryAux.juryType}]]*/
null;
var catName = /*[[${person.juryAux.categoryName}]]*/
null;
var cargoName = /*[[${person.juryAux.juryTypeName}]]*/
null;
/*]]>*/
$('#btnAddJurado').trigger('click');
$("#categoryField").select2('data', {
id: idCat,
text: catName
});
$("#juryTypeField").select2('data', {
id: idCargo,
text: cargoName
});
}
if (idContactFormAux != null) {
/*<![CDATA[*/
var idType = /*[[${person.contactFormAux.type}]]*/
null;
var typeName = /*[[${person.contactFormAux.typeName}]]*/
null;
var idTag = /*[[${person.contactFormAux.tag}]]*/
null;
var tagName = /*[[${person.contactFormAux.tagName}]]*/
null;
var idPais = /*[[${person.contactFormAux.country}]]*/
null;
var paisName = /*[[${person.contactFormAux.countryName}]]*/
null;
var idProvincia = /*[[${person.contactFormAux.province}]]*/
null;
var provName = /*[[${person.contactFormAux.provinceName}]]*/
null;
var idCity = /*[[${person.contactFormAux.city}]]*/
null;
var cityName = /*[[${person.contactFormAux.cityName}]]*/
null;
var idInst = /*[[${person.contactFormAux.institution}]]*/
null;
var instName = /*[[${person.contactFormAux.institutionNme}]]*/
null;
/*]]>*/
$('#btnAddCForm').trigger('click');
$("#typeField").select2('data', {
id: idType,
text: typeName
});
$("#tagField").select2('data', {
id: idTag,
text: tagName
});
$("#countryField").select2('data', {
id: idPais,
text: paisName
});
$("#provinceField").select2('data', {
id: idProvincia,
text: provName
});
$("#cityField").select2('data', {
id: idCity,
text: cityName
});
$("#institutionField").select2('data', {
id: idInst,
text: instName
});
}
}
P.S. addJury(); and addContactForm(); only closes modal window, both works fine!
EDIT: I'm still waiting for a response...