JavaScript

Re: import declarations may only appear at top level of a module

19-Oct-20 10:38

I searched around on this, and can't figure out what the module is.

I wrote this for that PHP project. A file called js_undefinedValue.js. The idea is to write my undefined value to local storage and read it back when I need it.

Overall, I can't reference and use the functions.
ReferenceError: writeUndefinedValue is not defined

export class UndefinedValue {

    projectNumber;
    variableContingencyValue;
    actualCost;
    varibleContingencyCost;
    actualPlusContingencyCost;

}

export function writeUndefinedValue(projectNumber, variConRate, actualCost, variConCost, actualPlusCost) {

    let uVo = new UndefinedValue();
    uVo.projectNumber = projectNumber;
    uVo.variableContingencyValue = variConRate;
    uVo.actualCost = actualCost;
    uVo.varibleContingencyCost = variConCost;
    uVo.actualPlusContingencyCost = actualPlusCost;

    localStorage.setItem('undefinedValue', JSON.stringify(uVo));
}

export function readUndefinedValue(projectNumber) {

    let uVo = JSON.Parse(localStorage.getItem('undefinedValue'));
    if (uVo !== undefined || uVo !== null) {
        return uVo;
    }
    return null;

}

And in the top of the frame code, added this.

<script type="text/javascript">
    import { readUndefinedValue, writeUndefinedValue, UndefinedValue } from './source/js_undefinedValue.js';
</script>

If it ain't broke don't fix it
Discover my world at jkirkerx.com

jkirkerx19-Oct-20 11:16

Getting a textbox in another frame

19-Oct-20 11:16

Got it to work

module literately meant module.
So instead of type="javascript", it's type="module"

my file remains the same

export class UndefinedValue {

    projectNumber;
    variableContingencyValue;
    actualCost;
    varibleContingencyCost;
    actualPlusContingencyCost;

}

export function writeUndefinedValue(projectNumber, variConRate, actualCost, variConCost, actualPlusCost) {

    let uVo = new UndefinedValue();
    uVo.projectNumber = projectNumber;
    uVo.variableContingencyValue = variConRate;
    uVo.actualCost = actualCost;
    uVo.varibleContingencyCost = variConCost;
    uVo.actualPlusContingencyCost = actualPlusCost;

    localStorage.setItem('undefinedValue', JSON.stringify(uVo));
}

export function readUndefinedValue(projectNumber) {

    let uVo = JSON.Parse(localStorage.getItem('undefinedValue'));
    if (uVo !== undefined || uVo !== null) {
        return uVo;
    }
    return null;

}

But the script ended up like this

// Script to write the Undefined Value to Local Storage
// 10/19/2020 - jkirkerx
// I don't like doing this, but it's clean and avoids the issues with PHP and Frames
// MSRP.phtml can just read the local storage and match the project number
echo "
<script type='module' scr='./source/js_undefinedValue.js'></script>
<script language='JavaScript' type='module'>
    import { readUndefinedValue, writeUndefinedValue, UndefinedValue } from './source/js_undefinedValue.js';
    writeUndefinedValue (
        $sess_proj_no, 
        $vari_contingency_rate, 
        $actual_cost, 
        $vari_contingency_cost, 
        $actualPlusContingency_cost
    );

</script>";

So far no complaints from the browser, the console is clean and I got a clean write of the class in string format in local storage.

If it ain't broke don't fix it
Discover my world at jkirkerx.com

jkirkerx18-Oct-20 13:18

18-Oct-20 13:18

I know nothing about frames, or just forgot from 17 years ago.
I have this PHP project, original authors used frames.
I need to store a calculated value in child frame, and store it in a textbox in the parent frame.

Can't seem to grab the frame, undefined.

The HTML

<frameset rows="45, 75%" FRAMEBORDER="0" BORDER="0" FRAMESPACING="0" onUnload="logout()">
   <frameset cols="*, 450" FRAMEBORDER="0" BORDER="0" FRAMESPACING="0">
        <frame id="basicFrame" name="basic" src="page_top.phtml" marginheight="0" marginwidth="0" noresize border="0" scrolling="yes"  >
        <frame id="msrpFrame" name="msrp" src="page_blank.html" marginheight="0" marginwidth="0" noresize border="0">
   </frameset>
   <frame id="mainFrame" name="main" src="page_main.phtml" marginheight="0" marginwidth="0" noresize border="0">
