Want to submit form dynamically though scope variable.But it is not working. Even, simple example as below that alert is also not executing.
$scope.sctext = $sce.trustAsHtml('<div>text<script type="javascript">alert('working'); other scripts</script></div>');
Html:
<div>{{sctext}}</div>
Is it possible to execute javascript & html like above?
Have solved by - directive - link (element) { element.append(script) }
Related
Newer to javascript and trying to learn why this works, searching Google has led to no answers (although I maybe searching using the incorrect terms).
I'm am making a call to a function during an onclick event within an <a></a>. I was able to get the function finally working (with a suggestion from a coworker) by adding in 'javascript:' before making the function. Without the javascript: portion in the onclick, my function was not being called upon.
It now works but I don't understand what that is doing, the other programmer who suggested putting it in the call also isn't sure what exactly it does.
Here is a simplified version of the code used:
#1 .jspf higher up which includes page #2 to display it's contents
function createTagging(1, 2) {
cmCreateElementTag(1 + ", " + 2,"TagName");
}
HTML in .jspf file #2 further down website makes the call to function in file #1
<a id="CatEntry" href="https://aurl"
onclick="javascript: createTagging('parameter1', 'parameter2');"
title="atitle" aria-label="alabel">
<img id="ThumbNailImage_59244" src="https://image.jpg"
alt="" border="0"/>
</a>
-Troy
Why do I need 'javascript:' in the call to my javascript function?
You don't. It's an onclick handler. You use the javascript: pseudo-protocol where a URL is expected (for instance, if you'd used href instead of onclick). onclick expects JavaScript code.
In fact, it only works because JavaScript has labelled statements, and javascript: is a valid label. It's completely ignored.
Without the javascript: portion in the onclick, my function was not being called upon.
With respect, that must have been observational error. Again, in an onclick handler, it makes no difference whether you have javascript: in front of it or not. If it wasn't working, and then it was working, you changed something else at the same time you added javascript:.
onclick attribute is always calling javascript in HTML.
onclick="createTagging('parameter1', 'parameter2');"
It is only necessary if you use not an event, but href. There you need to add the protocoll as well for Javascript.
I am working on a website based on angular js.
Currently, I have written about 5000 line code in angular js.
So I have to make some changes without touching my angular js.
I want something like this:
$(document).on('click','#buttonid',function(){
//performing some necessary task then call ng-click method
ngclickmethod();
});
HTML Code:
<a ng-click="ngclickmethod()" id="buttonid">
Please advise how can I achieve that.
Many Thanks
So it looks like you are trying to call an angular function outside of angular. Try this..
angular.element(document.getElementById('yourControllerElementID')).scope().ngclickmethod();
this will call the method you want. Be sure the controller element ID is the controller that contains the ngclickmethod function
I'm using angular/bootstrap and have a particular directive which functions as the actual chat input box to my app. I've gotten the more important expanding behavior done, except I can't quite figure out how to do three things in specific...
Here is the fiddle
1) I need to have the enter key submit the text inside the textarea (using the button of the form is optional, feel free to remove it). I'm getting the following error in my console: "Uncaught ReferenceError: $ is not defined" (lack of knowledge of js structure here).
2) Since I'm using angular, where I should include the custom script? Probably not inline inside tags in the directive...maybe inside controllers.js? What's the best practice for that?
3) The ajax call inside the script this.form.sendThought();, can controllers.js be accessed from the script? I guess #2 above needs to be in a place such that I could access this function...
Here is the directive:
<div class="clear" ng-show="allowInput">
<form role="form">
<div class="input-group">
<div class="textarea-container" id="txtCont">
<textarea ng-model="rawResponse"></textarea>
<div class="textarea-size"></div>
</div>
<span class="input-group-btn">
<button class="btn btn-lg" type="button" ng-click="sendThought()">send</button>
</span>
</div>
</form>
</div>
Script:
var textContainer, textareaSize, input;
var autoSize = function () {
textareaSize.innerHTML = input.value + '\n';
};
document.addEventListener('DOMContentLoaded', function() {
textContainer = document.querySelector('.textarea-container');
textareaSize = textContainer.querySelector('.textarea-size');
input = textContainer.querySelector('textarea');
autoSize();
input.addEventListener('input', autoSize);
});
$('#txtCont').keydown(function() {
if (event.keyCode == 13) {
this.form.sendThought();
return false;
}
});
You don't have jQuery included (which is what the $ global object usually means here). You can either include jQuery or do this with vanilla JS. (Even better, use jqLite from inside the Angular directive!)
Here's what a keyup event looks like with plain JS. You don't have to name the function like I did if you prefer to pass an anonymous function in. I prefer to name them so I can modify later if I need to. (I also think it's cleaner)
document.getElementById('chat').onkeyup = keyPressedChat;
http://jsfiddle.net/k0kyu5t7/
I put that together real quick to help give you an idea about what I mean by using vanilla JS outside the context of your app.
I noticed a couple more problems looking at it a second time (besides not including jQuery):
You should be listening for keydown events on the textarea element instead of the parent div. It's possible to capture keypress events that you might not want unless you point to the text area specifically.
You should be passing the event into your anonymous function callback that you're attaching to the handler.
The answer to your #2 is far too broad for a quick discussion here. There are a lot of opinionated ways on how to organize your files in an Angular app. I personally like to break things down by components and then drop them inside folders like that. Your "chat-directive" could live inside [Root] -> [Chat] -> [Directives] -> chat.js. That's just one way.
As for your #3, it depends on what you want here. You can call services/factories from your directives, which is where your ajax calls should be anyway. If you want your directive to be more modular, then one option might be to pass a method through the directive itself (via the view).
I am building an MVC 5 web app using Visual Studio 2013.
I am trying to create a list of Courses using anchor tags which when clicked will pass as a parameter the selected Course to a Javascript function. The Javascript function will in turn use Ajax to call a second function to retrieve a list of Students enrolled on the selected Course.
In the View I have:
#model IEnumerable<School.Models.Course>
...
#foreach (var item in Model)
{
<a class='selectedCourse' onclick='JavaScript:selectedCourse()' data-cname="#item.CourseName">#item.CourseName</a>
}
The Course list gets created as expected:
<a class='selectedCourse' onclick='JavaScript:selectedCourse()' data-cname="Chemistry">Chemistry</a>
<a class='selectedCourse' onclick='JavaScript:selectedCourse()' data-cname="Physics">Physics</a>
My Javascript function is defined as follows:
function selectedCourse() {
var selectedCourseName = $(this).data('cname');
}
The code reaches the Javascript function but the value of selectedCourseName is always 'undefined'.
Am I missing something really basic for this to work?
Any help would be greatly appreciated.
Walter
The reason that it's not working is because the context of this on an inline event handler is not the element itself, but the window element. Change your code so that the handler is applied separately from your markup, this is a best practice anyway, and the context will be correct.
$('.selectedCourse').on('click', function(e) {
e.preventDefault();
var selectedCourseName = $(this).data('cname');
...
});
An alternative, and one I don't recommend, is to add a parameter to your inline handler and pass this as the parameter. The value of the parameter will be the element that was clicked.
Don't do this!
See examples at http://jsfiddle.net/cJZpK/
I would like to insert a call to a function to get a parameter for my JavaScript onclick function. What I would like to do is something like:
<input class="refreshbutton"
type="button"
id="searchUfficiPopup"
onClick="javascript:postColorbox('/DeliDete/searchUfficiPopupBySettoreId', **'&settoreIdKey=${javascript:getSettoriId()}'**, 'tabUfficiForm', 'initScriptUffici')"
value="<fmt:message key="navigation.searchUffici"/>" />
This way Eclipse tells me the function javascript:getSettoriId() is undefined. I defined this function in an external .js file, loaded at runtime with jQuery's .getScript, so I would not like to insert it into the jsp (anyway I tried to insert it into the jsp but the IDE still says that the function is not defined).
The function postColorbox is defined as:
function postColorbox(url, parameters, formName, initScript)
The function getSettoriId() returns the value of a previously entered form element, Settori, which I need to perform a restricted query (I need to obtain all Uffici entities related to the selected Settori entity)
Told this, I would like to ask you experts:
Is it even possible to use a JavaScript function as a parameter of an onclick JavaScript function?
If I put this function to be called in an external .js file will the jsp be able to see it and call it?
Thank you all for your help!
Andrea
Remove the onClick on your <input> and do it with a jQuery event handler instead:
$('#searchUfficiPopup').click(function() {
var settoriId = getSettoriId();
postColorbox('/DeliDete/searchUfficiPopupBySettoreId',
'&settoreIdKey=' + settoriId,
'tabUfficiForm',
'initScriptUffici');
return false;
});
Calling functions from inside the HTML element is not a preferred way. If you can - just assign the element an id or class, and then add a listener to it using javascript on page load.
This way you don't have your data and operations mixed. It will be also easier to modify the code, as your code will be located in js files.