How to transfer value from js to modal


#1

I have some value of activities which listed here

and i need to pass all of that value to a modal , so it will return title,start time, end time for authorized user as a pic. For example on 23rd July, the value should return “meeting apa saja”, “12:00 am”,“01:00 am” respectively.

Does anyone know how to make it happen?

Would you be here for a tiny help @serkandurusoy?

Thank you for your help in advance.


#2

Depends on the UI layer you are using (blaze/react/vue/angular/…) but the idea would be to:

  • catch the click event on the calendar entry
  • store the data related to the clicked entry somewhere that the modal can read from
  • show the modal with the data

This is generally referred to as “global state” or a “local state” which is scoped to some parent component that encloses both the modal and the calendar.

With stock meteor, you might want to read up on:


#3

Thank you @serkandurusoy, i will take a look and read your references, please don’t get annoyed with me, i am newbie in meteor.


#4

We’ve all been a Meteor newby at some point and will all be a newby for something else sooner or later :slight_smile:


#5

Really love that quotes, it means that we are always learning.

Best Regards,

Vina P.
give your best in every challenges.


#6

Like @serkandurusoy is saying, we do something like this in our app :

In your template.html:

<template name="calendarTemplate">
   <div id="calendar">
      <!-- Your calendar HTML and code -->
   </div>

   <div class="modal" ...>
      <h1>Create an Event</h1>
      <form>
         <h2>Title</h2>
         <input type="text" value="{{selectedEventTitle}}" />
         <!-- And so on with the rest of your form -->
      </form>
   </div>
</template>

In your template.js:

Template.calendarTemplate.helpers({
   eventTitle: function() {    
     Template.instance().selectedEventTitle.get();
   },
   //  All your other helpers...
});

Template.calendarTemplate.events({
   'click #someParentCalendarElement': function(event, template) {
      template.selectedEventTitle.set($(event.currentTarget).find("#eventTitle"));
      //  Set all the other from values...
   }
});

Template.calendarTemplate.onCreated(function() {
   this.selectedEventTitle = new reactiveVar();
   //  You could have one var for each form value or an object to hold all formvalues, etc.
});

Something like this will work. You could also just do a pure JS/JQuery solution and just set the values on the modal upon a click using JQuery instead of using Meteor reactivity. It depends on your use case.


#7

Hi @evolross, thank you for your help.

I have found the solution in the same day with your post. It made me happy :smiley:

here are the results :

image

.

But now i am facing another problem ( please take a look at the first picture), i cannot put validation for both events (titled :‘meeting’ and ‘adf’), since they are conducted on August 4th and run at the same time, 00.00 AM - 01.00 AM.

I have tried to do validation like these (see preformatted text)

‘submit .session-data-form’(event, instance) {
//event.preventDefault();

 // Get the start date/time and format it to ISO 8601
 const f = document.getElementById(event.target.start.id);

 // Get the end date/time and format it to ISO 8601
 const g = document.getElementById(event.target.end.id);

  // Store the start and end time as integers.
const startValue = parseInt(event.target.start.value);
const endValue = parseInt(event.target.end.value);

// Store the start and end time in a string format.
const startString = f.options[f.selectedIndex].text;
const endString = g.options[g.selectedIndex].text;

const pic  = FlowRouter.getParam('name');

if ( $('button.ui.teal.button').text()=="Create Event")
{

  let newEvent = Session.get('eventModal');

// Get the title of the event.
const title = event.target.title.value;


let start = `${newEvent.date}T${f.options[f.selectedIndex].value}-10:00`;
if (f.options[f.selectedIndex].value === 'Select a Start Time') {
  start = '';
}


let end = `${newEvent.date}T${g.options[g.selectedIndex].value}-10:00`;
if (g.options[g.selectedIndex].value === 'Select an End Time') {
  end = '';
}

   //check if startValue or endValue in the same date already exists

   let startCount = EventData.findOne({startValue:startValue,start:start}).count();
    let endCount = EventData.findOne({endValue:endValue,end:end}).count();
    if (startCount>0||endCount>0)
    {
      alert("Please check start and end time,it shall not be reserved by others")
      return
    }

I have found that EventData.find did not execute the next code ( i didn’t know where it ran then :blush:).

Do you have any suggestion?

Thank you very much.