</frameset>

My textbox is in a frame called mainFrame, and my script and calculated value is in a iframe called msrpFrame.

<script language='JavaScript' type='text/javascript'>    
    var mFrame = document.getElementById('mainFrame');
    if (mFrame !== null || mFrame !== undefined) {
        var contentDoc = mFrame.contentDocument || mFrame.contentWindow.document;
        var txtUV = contentDoc.getElementById('undefinedValue');
        if (txtUV !== null) {
            txtUV.value = " . $GLOBALS[undefinedValue] . "
        }
    }
</script>

I thought I was pretty good with JavaScript but this eludes me. I'm not a big fan of how this project was authored either. And this seems to be the best solution at the moment. Unless I try to make the global var work in PHP across multiple frames and multiple PHP pages.

If it ain't broke don't fix it
Discover my world at jkirkerx.com

[abandon] the idea

jkirkerx19-Oct-20 10:29

Re: Getting a textbox in another frame

19-Oct-20 10:29

I'm gonna abandon this idea.

If it ain't broke don't fix it
Discover my world at jkirkerx.com

DerekT-P19-Oct-20 10:46

DerekT-P

19-Oct-20 10:46

jkirkerx wrote:
var mFrame = document.getElementById('mainFrame');

is looking for mainframe in the current (subframed) document, so won't find it there. You need to go up a level, since the IFRAME called mainframe is in the top-level document:

JavaScript

var mFrame = window.top.document.getElementById('mainframe');

(Haven't tested that but I think it's right - should put you on the right track anyway).

Re: Getting a textbox in another frame

jkirkerx19-Oct-20 11:12

Setting max length property of masked input control in ember js

19-Oct-20 11:12

But I get the idea. Climb up a level out of the child frame first.
Thanks, will play around with it.

If it ain't broke don't fix it
Discover my world at jkirkerx.com

Virtual populate in JS

adids122123-Sep-20 2:38

adids1221

23-Sep-20 2:38

Hey,

I am trying to implement a virtual populate in my js between two models I created.

reviewModel:

const reviewSchema = new mongoose.Schema({
    review: {
        type: String,
        required: [true, 'Review can not be empty!']
    },
    rating: {
        type: Number,
        min: 1,
        max: 5
    },
    createdAt: {
        type: Date,
        default: Date.now(),
    },
    tour: [
        {
            type: mongoose.Schema.ObjectId,
            ref: 'Tour',
            required: [true, 'Review must be belong to a tour.']
        }
    ],
    user: [
        {
            type: mongoose.Schema.ObjectId,
            ref: 'User',
            required: [true, 'Review must be belong to a user.']
        }
    ]
},
    {
        //passing options, getting the virual properties to the document/object
        toJSON: { virtuals: true },
        toObject: { virtuals: true },
    }
);

and my tourModel:

