How can I import javascript function in angular2 template - javascript

I need slider and I use AdminLTE in my project
<input type="text" value="" class="slider form-control"
data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-orientation="horizontal"
data-slider-selection="before" data-slider-tooltip="show"
data-slider-id="yellow">
to convert input to div , it needs
<!-- Ion Slider -->
<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
<!-- Bootstrap slider -->
<script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>
<script>
$(function () {
/* BOOTSTRAP SLIDER */
$('.slider').slider();
});
</script>
first 2 I imported in index.html und last function in my tamplate after input
it doesn't work
Where and how can I input this function? I did it in index.html but it doesn't work

The Javascript you are trying to use is jQuery, if you are not using jQuery than that code will not work. You can tell it is jQuery because of the $.
If you are using jQuery in your AngularJs app than double check that
<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>
are actually loading.
Here is a "plain vanilla" Javascript implementation you can use in place of the jQuery implementation if you are not using jQuery:
<script>
function initSlider() {
var sliderInputElem = document.getElementsByClassName('slider');
sliderInputElem.slider();
}
window.onload = initSlider;
</script>
By the way should be able to change
<script src="../../plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="../../plugins/bootstrap-slider/bootstrap-slider.js"></script>
to
<script src="/plugins/ionslider/ion.rangeSlider.min.js"></script>
<script src="/plugins/bootstrap-slider/bootstrap-slider.js"></script>
if plugins folder is at the root of your app. I try to avoid up directory ../ for any resource, because the paths are more fragile (become broken links do to some code reorganization in the future).

Angular compiler flushes out your JS code in the application.
To include any JS code, you need to include the definition filename.d.ts along with the JS and declare all the variables you are going to use in the JS code in filename.ts.

I guess you just need to cut you function from index.html and have to paste in the constructor of same HTML where you are going to use carousel.
let suppose you are using this in your app.component.html file
<input type="text" value="" class="slider form-control"
data-slider-min="-200" data-slider-max="200"
data-slider-step="5" data-slider-orientation="horizontal"
data-slider-selection="before" data-slider-tooltip="show"
data-slider-id="yellow">
then you need to use this function in app.component.ts like this
declare var $: any;
#component({
....
})
export class AppComponent{
constructor(){
/* BOOTSTRAP SLIDER */
$('.slider').slider();
}
........
}

Related

I would like to use a <script> in my Angular component, how do I do that ? (TypeScript, Angular12)

This is the code that I would like to use in my Angular component:
<form action="https://www.meu-site.com/processar-pagamento" method="POST"> <script
src="https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js"
data-public-key="ENV_PUBLIC_KEY"
data-transaction-amount="100.00"></script></form>
If you have to load the script from remote site you can add it to your index.html file, like you would do in a regular html site.
index.html
<!-- get script from 3rd party site -->
<script
src="https://www.mercadopago.com.br/integrations/v1/web-tokenize-checkout.js"
data-public-key="ENV_PUBLIC_KEY"
data-transaction-amount="100.00">
</script>
Then, to use the the script in your component, you need to manually declare the exported variables / functions to avoid TS compilation errors
** formComponent.ts**
declare let web-tokenize-checkout: any; //declare the name of the global object you got from the script you added
//use your script functionality, That part is really depends on how the script you imported works
web-tokenize-checkout.doWhatEverYouNeed(....);

Cannot reference jQuery .js file in HTML

I can create a jQuery function within my HTML no problem:
<body>
<input type="text" id="mainInput" />
<button class="btn" id="mainButton"></button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#mainButton").click(function () {
$("#mainInput").hide("slow");
});
});
</script>
</body>
This does exactly what I intend it to do.
I read it was a good idea to create a separate script to contain the actual function, so I put the script in its own file...
<body>
<input type="text" id="mainInput" />
<button class="btn" id="mainButton"></button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="~/js/jQueryPractice.js"></script>
</body>
Here is the .js file with the jQuery
$(document).ready(function () {
$("#mainButton").click(function () {
$("#mainInput").hide("slow");
});
});
As soon as I do this, the functionality no longer works.
From everything I have researched, this should be working as intended; I have read multiple tutorials that use this method. I must be missing something simple...
This path:
src="~/js/jQueryPractice.js"
Uses ~, which doesn't really mean anything to a browser. What URL do you expect that to refer to? Should it be the root of the server?:
src="/js/jQueryPractice.js"
Relative to the page?:
src="./js/jQueryPractice.js"
Something else?
Whatever the URL is for the script, relative or absolute, that's what needs to be used in the src attribute.
Here is what got it to work.
My project has a 'wwwroot' directory. It was included when generating a new ASP.NET Core application through Visual Studio.
There is a js folder inside of this. When I put my script in there, the browser started finding it successfully.
This was the HTML:
<script src="~/js/jQueryPractice.js"></script>
The '~' seems to refer to 'wwwroot'. The script is now referencing and behaving as intended.

