I am for the first time trying to work on Angular JS . I designed a HTML form which contains hyperlink . Now i want to register a click event on the same hyperlink but it is not happening. I have added CDN reference for the angular JS at the end of Body and adding Javascript code in the head section of the HTML page.
Here is My Hyper Link markup..
<div ng-app="LoginApp" ng-controller="LoginController" class="top-big-link">
<a class="btn btn-link-1" href="" ng-click="Register()">Register</a>
<a class="btn btn-link-2" href="" ng-click="Login()">Login</a></div>
and here is my Angular JS Script in the Head Section ..
<script type="text/javascript">
var app = angular.module('LoginApp', [])
app.controller('LoginController', function ($scope) {
$scope.Register = function () {
$scope.Message = "Button clicked."
}
<pre></pre>});
</script>
Also on checking the developer console of Chrome i am getting following error message ..
Uncaught SyntaxError: Unexpected token <
angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.9/$injector/modulerr?p0=LoginApp&p1=Error%3… ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.9%2Fangular.min.js%3A17%3A350)
Please help me to resolve this ..
There is no problem with your event handler: the error says "Syntax Error: Unexpected <". So your angular application did not even start, because the javascript code of your application is invalid.
This particular error, usually means your browser is trying to interpret some HTML code as javascript.
Start by removing the <pre></pre> from your controller code if that's not an artefact from copy pasting in stackoverflow.
If that does not work, it means that you are referencing another HTML file (most likely a 404 error) in a <script src="..."></script> somewhere in your code, or that you have a syntax error somewhere else.
Related
I am facing an issue with my script that uses the jQuery .load() method. The script is designed to load the content from a URL into a specific element on my page when a user clicks on a nav link. However, I am receiving the error message "TypeError: $(...).load is not a function." and I am not sure why this is happening.
Here is my script:
<script>
$(document).ready(function() {
// Add click event listener to all nav links
$(document).on('click', '.nav-link', function(event) {
event.preventDefault();
// Get the URL of the clicked link
var url = $(this).attr('href');
// Load the content from the URL into the content-column
$('#content-column').load(url);
});
});
</script>
I have made sure that I am using the latest version of jQuery and that it is properly included in my HTML file.
If anyone has any experience with this issue or knows how to resolve it, I would greatly appreciate your help.
Thank you!
Currently all scripts I have tried either result in a redirect to the actual url or the script works for one click and then stops working after that.
Hi I have started working on angular2. I came across a scenario where I have to put external javascript file in my angular2 application. I have tried as below.
At first I created testjs.js file and I added the below code
function test() {
alert('TestingFunction')
}
Then in index.html I referenced as below.
<script src="~/ClientApp/Assets/testjs.js"></script>
Then I have fetchdata.component.js file. I added below code into it.
declare var test: any;
f() {
new test();
}
Finally in fetchdata.component.html I added below code.
<h1>
<button (click)='f()'>Test</button>
</h1>
When click the button it prompts below error in browser.
FetchDataComponent.html:26 ERROR ReferenceError: test is not defined
at FetchDataComponent.f (fetchdata.component.ts:15)
Can someone help me in this issue? Any help would be appreciated. Thank you!
I'm having an issue with embedding Bokeh inline. Particularly, there is an issue with loading the resources from the 'link' tag (refer to html snippet below). For some reason, when I try try to embed a Bokeh plot inline, the following error occurs: 'Failed to load resource: the server responded with a status of 404 (Not Found)', referencing this link - https://cdn.bokeh.org/bokeh/release/bokeh.min.css.map
However, the above address is different from the one I indicate in the link tag (it omits the bokeh version at the end). I have no idea why this error occurs, it's the first time that this happens. I have previously used inline embedding successfully on a number of occasions.
<head>
<link href="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.1.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.bokeh.org/bokeh/release/bokeh-0.12.1.min.js>
</script>
</head>
EDIT
I am trying to use inline embedding together with jQuery (I would like to display different Bokeh plots without reloading the entire page every time).
When I looked for further error details in the console, I found the following error: "Error rendering Bokeh model: could not find tag with id..."
If it's of any relevance, here is the jQuery script in my html:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type=text/javascript>
$(function() {
$('a#process_input').bind('click', function() {
$.getJSON('/background_process', {
proglang: $('input[name="proglang"]').val(),
}, function(data) {
$("#result").html(data.a);
$("#r").html(data.b);
});
return false;
});
});
</script>
Where 'data.a' and 'data.b' are the Bokeh-generated script and div tags, respectively.
Any suggestions or advice would be much appreciated!
Best guess is that the script is executing first/early, before the <div> is inserted into the DOM. You will need to find a way to guarantee that the <div> is available by the time the the script executes.
As an aside the partial load use case was not really envisioned when the componenent function was created. If you want to do partial loads, it might be better to serve the doc JSON and then calling Bokeh.embed.embed_items directly on from JavaScript somehow. But it would probably take some experimentation and discussion and back and forth to get that working, which SO is not very good for. I'd encourage you you bring this topic to the public Discourse for further discussion.
I am writing (or attempting to write) my first Chrome extension, and I cannot figure out this error I keep getting. My background code is
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
console.log('works?');
chrome.tabs.executeScript(null, {code:"document.body.style.fontSize = 20"});
console.log('print again');
</script>
</body>
When I try to run this extension I get the error:
Error during tabs.executeScript: Unknown error. extensions/extension process bindings.js:85
Does anyone have any idea what this could possibly be or how to fix it? I get no error when I do not include the line chrome.tabs.executeScript, and I get the error no matter what I write for the parameters of chrome.tabs.executeScript.
I also get the error when I include chrome.tabs.executeScript inside a function that is called whenever the browserAction is clicked
Any help would be much appreciated, thank you!
You are injecting code into selected tab right when background page loads for the first time, which happens on chrome://extensions page where you cannot inject anything.
Not sure why you are still getting error inside browser action listener, maybe you have extensions page still opened?
I've been working on a custom CMS in drupal for about two or three weeks now, and I keep running into this same problem. I'm trying to load a dynamically generated url (by extracting the node id of the target drupal page into $resultCut and appending it to the baseurl of the website). This iframe is embedded next to an instance of CKEditor, and the idea is to have the content in the iframe change when the fields in CKEditor are modified. I have the following Jquery:
<script type="text/javascript">
$(document).ready(function(){
baseurl = urlhere;
url = baseurl+"<?php echo $resultCut ?>"
$('#EmuFrame').attr('src', url);
var HTML = $('#EmuFrame').contents().find('body').html();
alert ( "LOADING COMPLETE" + HTML );
});
$('#edit-field-mobile-page-header-label-0-value').change(function () { // writes changes to the header text to emulaor
var curr = $(this).val();
$('#EmuFrame').contents().find("h1").text(curr);
});
$('#edit-body').keyup(function(e) { // writes changes to the body text to emulator
var curr = $(this).val();
currhead = $('#EmuFrame').contents().find("h1").html();
$('#EmuFrame').contents().find('#content').html("<h1>"+currhead+"</h1>"+curr);
});
where #EmuFrame is the id of an iframe, and the #edit-* tags are the ids of fields in CKEditor that I am monitoring for change. When the user types, the keyup() or change() events is supposed to grab the new html and swap it with the html in the iframe.
As of right now, the LOADING COMPLETE alert fires, but there is no html in the alert. I noticed that the content of the iframe loads AFTER the alert fires, however, which is what led me to believe that it's a problem with the order in which the events trigger.
Further, I had an alert in the callback function of keyup that returned the new html [ alert(curr) ] that was generated when a user started typing, and this alert returns html (although, it is being grabbed from CKEditor). However, the iframe does not reflect any changes. If I append [ alert (currhead) ] though, nothing is alerted at all.
It might be of interest to note that the source url is technically on a different domain than the parent. however, I used a workaround (i'm pretty sure it works, because I've previously gotten the whole html replacement thing working, and then somehow it broke). Also, neither Firebug nor Chrome's console report any XMLHttpRequest errors. Also, I keep getting this error: "Uncaught Syntax error, unrecognized expression: [#disabled]" and I'm not sure what it means, and whether its relevant to my problem as stated above.
That was a ridiculously long plea for help, so THANKS FOR READING, and thank you for any help!!
Your note about about the cross-domain iframe src is worrisome -- you shouldn't be able to access its contents with javascript. Nevertheless:
You have these two lines in quick succession:
$('#EmuFrame').attr('src', url);
var HTML = $('#EmuFrame').contents().find('body').html();
Try waiting for the iframe to load first:
$('#EmuFrame').load(function() {
var HTML = $('#EmuFrame').contents().find('body').html();
}