const tourSchema = new mongoose.Schema({
    name: {
        type: String,
        required: [true, 'A tour must have a name'], //validator
        unique: true,
        trim: true,
        maxlength: [40, 'A tour name must have less or equal then 40 characters'],
        minlength: [10, 'A tour name must have at least 10 character']
        //validate: [validator.isAlpha, 'A tour name must have only alphabetic characters']
    },
    slug: {
        type: String
    },
    duration: {
        type: Number,
        required: [true, 'A tour must have a duration']
    },
    maxGroupSize: {
        type: Number,
        required: [true, 'A tour must have a group size']
    },
    difficulty: {
        type: String,
        required: [true, 'A tour must have a difficuulty level'],
        enum: {
            values: ['easy', 'medium', 'difficult'],
            message: 'Difficulty is either "easy", "medium" or "difficult"'
        }
    },
    ratingsAverage: {
        type: Number,
        default: 4.5,
        min: [1, 'Rating must be above 1'],
        max: [5, 'Rating must be below 5']
    },
    ratingsQuantaity: {
        type: Number,
        default: 0
    },
    price: {
        type: Number,
        required: [true, 'A tour must have a price']
    },
    priceDiscount: {
        type: Number,
        validate: {
            validator: function (val) {
                return val < this.price;
            },
            message: 'Discount price ({VALUE}) shoulld be below the regular price'
        }
    },
    summary: {
        type: String,
        trim: true,
    },
    description: {
        type: String,
        trim: true,
        required: [true, 'A tour must have a description']
    },
    imageCover: {
        type: String,
        required: [true, 'A tour must have a image cover']
    },
    images: [String], //array of strings 
    createdAt: {
        type: Date,
        default: Date.now(),
        select: false
    },
    startDates: [Date], //array of dates
    secretTour: {
        type: Boolean,
        default: false
    },
    startLocation: {
        //GeoJSON - Embedded object
        type: {
            type: String,
            default: 'Point',
            enum: ['Point']
        },
        coordinates: [Number], //expect an arr of numbers
        address: String,
        description: String
    },
    locations: [ //arr of GeoJSON objects - Embedded document inside the parent document
        {
            type: {
                type: String,
                default: 'Point',
                enum: ['Point']
            },
            coordinates: [Number],
            address: String,
            description: String,
            day: Number
        }
    ],
    //guides: Array --- array of user id's || embedding
    guides: [ 
        //Reference to the user data model without saving the guides in the tour data model
        //Child referencing
        {
            type: mongoose.Schema.ObjectId,
            ref: 'User'
        }
    ]
},
    {
        //passing options, getting the virual properties to the document/object
        toJSON: { virtuals: true },
        toObject: { virtuals: true }
    }
);

in tour model I virtual true for JSON and Object as you can see.

i want to use them to populate tour from review using the id:

//Virtual populate
tourSchema.virtual('reviews', {
    ref: 'review',
    foreignField: 'tour', //the tour field in the Review model
    localField: '_id' //_id of the tour in the Tour model
    //look for the _id of the tour in the tour field in review
});