add time picker in twitter bootstrap

I am desperately trying to integrate a time picker in my app, but without success. I tried to use this code to do it: https://github.com/weareoutman/clockpicker
I have all the files and the paths are properly set. Here is the weird thing. If I integrate this code:
<!-- Or just a input -->
<input id="demo-input" />
<!-- jQuery and Bootstrap scripts -->
<script type="text/javascript" src="../assets/js/jquery.min.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.min.js"></script>
<!-- ClockPicker script -->
<script type="text/javascript" src="../dist/bootstrap-clockpicker.min.js"></script>
<script type="text/javascript">
$('.clockpicker').clockpicker()
.find('input').change(function(){
// TODO: time changed
console.log(this.value);
});
$('#demo-input').clockpicker({
autoclose: true
});
if (something) {
// Manual operations (after clockpicker is initialized).
$('#demo-input').clockpicker('show') // Or hide, remove ...
.clockpicker('toggleView', 'minutes');
}
</script>
I have declared the css file in the header too:
<!-- ClockPicker Stylesheet -->
<link rel="stylesheet" type="text/css" href="../dist/bootstrap-clockpicker.css">
into the input.html file of my app and starts this app, I can see the box where the clock is supposed to be active but nothing happens when I click on the box, while the clock should appear.
However, if I run the html file in the browser, as a stand alone unit, then the clock works as it should be.
In the app, the input file is called from a higher up file view.py:
#app.route('/input')
def addresses_input():
return render_template("input.html")
I coded in python and used flask
Anyone has an idea? I have been struggling with this for quite some time now and I cannot find an answer...
Thanks!
Your #route should look like
from wtforms.fields.html5 import DateField
class TimeForm(Form):
time_picker = DateField('DatePicker', format='%Y-%m-%d')
#app.route('/current_page', methods=['POST'])
def show_time():
time_form = TimeForm() # this could be the class as well
if time_form.validate_on_submit():
return time_form.time_picker.data.strftime('%Y-%m-%d')
return render_template('bootstrap_template.html', form=form)
You can get the time picker in the jinja2 template in following way
bootstrap_template.html
<form action="some_action" method="post">
{{ time_form.time_picker(class='datepicker') }}
{{ time_form.hidden_tag() }}
<input type="submit"/>
</form>
Please note - you will need to add your js library and css file in template file.

jquery script on html file

I'm using Bottle to make a simple web form and want to set the Selectize.js jquery plugin to a field so the user can set several values to that same field.
Inside my form tag I have the following code:
<label>
<span>Links :</span>
<input type="text" id="input-tags" name="links">
</label>
<script>
$('#input-tags').selectize({
persist: false,
createOnBlur: true,
create: true
});
</script>
And the following .js and .css inside the head tag:
<link href="/selectize.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="/selectize.js"></script>
To deal with static files I have the following route in my .py script:
#get('/<filename:re:.*\.js>')
def javascripts(filename):
return static_file(filename, root='static/js')
#get('/<filename:re:.*\.css>')
def stylesheets(filename):
return static_file(filename, root='static/css')
My route to deal with static files seems to be working properly 'cause I've tested it with other jquery plugin that does not use explicit code within the html file.
On this one, the problem seems to be on the explicit script code bellow the label tag. I found some articles about dealing with JSON but couldn't make it work (I also don't know if that is the right way to go).
Well, my best option was to put that explicit javascript into a new javascript file and add its path to the html like:
<script type="text/javascript" src="/<script_path_here>"></script>
That way my functions that handles the static files on the .py would do their job.

Change textbox value using jQuery

I usually don't program in jQuery so I'm a big newbie. I got an HTML input form (type=text) and I want that when website is loaded, the value of the textbox should change.
I got this in fill-in.php file:
<script src="fill.js"></script>
<body>
<label class="txtlabel">Username/Email</label>
<input id="username" value="Moin" type="text" name="login-username">
<label class="txtlabel">Kennwort</label>
<input id="kennwort" value="Passwort" type="password" name="login-password">
</body>
And in fill.js file I wrote this:
$(document).ready(function(e) {
$('#username').val('some random text')
});
fill.js is correctly linked to my fill-in.php file.
Can someone give me a hint where I made a mistake?
Cheers
Add this in your header section
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
If you're planning to use jQuery, the very first thing you need is the library. You can reference it from a CDN or download it:
http://jquery.com/download/
<!-- CDN reference (Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="fill.js"></script>
you need to include the jquery library before the fill.js, you can download it from the jQuery site or use a CDN version as given below
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="fill.js"></script>

Categories

Resources