JavaScript

7-Feb-19 22:29

See JavaScript - Visual Studio 2015 | Microsoft Docs[^]

Simple Modal Dialog

Bram van Kampen31-Jan-19 11:58

Calling Web api from Angular Service and Component

31-Jan-19 11:58

Hi,
I need a Modal Dialog for a customer to submit their account code and password. I have put the following Java Script together:-

JavaScript

<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function LoginToAccount() {
    window.open("LogIn/LoginForm.html", "","width=350,height=150")
}
//-->
</SCRIPT>

It works of sorts, the form appears on the screen, but:-
- it appears at the Top Left Corner rather than Centre Screen
- It contains the Source Bar, and all the windows furniture.
- The Dialog is not Modal.

Is there a way to remedie this, or am I totally on the wrong path.

Kind Regards, Smile | :)

Bram van Kampen

Re: Simple Modal Dialog

Richard Deeming8-Feb-19 1:09

Richard Deeming

8-Feb-19 1:09

There used to be a showModalDialog method that would work for this, but it's no longer supported in anything other than Internet Explorer and Safari:

Window.showModalDialog() - Web APIs | MDN[^]:
This method was removed in Chrome 43, and Firefox 56.

There's the <dialog> element, which is meant to be the replacement for this method. But it's not supported in IE, Edge, or Safari, and needs to be explicitly enabled in Firefox. There's a polyfill available, but I can't see any obvious mention of which browsers it supports.
<dialog>: The Dialog element - HTML: HyperText Markup Language | MDN[^]
GitHub - GoogleChrome/dialog-polyfill: Polyfill for the HTML dialog element[^]

There are other script options available - for example, Bootstrap's Modal[^] or jQuery UI's Dialog[^].

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

simpledeveloper29-Jan-19 7:07

simpledeveloper

29-Jan-19 7:07

Hi,

I have a Web Api as below:

[Route("api/PeakTimeRebate")]
public class PeakTimeRebateController : Controller
{
    [HttpGet("GetTransactionStatus")]
    [DecryptoFilter]
    public IActionResult GetTransactionStatus(string EncryptedAccountNumber)
    {
        this.Response.ContentType = "text/html";
        int randVal = new Random().Next(0, 10);

        if ((randVal == 1) || (randVal == 2) || (randVal == 3) || (randVal == 5) || (randVal == 7))
            return new ObjectResult("Prime");
        if (randVal % 2 == 0)
        {
            return new ObjectResult("Even");
        }
        else
        {
            return new ObjectResult("Odd");
        }
    }
}

I am calling this from a Angular Service as below:

@Injectable()
export class PeakTimeRebatesService extends ServiceBase {
    private _peaktimerebateTransactionStatusUrl: string = '/api/PeakTimeRebate/GetTransactionStatus';

    constructor(public _http: PgeCustomHttp) {
        super(_http);
    }

    public peakTimeRebateTransactionStatus(encryptedAccountNumber: string): Observable<string> {
        debugger;
        const params: URLSearchParams = new URLSearchParams(); //'EncryptedAccountNumber', new PgeCustomQueryEncoder()
        params.set('EncryptedAccountNumber', encryptedAccountNumber);

        const options = new RequestOptions({ search: params });

        return this._http.get(this._peaktimerebateTransactionStatusUrl, options)
            .map(this.extractBoolean)
            .catch(this.handleError);
    };
};

I already have imported necessary components for the Service that I haven't mentioned here.

Now I have a component as below:

import { PeakTimeRebatesService } from '../peakTimeRebates/peakTimeRebates.service'; //Importing my Service


@Component({
    selector: 'transactionSuccessful-message',
    templateUrl: 'transactionSuccessful.component.html'
})

export class TransactionSuccessfulComponent extends ComponentBase {
    @Input()
    public TransactionMessage: string = '';
    public TransactionSuccessStatus = false;
    public TransactionExceptionStatus = false;
    private max: number = 10; private min: number = 0; private randVal: number; private checkStatMessage: string;

    @Input()
    public get EncryptedAccountNumber() {
        debugger;
        return this._encryptedAccountNumber;
    }

    public set EncryptedAccountNumber(value: string) {
        debugger;
        if ((value == null) || (value == '')) {
            value = 'XYZ'
        }
        this._encryptedAccountNumber = value;
        if (this.EncryptedAccountNumber !== '') {
            this.peakTimeRebateTransactionStatus(this.EncryptedAccountNumber);            
        }
    }

    private _encryptedAccountNumber: string = '';

    public constructor(
        private _service: PeakTimeRebatesService       
    ) {        
        super();
        debugger;
    }


    private peakTimeRebateTransactionStatus(encryptedAccountNumber: string): void {
        debugger;
        this._service.peakTimeRebateTransactionStatus(encryptedAccountNumber).subscribe((peakTimeRebateTransactionStatus: any) => {
            this.TransactionMessage = peakTimeRebateTransactionStatus;           
        });
    }


    ngOnInit(): void {
        debugger;
        this.EncryptedAccountNumber = '';      
        if (this.TransactionMessage == "Prime")
        {
            this.TransactionSuccessStatus = true;
        }
        else if (this.TransactionMessage == "Even")
        {
            this.TransactionSuccessStatus = false;
        }
        else
        {
            this.TransactionExceptionStatus = true;
        }
    }
}

And finally my html component is:

<div class="layout-two-column">
    <section class="layout-primary">
        <form #payBillSuccessForm="ngForm" id="payBillSuccessForm" name="payBillSuccessForm" novalidate>

            <div *ngIf="TransactionSuccessStatus">
                <h2 id="transactionSucessfulText">{{ 'Common.EnrollmentSuccessful' | Translate }}</h2>
            </div>

            <div *ngIf="!TransactionSuccessStatus">
                <h2 id="transactionFailedText">{{ 'PeakTimeRebatesView.EnrollmentSuccessMessage' | Translate }}</h2>
            </div>

            <div *ngIf="TransactionExceptionStatus">
                <h2 id="transactionExceptionText">{{ 'PeakTimeRebatesView.PeakTimeRebatesHeader' | Translate }}</h2>
            </div>

            <div class="divider-invisible text-right">
                <a class="btn" routerLink="/AccountInformation" id="doneButton">{{ 'Common.Done' | Translate }}</a>
            </div>
        </form>
    </section>
</div>
<browser-back [lastpage]="true"></browser-back>

Now I am expecting that I want to show the message depending upon the returned value from web api, (the problem is that, the execution of the ngOnInit is finishing before execution of Web Api, I mean the setting of TransactionMessage is happening before the Web Api returns value, I am not sure why is it happening, I am new to the client side programming World) I found it when I put the break point, from onInit method before Service call is being completed the control is coming back and finishing the onInit then finishing the web api call, trying to understand how to call the web api from the angular controller, is the onInit not a right place to call the web api from the Angular Component. Any suggestions where am I making mistake? Any help would be very very helpful, thanks in advance. I am new to Angular, really need some help - please, thank you.

modified 29-Jan-19 16:17pm.

For loop query

Member 1413327128-Jan-19 22:54

Member 14133271

28-Jan-19 22:54

Hi all,
Can you help with this query..

How can we execute a next condition if the first condition is false. In the for loop statement in javascript.

Richard MacCutchan28-Jan-19 23:35

28-Jan-19 23:35

The same way you would do it in code that is outside of a for loop: with an IF statement. Your question is not clear, perhaps if you show the code where the problem is, people will be able to make suggestions.

ZurdoDev30-Jan-19 2:08

ZurdoDev

30-Jan-19 2:08

Easy.

JavaScript

for (int i = 0; i < 10; i++){
  if (something == 1)
  {
     // do something
  }
  else{ 
     // do something else.
  }
}

Everyone is born right handed. Only the strongest overcome it.

Fight for left-handed rights and hand equality.

Suresh Madhavaraju11-Feb-19 3:20

Suresh Madhavaraju

11-Feb-19 3:20

You should actually write if else ladder to check for another condition if one fails, like below;

JavaScript

for(var i = 0; i < 10; i++)
{
 if(condition1==true)
 {
   // Do something
 }
 else if(condition2==true)
 {
   // Do something
 }
 else if(conditionN==true)
 {
   // Do something
 }
 else
 {
  // Do something if all the above conditions are failed
 }
}

W∴ Balboos, GHB7-Mar-19 7:18

W∴ Balboos, GHB

7-Mar-19 7:18

An alternative view of some of the previous answers.
Check for your condition.
Do what needs to be done.
Execute a continue or break

If our condition is false, it will simply continue down through instruction in the remainder of your loop.

Although methods like this or the others have specific circumstances. when they are preferred, more often than night it's simply a matter tastes.

An if/else ladder presumes any number of additional conditions may be added
If circumstances allow (depends on what you're testing for and the language), you can use a switch statement.

There are usually many solutions to each programming problem - often pretty much equal in quality. You'll eventually develop a style of your own that works best with your train of thought. And, of course, experience.

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 are seek perfection in yourself, then you will find failure." - Balboos HaGadol Mar 2010

Debugging

Bram van Kampen26-Jan-19 14:14

26-Jan-19 14:14

Hi,

How do I debug JavaScript Code. I.E. Set Breakpoints and inspect values, etc.

Regards, Smile | :)

Bram van Kampen

Re: Debugging

Richard Deeming28-Jan-19 1:01

Richard Deeming

28-Jan-19 1:01

Using the browser's developer tools:

Using VS2017:
Client-side debugging of ASP.NET projects in Google Chrome | ASP.NET Blog[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: Debugging

Bram van Kampen28-Jan-19 11:21

Can anyone help me understand this code?

28-Jan-19 11:21

Thanks Richard,

Never knew this. At least I do not have to buy expensive new tools. I am now 65, and have no formal training in Computer Science. The subject simply did not exist when I went to uni in 1972.
I am trying to teach myself java-script in the eye of necessity. I am coming to conclude that it's similarity to 'C' is only on the surface. It seems to work in dark and mysterious ways.

Good to hear from you again,

Bram van Kampen

Member 1411814323-Jan-19 1:20

Member 14118143

23-Jan-19 1:20

I have picked up a fairly simple code from the internet but I am not understanding how it is making the connection with itself.

CSS

<style>

body {font-family: Arial;}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
</style>

<h2>Tabs</h2>
<p>Click on the buttons inside the tabbed menu:</p>

<div class="tab">
  <button class="tablinks" onclick="openCity(event, 'London')">London</button>
  <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
  <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
</div>

<div id="London" class="tabcontent">
  <h3>London</h3>
  <p>London is the capital city of England.</p>
</div>

<div id="Paris" class="tabcontent">
  <h3>Paris</h3>
  <p>Paris is the capital of France.</p> 
</div>

<div id="Tokyo" class="tabcontent">
  <h3>Tokyo</h3>
  <p>Tokyo is the capital of Japan.</p>
</div>

JavaScript

function openCity(evt, cityName) {
  var i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablinks");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
}

For one thing, I don't understand why the button are put at class "tablinks" when such a class does not exist in the entire css. I kind of understand the Javascript and I am someone who is not familiar with Javascript that much. But I just don't understand how the CSS is being worked here.

I would also like to know how this code would work if I used a <href> links here instead of buttons. How would that make my code different?

Thanking in advance.

Re: Can anyone help me understand this code?

Richard Deeming23-Jan-19 7:35

Richard Deeming

23-Jan-19 7:35

Member 14118143 wrote:
I don't understand why the button are put at class "tablinks" when such a class does not exist in the entire css.

Because that class is being used to target the elements from the Javascript:

JavaScript

tablinks = document.getElementsByClassName("tablinks");

Document.getElementsByClassName() | MDN[^]

Member 14118143 wrote:
I would also like to know how this code would work if I used a <href> links here instead of buttons. How would that make my code different?

The only difference would be that you would need to call evt.preventDefault() in your openCity method to prevent the browser from navigating to the href.
Event.preventDefault() | MDN[^]

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

JavaScript : TypeScript :: Python : <what>

Amarnath S20-Jan-19 16:58

Amarnath S

20-Jan-19 16:58

This is not a JavaScript question, but more a Python question, and since I could not find a section here to post Python questions, I am posting it in the JavaScript section. Admins - please move this question to the appropriate forum, if you feel so.

From what little I know of TypeScript, it is a superset of JavaScript which is strongly typed. So, a TypeScript program should have function arguments declared, and return types declared. Also, a TypeScript program is transpiled to JavaScript, which is then run on the browser. This is my current understanding - please correct me if this is incorrect.

Now, I am in the process of converting a Python program to C++. A Python program can just define a function and its arguments without specifying their types, and it will only bomb at run time if the input data types do not match. Is there a version/superset of Python where strict argument type checking is done, and an intermediate compilation/transpilation step is used to check data types, and errors reported, which then generate the resulting Python program. ... (A)

The difficulty I am facing in converting the Python program to C++ is: I really don't know what are the argument types, and is the return type. These are needed to be coded in the C++ program. Any pointers in this regard are welcome. ... (B)

I am writing about two different things A and B above, and A is not likely a resolution of B. However, if someone can think on the lines of A above, and work towards a solution, I feel that it would help future persons working on converting Python code to C++.

Re: JavaScript : TypeScript :: Python : <what>

Richard MacCutchan20-Jan-19 21:29

Injecting an external page to a div using ajax.

20-Jan-19 21:29

A. As far as I ama aware Python does not offer strict type checking on variables. That is one of its strengths (allegedly).
B. The only way to know what type to declare is by studying the Python code and figuring it out from the context.

Note: there is not a specific Python forum here, but you can always use https://www.codeproject.com/Questions/ask.aspx[^].

Member 1125974616-Jan-19 23:59

Member 11259746

16-Jan-19 23:59

Hi everyone.

I'm not sure if this question has been asked before or not.

I am trying to load/reference an external web site to my local project in a div.

For some reason, my boss doesn't want to use an Iframe to do this but inject that website to a div.

I had an issue with the CORS but added headers to get it and it worked but the problem is it doesn't get the scripts and styling sheets.

I have tried using the jquery Load as well but got the same results. Thanks.

Here is my code:

<div id="injection"></div>

<script>
    $(document).ready(function () {
       PageInjector('targetURL');
    });

    function PageInjector(url) {
        $("#injection").html('');
        $.ajax({
            url: url,
            method: "get",
            success: function (data) {
                $("#injection").html(data);
            }
        });
    }
</script>

Re: Injecting an external page to a div using ajax.

Graham Breach17-Jan-19 0:31

Graham Breach

17-Jan-19 0:31

Unless you control the content of the external website, you can't really expect it to work. The external site's scripts and CSS will be relative to its own document root, which (if you're lucky) will end up as a child node inside your site's DOM.

Re: Injecting an external page to a div using ajax.

Member 1125974617-Jan-19 0:36

Member 11259746

17-Jan-19 0:36

I do have full access to the external site, its even hosted from our side.

That's why I was able to add the headers to the web.config file.

I just need to reference the very same site to a different page in a different project.

Thanks.

Melboure

Can someone help me reverse engineer this code and get it working as jQuery?

Member 1411874515-Jan-19 4:14

Member 14118745

15-Jan-19 4:14

Hi, I am trying to get a page to work properly offline. It uses EmberJS for rendering, RequireJS for defining modules. Since I have the page fully loaded I don't need any of the app-specific functionality. I just need user interaction on page to work. Here is example of HTML that I am trying to get to behave properly:

HTML

<div id="area49253971_6938" class="component interaction-component float-none clear-none  interaction_booted">
    <div role="status" class="int-prep hidden"></div>
    <div>
        <div class="data-field interaction-type">RevealContent</div>
        <div class="interaction_title"></div>
        <div class="interaction_content RevealContent" style="min-height: 400px; width: 400px;">
            <div class="pointer">
                <td>
                    <div id="area49253971_6940" class="component image-component float-left clear-none  booted"><img src="somelink" height="50" width="30" title="" alt="" style="padding-right: 10px;"></div>
                    <p class="body" id="area49253971_6941">^__em>^__strong><a href="#">Some question</a></p>
                </td>
            </div>
            <div style="display: block;">
                <td>
                    <p class="body" id="area49253971_6942">^__strong>Some answer</p>
                </td>
            </div>
        </div>
        <div class="interaction_data" style="display: none;">
            <div id="area49253971_6939" class="component table-component float-none clear-none ">
                <div class="component_caption"></div>
            </div>
        </div>
    </div>
</div>

JavaScript

Bram van Kampen11-Jan-19 13:52

11-Jan-19 13:52

Hi,

What are the (Human Understandable) Rules for Scope and Type declarations, etc. for Java Script. I come from a C/CPP/MFC background, where all these things are clearly defined. Is it like early Basic, with a global scope? or what. a reference to a site, or a small book would be much appreciated.

Kind Regards,

Smile | :)

Bram van Kampen

Re: JavaScript

Richard MacCutchan11-Jan-19 22:50