I tried to go to mongoose documentation and everything seems to be fine in the virtual function but it doesn't work and i can't see the reviews on the tour when I use the route for seeing tour by id (can't see review field).

simpledeveloper22-Sep-20 6:45

Re: Setting max length property of masked input control in ember js

22-Sep-20 6:45

input component in ember as below:

{{#each tags as |tag index|~}}
    <li class="emberTagInput-tag">
        {{yield tag}}
        {{#if _isRemoveButtonVisible}}
        <a class="emberTagInput-remove" {{action 'removeTag' index}}></a>
        {{/if}}
    </li>
    {{~/each~}}
    
    <li class="emberTagInput-new">
        {{masked-input
        disabled=readOnly    
        class=(concat 'emberTagInput-input js-ember-tag-input-new' (if readOnly ' is-disabled'))
        maxlength='20'
        textMaxLength='20'
        placeholder=placeholder
        input-format='regex'
        input-filter='[A-Za-z0-9\ \-@#]{1,20}'
        input-filter-message='Complaint Id is not valid.'
        }}
    </li>

And I am using it in my hbs files as below:

<div class="col-md-2">
            <div class="form-group">
            <label for="due-date" class=" control-label">Complaint Id</label>
            {{#tag-input
            maxlength=20
            tags=tags
            addTag=(action 'addNewTag')
            removeTagAtIndex=(action 'removeTagAtIndex')
            as |tag|
            }}
            {{tag}}
            {{/tag-input}}
           </div>
        </div>

I want to set max length for the input that I enter as text in the textbox that comes with this component, any help please which property sets the max length that one can enter in it? Thanks a lot please.

ZurdoDev22-Sep-20 7:07

ZurdoDev

22-Sep-20 7:07

I see you have several attempts. Are they not working?

Built-in Components - Components - Ember Guides[^]

It's the standard maxlength attribute.

Social Media - A platform that makes it easier for the crazies to find each other.

Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.

Need to mask Alphanumeric values with some special characters allowed

simpledeveloper9-Sep-20 11:02

Re: Need to mask Alphanumeric values with some special characters allowed

9-Sep-20 11:02

I am using an masked-input field as below:

{{masked-input
   mask='********************'
   disabled=readOnly
   class=(concat 'emberTagInput-input js-ember-tag-input-new' (if readOnly ' is-disabled'))
   maxlength=maxlength
   placeholder=placeholder
   value=model.Address.AltPhone
   input-format='regex'
   input-filter='[A-Za-z0-9 \-_@#]{1,20}'
   input-filter-message='Complaint Id is not valid.'
   maxlength="20"
 }}

I want to allow all Alphanumeric values with only few special characters -, _, @, #, I don't want to allow other special characters, can somebody please help me what should be the mask value for it. Can somebody please help me in this regards, thanks in advance.

W∴ Balboos, GHB11-Sep-20 9:59

Re: Need to mask Alphanumeric values with some special characters allowed

11-Sep-20 9:59

Make life easier for yourself:

Create an onkeyup and onchange event for your input control.
Create the function target for the events
Inside function: use regex (regular expressions) to parse/cleaning 'value' from control.
update control value with result.

You can also handle the length, as well, truncating to whatever size you wish (a function arg?).

A plain javascript function will be useful for more controls - you could avoid the overhead of creating the template.

Ravings en masse^
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

simpledeveloper21-Sep-20 9:14

Re: Need to mask Alphanumeric values with some special characters allowed

21-Sep-20 9:14

I have tried by putting the input-filter as below:
input-filter='[A-Za-z0-9 \-_@#]{1,20}', it is accepting all the Alpha Numeric values but not allowing the 3 special characters that I want it to allow: -,@,#, can you please help me in this regards.
If mouse functions are better, can you please give me an example here - thanks in advance my friend.

W∴ Balboos, GHB21-Sep-20 10:07

Re: Need to mask Alphanumeric values with some special characters allowed

21-Sep-20 10:07

OK - lets go about this analytically:

It works for A-Za-z0-9
Now add just one of your special characters at a time and see which, if any work - or what we're really looking for - is which one is breaking your string.

Note, also, that shortcuts exist for standard numeric and alpha ranges:

[^] And, if I read it correctly, '\w' is the equivalent of '0-9A-Za-z' and the do mention the hyphen character, as well.

\d – is the same as [0-9]
\w – is the same as [a-zA-Z0-9_],
\s – is the same as [\t\n\v\f\r ], plus few other rare unicode space characters.

Comes from that page.

Find out the character that's killing you. It will help you remember three things (1) how to hunt for the problem (2) when you find the bad actor(s), why they're bad, (3) burn it into your mind so it is not only remembered but parallel problems are identified in advance.

Ravings en masse^
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

simpledeveloper21-Sep-20 10:28

Re: Need to mask Alphanumeric values with some special characters allowed

21-Sep-20 10:28

OK I have written a function for onKeyUp, as below, but what I want is to remove those special characters that are not from the 3 in the above list -, @, #.
Can you please modify the function how can I remove them automatically? Or suggest me for something. Thanks in advance my friend,
JS function:

forTest(e) {
                e = 'some test';
            },

Ember Control (html input-tag control):

{{#tag-input
tags=tags
addTag=(action 'addTag')
onKeyUp=(action 'forTest')
removeTagAtIndex=(action 'removeTagAtIndex')
as |tag|
}}
{{tag}}
{{/tag-input}}

W∴ Balboos, GHB22-Sep-20 3:27

Re: Need to mask Alphanumeric values with some special characters allowed

22-Sep-20 3:27

1) Whatever ember-control is, I don't use it. I use straight javaScript, no "frameworks".

2) Did you try, as I suggested yesterday, eliminating some of your special characters from your regex expression and see which of them work as expected? You didn't say.

OK - why I send you into this direction: I use php/javaScript/SQL all in the same page, which is often a generated page. It can absolutely not work on the basis of improperly handled nested single and double quotes - which only co-exist on the final page and it's occasionally not what one expects. Unless it sticks out in an obvious way (good luck) I need to roll back parts of the page creation until it works and then I have a point to look for what's not phased correctly.

You are in a similar situation: plain alpha-numeric filtering works. Your entire regex expression, however, does not. Do it piece by piece: only the alpha-numeric and then add one of your special characters. If it works, add another. If it fails - try another (not add to a failed version), which hopefully will now work without the know failure-causing character. For that matter, you may even wish to try just reversing the order of your special characters near the end of your regex expression.

But you've not told me what you have tried to uncover the problem - I want to teach you how to do this; much more valuable than the expression, itself.

Ravings en masse^
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

simpledeveloper22-Sep-20 6:47

Re: Need to mask Alphanumeric values with some special characters allowed

22-Sep-20 6:47

Yes I tried, its the mask value, which I am setting as mask='********************' is not allowing me to enter any special characters, if I remove it, its allowing all the characters and without limit.

Yes my exposure to JavaScript and Frameworks is limited, I am not able to find solution.
If I remove mask='********************', its not only allowing me all characters but unlimited number of characters, even if I try to set the max length property to 20 - need some help, thank you.

W∴ Balboos, GHB22-Sep-20 6:53

I have HTML and jQuery as below, I want to convert that into EmberJS

22-Sep-20 6:53

Get rid of the template!

In the same function where you use the regex expression to clean the string, get the length of the cleaned string and if it's greater than 20 (or whatever value you like) the send back a "Substring" of length 20 as the value.

Simple as that. No annoying masks to worry about for some so simple as a max-length string constraint. If your string's name is 'mystring'

JavaScript

if( mystring.length > 20)
 mystring = mystring.substring(0, 20);

It takes some learning, but all the tools you need are already in javaScript.

Ravings en masse^
"The difference between genius and stupidity is that genius has its limits." - Albert Einstein
"If you are searching for perfection in others, then you seek disappointment. If you seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

Pixelated in javascript

Hasan Moussawi8-Sep-20 21:52

Hasan Moussawi

8-Sep-20 21:52

I have a box composed from 5 images placed over each other to create a one picture. So I need to create a pixelated div to make this box pixelated. Because I have 5 images and the color of these images can be changed dynamically so I can't solve this problem using canvas. Any solution, idea, please!!

simpledeveloper8-Sep-20 10:44

Re: I have HTML and jQuery as below, I want to convert that into EmberJS

8-Sep-20 10:44

HTML:

<div class="tag-container" id="tag-container">
      tag1tag2tag3
    </div>
<input type="text" value="" placeholder="Add a tag" id="add-tag-input" />

jQuery:

$(document).ready(function(){
    $(function(){
      $("#add-tag-input").on({
        focusout : function() {
          var txt = this.value.replace(/[^a-z0-9\+\-\.\#]/ig,''); // allowed characters
          if(txt) $("<span/>", {text:txt.toLowerCase(), appendTo:"#tag-container", class:"dashfolio-tag"});
    
          this.value = "";
        },
        keyup : function(ev) {
          // if: comma|enter (delimit more keyCodes with | pipe)
          if(/(188|13)/.test(ev.which)) $(this).focusout(); 
        }
      });
      $('.tag-container').on('click', 'span', function() {
        if(confirm("Remove "+ $(this).text() +"?")) $(this).remove(); 
      });
    });
    });

And CSS:

.tag-container {
      max-width: 300px; /* helps wrap the tags in a specific width */
    }
    
    .dashfolio-tag {
      cursor:pointer;
      background-color: blue;
      padding: 5px 10px 5px 10px;
      display: inline-block;
      margin-top: 3px; /*incase tags go in next line, will space */
      color:#fff;
      margin-right: 4px;
      background:#789;
      padding-right: 20px; /* adds space inside the tags for the 'x' button */
    }
    
    .dashfolio-tag:hover{
      opacity:0.7;
    }
    
    .dashfolio-tag:after { 
     position:absolute;
     content:"×";
     padding:2px 2px;
     margin-left:2px;
     font-size:11px;
    }
    
    #add-tag-input {
      background:#eee;
      border:0;
      margin:6px 6px 6px 0px ; /* t r b l */
      padding:5px;
      width:auto;
    }

We are using less, instead of CSS, can you please help in converting the above code into Ember JS

ZurdoDev9-Sep-20 11:36

ZurdoDev

9-Sep-20 11:36

I suggest you describe where you are stuck. Asking someone to do all the work for you will not likely get you any help.

Social Media - A platform that makes it easier for the crazies to find each other.

Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.

Re: I have HTML and jQuery as below, I want to convert that into EmberJS

simpledeveloper9-Sep-20 12:47