New to coding and using visual studio code for Mac for the first time as I am following a coding tutorial on freecodecamp. I installed VSC and live server and Chrome browser extension, yet I get an error when I go to live server:
// = 0 ? '&' : '?') + '_cacheOverride=' + (new Date().valueOf()); } parent.appendChild(elem); } } var protocol = window.location.protocol === 'http:' ? 'ws://' : 'wss://'; var address = protocol + window.location.host + window.location.pathname + '/ws'; var socket = new WebSocket(address); socket.onmessage = function (msg) { if (msg.data == 'reload') window.location.reload(); else if (msg.data == 'refreshcss') refreshCSS(); }; if (sessionStorage && !sessionStorage.getItem('IsThisFirstTime_Log_From_LiveServer')) { console.log('Live reload enabled.'); sessionStorage.setItem('IsThisFirstTime_Log_From_LiveServer', true); } })(); } else { console.error('Upgrade your browser. This Browser is NOT supported WebSocket for Live-Reloading.'); } // ]]>
I tried on Mozilla, but the extension is not even able to be installed as add on corrupt - https://share.getcloudapp.com/WnuG42w2
Tried without the extension on Firefox and got the same error above as Chrome.
Any help would be appreciated!
Recently, I faced the same problem using Visual Code. It is a 'Live Server' error. Live Server tries to inject some code into the original code as a comment, which leads to this error. Refreshing the live server will make things normal again.
Try to close the tag with a closing tag. For example replace:
<textarea
id="message"
name="message"
cols="30"
rows="10"
/>
with:
<textarea
id="message"
name="message"
cols="30"
rows="10"
></textarea>
This actually worked for me.
Please recheck your codes again. See if there is missing some symbol or tag. In VS Code you understand by the code colors.
I had a similar issue like this. Although, I am new to web development field. The code I was faced problem was:
<section>
<div>
<img src="images/designer.png" alt="web designer>
</div>
<div>
<h1>Big Dream</h1>
<h2>To become a developer</h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</section>
You see in the alt="" part in the img tag, I have missed a (") double quotation.
Related
I have a number of DataGrids in our app.
Running tests with Playwright - Chromium - , sometimes prevents the rows from being rendered.
As can be seen in the screenshot, the rows exist, but just not being rendered.
More details, this mostly happens when running the tests from gitlab, but I have also seen it in the front end. Just rarely.
Anybody have any idea how to fix it?
All the affected Tables have a cell that renders like this:
renderCell: (params: any) => (
<div key={params.row.id} className="action_list_element">
{params.row.actionFile
.filter(
(af: ActionFile) =>
af?.actionFileType === ActionFileType.Output
)
.map((af: ActionFile, index: Number) => {
if (af?.file) {
return (
<div
className="no_line_hight"
key={params.row.id + index}
>
<b>
<FileIcon
fileName={af?.file.name}
isValid={af?.file.isValid}
fontSize={"small"}
/>{" "}
<a
href={
"/activity/" +
params.row.pmxActivity.id +
encodeURIComponent("/" + af?.file.absolutePath) +
encodeURIComponent(
"?versionId=" + af?.file.versionId
)
}
>
{af?.file.absolutePath}
</a>
</b>{" "}
({af?.file.revision}) -{" "}
{af?.file.isValid ? "valid" : "not valid"}
</div>
);
} else {
return "";
}
})}
</div>
),
Tried upgrading both Playwright and MUI to the lates version. Did not work.
Also tried to reproduce with my browser, but it went on fine.
It seams it appeared because we were running our test with a headless browser.
https://mui.com/x/react-data-grid/virtualization/
The Documentation explained what was happening, and how to fix it.
I am completely new to Angularjs and haven’t been doing any code for ages. I started setting up my website again with Angularjs. I have a main page and an about page, to which the user gets via ngRoute on ng-click (or hitting space). Once on the about page, the user can go back by clicking somewhere on the page and so on.
App.js
var app = angular.module("MyApp", ["ngRoute"]);
app.config(function($locationProvider, $routeProvider) {
$routeProvider
.when("/teaser", {
controller:"teaserCtrl",
templateUrl:'teaser.html'
})
.when("/about", {
controller:"aboutCtrl",
templateUrl: "about.html"
})
.otherwise({
redirectTo:"/teaser"
})
});
app.controller("mainCtrl", function($scope, $http, $location) {
$scope.v = {
inverted: false,
display: true,
offwhite: true,
}
$scope.$on("space", function() {
if ($scope.v.teaser) {
$location.path("/about")
$scope.v.teaser = false
} else {
$location.path("/teaser")
$scope.v.teaser = true
}
$scope.$apply()
})
$scope.goHome = function(){
$scope.$broadcast("goHome")
}
});
app.directive("ngMobileClick", [function () {
return function (scope, clickElement, attrs) {
clickElement.bind("touchstart click", function (e) {
e.preventDefault();
e.stopPropagation();
scope.$apply(attrs["ngMobileClick"]);
});
}
}])
HTML
<body ng-controller="mainCtrl as main" ng-mobile-click="goHome()" ng-class="{inverted: v.inverted, bg: v.offwhite}" space>
<div class="content" ng-view ng-hide="v.display"></div>
//My body code
<script ng-init="sw = 'some website'; id="about.html" type="text/ng-template">
<div class="about">
<p class="text" ng-click="next(); $event.stopPropagation()">
<p>some text</p>
<br>
<a ng-href="{{mail}}" ng-click="$event.stopPropagation()">some address</a>
</p>
</div>
</script>
</body>
The code for the about page is written into a script and it has hyperlinks (ng-href). Now my issue: As you can see, I changed my ng-click to ng-mobile-click for the body-section. If I also change it in the script for the hyperlinks, something weird is happening which I can’t really figure out (links change to hover color, but still no redirection to the ng-href.
For the desktop version, the click is triggering ngRoute, but I can also click the links. For the mobile version this is not possible any more. Any ideas how I can fix this? I know, there is no hovering possible, but somehow I need to detect the hyperlinks also on mobile devices without being redirected to the main-page.
As I said: this is my first try with Angularjs and I haven’t done any code for a while, please be as clear as possible!
There is another controller for teaser/about which I haven’t put here, as well as the directive for the keyup.
Any ideas or suggestions? Thank you so much in advance!
How do I find element in Protractor to click on a button (login button).... I have entered login name and Password but no luck clicking on my "log in" button. My code does not have model, Repeater , ID or class for the login section to enter the App.
Thanks in advance for the help. Ho do I format the actual code so I can run this using Protratcor?
Following is my code:
<div class="btn-panel">
div>
<div ng-show="loginAsAdmin" hs-gesture="{handler: goToPin}" class="ng-hide">
<i class="icon-back-round"></i>
</div>
!--<div class="brad-all attention" hs-gesture="{handler: clearLogin}">
i class="icon-close-round"></i>
</div>-->
<div class="btn-ok" hs-gesture="{handler: doSubscribe}" localize="(!canSubscribe || loginAsAdmin) ? 'Log In' : 'Subscribe'">Log In</div>
</div>
</div>
<div ng-show="loginAsAdmin" hs-gesture="{handler: goToPin}" class="ng-hide">
<i class="icon-back-round"></i>
</div>
<div class="btn-ok" hs-gesture="{handler: doSubscribe}" localize="(!canSubscribe || loginAsAdmin) ? 'Log In' : 'Subscribe'">Log In</div>
Edit for future users (This command was a workaround rather than a direct solution to his original problem of not finding/clicking button):
You could also try submitting the form by hitting enter (you may want to do this while within the password field) - browser.driver.actions().sendKeys(protractor.Key.ENTER).perform();
Another Edit: This also just occurred to me - there is another option to simulate a click event: browser.driver.actions().mouseDown(loginBtn).mouseUp().perform();
Original Post
You say your code does not have an ID or class, but I see your Login links having the class 'btn-ok'? Maybe I'm misunderstanding but you could try using cssContainingText:
var loginBtn = element(by.cssContainingText('.btn-ok', 'Log In');
loginBtn.click();
That will locate the element with a class of 'btn-ok' with the specified string of 'Log In'
Source: https://angular.github.io/protractor/#/api?view=ProtractorBy.prototype.cssContainingText
#kevin Presuming that
' <div class="btn-ok" hs-gesture="{handler: doSubscribe}" localize="(!canSubscribe || loginAsAdmin) ? 'Log In' : 'Subscribe'">Log In</div>
</div>'
is the tag that holds the your login button and also only clicking is what you need. following might work for you:
element(by.xpath("//div[contains(#class,'btn-ok') and contains(text(),'Log In')]")).click();
You can select it by className using element(by.className('btn-ok')) or element(by.css('.btn-ok')) and then simply throw a .click() on the end and voila:
element(by.css('.btn-ok')).click(); or $('.btn-ok').click()
I have got a set 3 HTML Pages
I am using Apache Tomcat 7 server . I have got the following HTML pages (All are HTML pages only)
login.html
sales.html
index.html
The code for the login.html is when clicked on submit is
<input type="email" name="email" id="email" >
<input type="pin" name="email" id="pin" >
<button class="primary login-btn">Submit</button>
Once clicked on Submit button , i am calling a Jersey REST Webservce this way and will response either true OR false based on the values present in our Database
function submitLoginForm() {
var email_input = $.trim($("#email").val());
var pin_input = $.trim($("#pin").val());
var logininfo = {
'email': email_input,
'pin': pin_input
};
var login_information = JSON.stringify(logininfo);
$.ajax({
type: 'POST',
dataType: 'json',
data: login_information,
url: url + '/HEGS/orn/webchecklogin',
success: function(response) {
// if true , redirect to sales.html page
window.location = "index.html"
},
});
}
All this is working fine , my issue is , how can i stop the prevent the user from accessing the page directly
For example if he types the follwing URL
http:localhost:8080/HEGS/dealer/sales.html
You would want to redirect the url to one file, which would then load the correct file based on the criteria you set. I don't know much about Tomcat, but this article seems to explain it well under the "URL Rewriting" section.
I am facing a strange error while adding the facebook comment plugin in my AngularJS app.
The simplified structure of the app page is
<html ng-app="myapp">
<head>
...
</head>
<body>
<div>
...
</div>
<div ng-view></div>
...
</body>
</html>
The page with fb comment box is loaded in ng-view. The structure of page that contains fb comment box is as follows
<div id="fb-comment-box>
<div class="fb-comments" data-href="http://mydomain.com/page/{{ page.id }}" data-numposts="5" data-colorsheme="light"></div>
</div>
The page is angularjs scope variable which comes from controller. When i load this page in browser and do inspect element. It shows the correct page id i.e. data-href is
data-href = "http://mydomain.com/page/2"
But below the fb comment box, Facebook shows following error
Warning: http://mydomain.com/page/%7B%7B%20page.id%7D%7D is
unreachable.
I can see the angularJS scope variable is not binding. Does anyone know how to solve this issue?
This is probably due to the fact that the FB functionality kicks in before Angular is able to change the data-href attribute.
A directive seems like a good choice here:
You basically need to create the comment-box after Angular can provide the correct URL.
Because this involves asynchronous DOM manipulation, you need to use FB.XFBML.parse() to let FB process the comment-box once the data-href attribute is changed.
The directive:
.directive('dynFbCommentBox', function () {
function createHTML(href, numposts, colorscheme) {
return '<div class="fb-comments" ' +
'data-href="' + href + '" ' +
'data-numposts="' + numposts + '" ' +
'data-colorsheme="' + colorscheme + '">' +
'</div>';
}
return {
restrict: 'A',
scope: {},
link: function postLink(scope, elem, attrs) {
attrs.$observe('pageHref', function (newValue) {
var href = newValue;
var numposts = attrs.numposts || 5;
var colorscheme = attrs.colorscheme || 'light';
elem.html(createHTML(href, numposts, colorscheme));
FB.XFBML.parse(elem[0]);
});
}
};
});
The HTML:
<div id="fb-comment-box" dyn-fb-comment-box
page-href="https://example.com/page/{{page.id}}"
numposts="5"
colorscheme="light">
</div>
NOTE:
The directive's scope will constantly watch for changes in the page-href attribute and update the comment-box. You can change this to suit your needs (e.g. also watch for changes in the other attributes or bind it once and stop watching).
See, also, this short demo.