Check dropdown automatically


#1

Hello there.
I have a little problem about getting and ID of my new created thing and being check on new site.
First of all: I uses MeteorKitchen, so I have variables and function in another folders and files.

In steps:

  1. I create new invoice
  2. In that invoice I have a button that let me create new customer. I click that button and it send me to new page, where I can create my new customer. New customer site replace new invoice site (the same tab)
  3. I fill the table, click “Save” and it gives the data (object) ID. Now I have a customer with data (name, email, etc.) from table and that generated ID.
  4. I get back to my “new invoice” page.

And here I stand. I have on my new invoice site a dropdown list, where my new customer appears, but I have to check it. The thing is, when I get back from creating new customer to my new invoice I want to have my new customer checked.
When I do "console.log(variable)" on my new customer site - I get the ID of my Invoice and my Customer. Now I get back, render a new invoice page and my customer those ID’s are seen.

The question is - how to check the option from the dropdown while getting back to the new invoice page?

The code of dropdown:

<div class="input-div">
    <select class="form-control" name="customerId" required="required">
        <option value="" disabled selected>Choose your customer...</option>
            {{#each customers}}
            <option value="{{_id}}">
                {{name}}
            </option>
        {{/each}}
    </select>
</div>

EDIT: To add something more - I put info about my customer under the dropdown. So I use the session thing.

Template.InvoicesNewNowaFaktura.events({
"change select": function(e,t){
            Session.set("selectedCustomer",e.target.value);
    },
})

Template.InvoicesNewNowaFaktura.helpers({
    klient:function(){
        return Customers.findOne({ _id: Session.get('selectedCustomer')});
    },
})

In my HTML, where I want to get info after dropdown:

<p>
    {{ klient.name}}
</p>
and others {{klient.xxx}}

#2

Anybody? :frowning: I’m just so close to do that, urggghh :confused:


#3

When using dropdowns it’s called selected.

What I’d do here is add a helper.

{{#each customers}}
        <option value="{{_id}}" {{#if selectedCustomer}} selected {{/if}}>
            {{name}}
        </option>
    {{/each}}

Then just add a helper

selectedCustomer: function(){
    return this._id == Session.get('selectedCustomer');
}

Also on a sidenote, it’s not a great idea to use session variables for this. Check out Tracker.Dependency in the documentation. Often much more suitable :slight_smile:


#4

Hmm… It’s specific.

When I try your code, my console gives me an error:

“Reactive HTML attributes must either have a constant name or consist of
a single {{helper}} providing a dictionary of names and values. A
template tag of type BLOCKOPEN is not allowed here.”

And ofcourse “this” doesn’t work.
Please remember that I work on MeteorKitchen schema.


#5

Ah ok. Perhaps use two versions then

Replace the option line with this:

    {{#if selectedCustomer}}
    <option value="{{_id}}" selected>
    {{else}
    <option value="{{_id}}">
    {{/if}}

#6

Yup, now my console do it correctly.

But now I need to get “this” here. I need to give my “selectedCustomer” in {{#if}} a variable, right?

It’a about that I have the ID of my new customer set in variable; “newId” it’s called :slight_smile:


#7

I’m not following here? selectedCustomers in if is a helper which is defined just like you did klient.
“this” within that helper is a customer as you have defined in {{#each customers}}
This doesn’t only work on the _id and other fields. If you create a helper you use the customer context.
Say that you have a helper called fullName but you have two fields firstname and surname in a profile.

fullname: function(){
return this.profile.firstname + " "         +this.profile.surname;
}

#8

OK. Maybe you don’t know what I want to get.

I create something on new page. I get back to last page (my invoice) and I want that from a dropdown my new created thing is selected. And there’s info about that after the dropdown.

I have my customer insert page. When I click “submit” I have a function that creates “newId” by:

newId = Customers.insert(values, function(e) { if(e) errorAction(e.message); else submitAction(); }); 

And that ‘newId’ is seen on my invoicepage :slight_smile:
And now I want that Id to be automatically taken to the dropdown. This client must be seen :slight_smile:

Now it doesn’t work :frowning:


#9

Ah! Cross-page you should definitely use sessions. But show your entire code. Debugging bits and pieces with fractions of error messages doesn’t help a lot…


#10

It will be sooooo long. Forgive me. I’ll try to cut it as much as I can

Invoices.new.new.html:

<template name="InvoicesNewNowaFaktura">
            <div class="form-group  field-customer-id" id="inputcustomer">
                <label for="customerId" class="boldy">
                    TO
                </label>
                <div class="input-div">
                    <select id="ThemeSelect" class="form-control" name="customerId" required="required">
                        <option value="" disabled >Choose your customer...</option>
                        {{#each customers}}
                        {{#if selectedCustomer newId}}
                            <option value="{{_id}}" selected>
                                {{name}}
                            </option>
                        {{else}}
                        <option value="{{_id}}">
                            {{name}}
                        </option>
                        {{/if}}
                        {{/each}}
                    </select>
                </div>
                <div>
                    <p>
                      {{ klient.name}}
                    </p>
                    <p>
                      {{ klient.business_address}}
                    </p>
                    <p>
                      {{ klient.email }}
                    </p>
            </div>
            <button id="customernewbutton" type="button">
            Create new customer
            </button>
            </div>
        </div>
</template>]

Invoices.new.new.js

Template.InvoicesNewNowaFaktura.events({
    "submit": function(e, t) {
        e.preventDefault();
        pageSession.set("invoicesNewNowaFakturaInfoMessage", "");
        pageSession.set("invoicesNewNowaFakturaErrorMessage", "");

        var self = this;

        function submitAction(msg) {
            var invoicesNewNowaFakturaMode = "insert";
            if(!t.find("#form-cancel-button")) {
                switch(invoicesNewNowaFakturaMode) {
                    case "insert": {
                        $(e.target)[0].reset();
                    }; break;

                    case "update": {
                        var message = msg || "Saved.";
                        pageSession.set("invoicesNewNowaFakturaInfoMessage", message);
                    }; break;
                }
            }

            //Router.go("invoices", {invoiceId: this._id});
            Router.go("invoices.details", {invoiceId: t.data.fakturka._id});
            Session.set('selectedCustomer', undefined);
            delete Session.keys.selectedCustomer;
        }

        function errorAction(msg) {
            var message = msg || "Error.";
            pageSession.set("invoicesNewNowaFakturaErrorMessage", message);
        }

        validateForm(
            $(e.target),
            function(fieldName, fieldValue) {

            },
            function(msg) {

            },
            function(values) {

                Invoices.update({ _id: t.data.fakturka._id }, { $set: values}, function(e) { if(e) errorAction(e.message); else submitAction();});
            }
        );
        Session.set("selectedCustomer",undefined);
        return false;
    },

"change select": function(e,t){
            console.log(e);
            Session.set("selectedCustomer",e.target.value);
            var proba = Session.get("selectedCustomer");
            console.log(proba);
            console.log(e);
    },

"click #customernewbutton": function(e, t){
        isInvoice = 2;
        console.log(isInvoice);
        Session.set("selectedCustomer",e.target.value);
        idOfInvoice = t.data.fakturka._id;
        Router.go("customers.insert", {});
    },

Template.InvoicesNewNowaFaktura.helpers({
        klient:function(){
        return Customers.findOne({ _id: Session.get('selectedCustomer')});
        },
        walutaklienta:function(){
            var klient = Customers.findOne({ _id: Session.get('selectedCustomer')});
            var walutaid = klient.currency;
            var walutaogolnie = Currency.findOne(walutaid);
            var walutaname = walutaogolnie.name;
            return walutaname;
        },
     *** Your type of code ;) ***
        selectedCustomer:function(newId){
            console.log(newId);
            console.log(this);
            return this._id == Session.get('selectedCustomer');
    },
    
        'nextinvoiceNumber':function(){var max=0; var invoiceNumbers=Invoices.find({},{fields:{invoiceNumber:1}}).fetch();_.each(invoiceNumbers,function(doc){var intNum=parseInt(doc.invoiceNumber);if(!isNaN(intNum)&&intNum>max)max=intNum;});return max+1;}
    });

Customers.insert.insert.html

<template name="CustomersInsertInsertForm">
    <div class="form-group saveblock">
                    <div class="submit-div">
                        <button id="form-submit-button" class="btn btn-success" type="submit">
                            <span class="fa fa-check">
                            </span>
                            Save
                        </button>
                        <a href="#" id="form-cancel-button" class="btn btn-default">
                            Cancel
                        </a>
                    </div>
                </div>
</template>

Customers.insert.insert.js

Template.CustomersInsertInsertForm.events({
    "submit": function(e, t) {
        e.preventDefault();

    pageSession.set("customersInsertInsertFormInfoMessage", "");
    pageSession.set("customersInsertInsertFormErrorMessage", "");

    var self = this;

    function submitAction(msg) {
        var customersInsertInsertFormMode = "insert";
        if(!t.find("#form-cancel-button")) {
            switch(customersInsertInsertFormMode) {
                case "insert": {
                    $(e.target)[0].reset();
                }; break;

                case "update": {
                    var message = msg || "Saved.";
                    pageSession.set("customersInsertInsertFormInfoMessage", message);
                }; break;
            }
        }

        if(isInvoice == 2){
            Router.go("invoices.new", {invoiceId: idOfInvoice});
        }
    }

    function errorAction(msg) {
        var message = msg || "Error.";
        pageSession.set("customersInsertInsertFormErrorMessage", message);
    }

    validateForm(
        $(e.target),
        function(fieldName, fieldValue) {

        },
        function(msg) {

        },
        function(values) {
            newId = Customers.insert(values, function(e) { if(e) errorAction(e.message); else submitAction(); });

            if(isInvoice == 2)
            {
                console.log(newId);   ***<-- it gives me an ID of my new customer***
                console.log(idOfInvoice); ***<-- id gives me and ID of my Invoice***
                Invoices.update({ _id: idOfInvoice }, {$set: {customerId:newId}});
            }
        }
    );
    return false;
},

#11

I will send you some pictures. Please look at the url.

  1. I create my invoice. I have default data. I click “Create new customer”

  2. I create my new customer. Click “Save”. It gets me back to my invoice.

  3. And I get that when I get back…:

  4. But I want get that:


#12

I see that’s getting hard :frowning: Ajajajajajajaj :frowning:


#13

You don’t need to add newID as an argument to selectedCustomer. You already use Session.get. You never use it for anything but logging. Plus where are you getting it from? newID is never a variable on that page?
However you never set the session variable!!!

In Customers.insert.insert.js, when you get newId add this

Session.set('selectedCustomer' newId);

Potentially use the same setup with idofinvoice if you need that as well.

An also… This is a forum, not a chat. Don’t expect answers within the hour. Everyone else have jobs and work on their own bugs as well! :slight_smile:

I highly recommend you consider buying the “Discover Meteor” book:
Discover Meteor


#14

Well, that works.
I really want to thank you :smile:

Oh, I know. That’s not a chat, but that problem was frustrating me so much.
Thank you once more :slight_smile: