I am beginner in Angular 4 and writing a login component in Angular 4. On click of a Forgot password I want to flip the controls on page to show Reset password elements. I have a javascript function created called rotateCard(this) which I want to call on button click. It is inline javascript in html. I have added html in component.html. below is the code.
but it is giving error as "ReferenceError: rotateCard is not defined"
<form (ngSubmit)="doLoginUser()" #login="ngForm" >
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="card-container manual-flip">
<div class="card">
<div class="front">
<div class="content">
<div class="main">
<img src="../../../../images/logo.png" class="crm-logo" width="139" height="43" />
<form>
<div class="form-group">
<input type="text" class="form-control crm-field" placeholder="Email"
id="inputEmail" name="username" ngControl="username" required
autofocus [(ngModel)]="username">
</div>
<div class="form-group">
<input type="password" class="form-control crm-field" name="password" placeholder="Password"
id="inputPassword" ngControl="password" required [(ngModel)]="password">
</div>
<button type="button" class="btn btn-primary btn-block orange-btn">LOGIN</button>
</form>
<button class="btn btn-simple login-link" onClick="rotateCard(this)">
Forgot Password
</button>
</div>
</div>
</div> <!-- end login -->
<div class="back">
<div class="content">
<div class="main">
<img src="../../../../images/logo.png" class="crm-logo" width="139" height="43" />
<p class="title">Forgot Password</p>
<form>
<div class="form-group">
<input type="text" class="form-control crm-field" name="email" placeholder="Email">
</div>
<button type="button" class="btn btn-primary btn-block orange-btn">RESET PASSWORD</button>
</form>
<button class="btn btn-simple login-link" onClick="rotateCard(this)">
Login
</button>
</div>
</div>
</div> <!-- end forgot password -->
</div> <!-- end card -->
</div> <!-- end card-container -->
</div> <!-- end col md 5 -->
</div> <!-- end row -->
<div class="space-200"></div>
</div>
</form>
<script src="../../../../js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="../../../../js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
function rotateCard(btn){
var $card = $(btn).closest('.card-container');
console.log($card);
if($card.hasClass('hover')){
$card.removeClass('hover');
} else {
$card.addClass('hover');
}
}
</script>
If you want to execute functions if someone clicks on a element, you could add the (click) listener to your element.
Like this:
<button (click)="yourFunction()">Send</button>
Then add the function in your component:
yourFunction() {
//your logic
}
I hope that helps you out.
Like to official documentation:
https://angular.io/guide/user-input
It is inline javascript in html
You shouldn't really do this. Looking at your function it looks pretty trivial to move this into the component definition rather than have it in the HTML.
Without seeing the component though I can't be much more help
Why don' t put it in the component.ts file? .. and also remember in Angular 4 you can set css animation directly from Component.ts (https://angular.io/guide/animations) ..
So for example in your component.html .. something like:
<button class="btn btn-simple login-link" (click)="rotateCard()">
Login
</button>
then in you Component.ts file:
in the header section (near import ) ..
declare var $:any;
then after in your ComponentClass
rotateCard(){
var $card = $("#USE ID NOT THIS FOR SELECTOR").closest('.card-container');
console.log($card);
if($card.hasClass('hover')){
$card.removeClass('hover');
} else {
$card.addClass('hover');
}
}
Hope it helps you!!
I was able to resolve this in 3 steps.
I changed binding to (click)="rotateCard(this).
Added type="button" property to button.
Installed jquery through npm install and added those in to angular-cli.json
This helped loading the jquery and now the inner method written in component.ts is getting called.
Thank you everyone for responding.
Related
I am showing a modal using uikit (documentation) by setting up my button:
<button class="uk-button uk-button-default uk-button-small" uk-toggle="target: #modal-category-update" aria-expanded="false" data-category-name="Foo">
<span uk-icon="pencil" class="uk-icon"></span> Rename Category
</button>
<!-- etc... -->
<div id="modal-category-update" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Rename Category</h2>
<form id="form-category-update">
<input type="hidden" name="ExistingCategoryName" />
<input class="uk-input" type="text" placeholder="Name (Required)" name="CategoryName" required />
</form>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button class="uk-button uk-button-primary" type="submit" form="form-category-update" disabled>Rename</button>
</p>
</div>
</div>
And what I need to do is pass the value in data-category-name to my hidden input in the form in the modal.
I found a Stack Overflow article (here) where the questioner claims to have answered their own answer by referencing the button in the button's click event. But I'm not satisfied with the answer.
Is there no way for the modal to reference which DOM opened it? Ideally, I would like to listen to the beforeshow event, grab the element that invoked the DOM, and then grab my data attribute.
I ran into this earlier so .. you're right about targeting beforeshow event, but you really can't get the calling button from called modal. Instead, you can attach event listener to toggle element. This way, you can access calling button (toggle) and the modal (target).
// const element = document.querySelector('button[uk-toggle]'); // not needed in this example
document.addEventListener('beforeshow', function(el) {
// get the hidden input
const hiddenInput = el.target.querySelector('input[name="ExistingCategoryName"]');
// get original category name from the button
const categoryName = el.explicitOriginalTarget.getAttribute('data-category-name');
// set new value
hiddenInput.value = categoryName;
// log new value, just to see the result somewhere
console.log(hiddenInput.value);
});
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit#3.15.14/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit#3.15.14/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit#3.15.14/dist/js/uikit-icons.min.js"></script>
<button class="uk-button uk-button-default uk-button-small" uk-toggle="target: #modal-category-update" aria-expanded="false" data-category-name="Foo">
<span uk-icon="pencil" class="uk-icon"></span> Rename Category
</button>
<!-- etc... -->
<div id="modal-category-update" uk-modal>
<div class="uk-modal-dialog uk-modal-body">
<h2 class="uk-modal-title">Rename Category</h2>
<form id="form-category-update">
<input type="hidden" name="ExistingCategoryName" />
<input class="uk-input" type="text" placeholder="Name (Required)" name="CategoryName" required />
</form>
<p class="uk-text-right">
<button class="uk-button uk-button-default uk-modal-close" type="button">Cancel</button>
<button class="uk-button uk-button-primary" type="submit" form="form-category-update" disabled>Rename</button>
</p>
</div>
</div>
Given some html, a form named InterfacesIx and a button named addInterfacesIx
<div class="step-new-content white-text">
<p class="text-monospace"><small>helps you rollout a configlet about blahblah</small></p>
<form name="InterfacesIx">
<div class="row">
<div class="md-form col-12">
<input type="text" name="xxx" class="form-control white-text" placeholder="123"><label for="xxx">asn</label>
</div>
<div class="md-form col-12">
<textarea name="yyy" class="md-textarea form-control white-text" rows="3"></textarea><label for="yyy">notes</label>
</div>
</div>
<br><br><br>
</form>
<div class="col-12 text-center">
<button type="button" name="addInterfacesIx" class="btn btn-block btn-flat"><i class="fas fa-plus"></i></button>
</div>
</div>
I would like to clone/duplicate the form when the user clicks on the addInterfacesIx button using jQuery I guess.
The jQuery that I am trying looks like this:
<script>
$(document).ready(() => {
$('addInterfacesIx').click(function(){
$('InterfacesIx').clone().insertBefore('addInterfacesIx');
});
});
</script>
When I do console.log($('InterfacesIx')); nothing gets printed out. Is the selector wrong ?
When inspecting the form element on the browser I get:
copy attribute shows name="InterfacesIx"
copy selector path shows #stepper-navigation > li > div.step-new-content.white-text > form
copy xml shows //*[#id="stepper-navigation"]/li/div[2]/form
Would you be so kind to advise what I am doing wrong and how to achieve the desired result ?
Your selector $('addInterfacesIx') is not valid. If you want to grab an element by name you should use attribute selector, something like this: $( "form[name='addInterfacesIx']"). However, as mentioned before, grabbing element by class or ID is definitely better.
$('addInterfacesIx') and $('InterfacesIx') aren't valid selectors. I'd suggest putting id/class attributes on the relevant elements and then selecting them by that.
I also assume that the form elements should be siblings, as such try using insertAfter() and placing the new form after the last one currently in the DOM. Your current logic would place the new form inside the button container. Try this:
jQuery(($) => {
$('#addInterfacesIx').click(function() {
$('.interfacesIx:first').clone().insertAfter('.interfacesIx:last');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="step-new-content white-text">
<p class="text-monospace"><small>helps you rollout a configlet about blahblah</small></p>
<form name="InterfacesIx" class="interfacesIx">
<div class="row">
<div class="md-form col-12">
<input type="text" name="xxx" class="form-control white-text" placeholder="123"><label for="xxx">asn</label>
</div>
<div class="md-form col-12">
<textarea name="yyy" class="md-textarea form-control white-text" rows="3"></textarea><label for="yyy">notes</label>
</div>
</div>
<br><br><br>
</form>
<div class="col-12 text-center">
<button type="button" name="addInterfacesIx" id="addInterfacesIx" class="btn btn-block btn-flat"><i class="fas fa-plus"></i></button>
</div>
</div>
You are confusing the fact that a name attribute is not normally used as a jQuery selector - the name attribute is normally used for keys to form values when they are submitted to the server. You can select elements using the name attribute, as indicated by the code below, but using id and class attributes is preferred.
<form id="InterfacesIx" name="InterfacesIx">
...
</form>
<div class="col-12 text-center">
<button type="button" id="addInterfacesIx" class="btn btn-block btn-flat"><i class="fas fa-plus"></i></button>
</div>
<script>
$(document).ready(() => {
$('#addInterfacesIx').click(function(){
// $('#InterfacesIx') is better
$('[name=InterfacesIx]').clone().insertBefore('addInterfacesIx');
});
});
</script>
I have used CKEditor django plugin in my form modal. But when i try to show ADD button below the CKEditor, the button doesn't appear in the UI at all.
As shown in the below image, I have currently kept the Add button on the top of the CKEditor text box as its not appearing when placed at the bottom.
Below is the HTML code snippet
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="">Driver Name</label>
<input type="text" class="form-control" name="dn" id="dnn" required="True" />
</div>
<div class="form-group">
<label for="st">Driver Description</label>
<textarea name="editor1" id="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
</script>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary up">
ADD
</button>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
Can someone please suggest how to make the add button make it appear below ckeditor.
If you are using Bootstrap 4, You can use the Order feature if your elements are wrapped inside a flex container.
Your code should look similar to this:
<div class="row">
<div class="d-flex">
<div class="col-md-12">
<div class="form-group">
<label for="">Driver Name</label>
<input
type="text"
class="form-control"
name="dn"
id="dnn"
required="True"
/>
</div>
<div class="form-group">
<label for="st">Driver Description</label>
<textarea name="editor1" id="editor1"></textarea>
<script>
CKEDITOR.replace("editor1");
</script>
</div>
<div class="modal-footer order-1">
<button type="submit" class="btn btn-primary up">
ADD
</button>
</div>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/4.5.6/standard/ckeditor.js"></script>
I'm using the Facebook comments plugin in an MVC environment and it's crashing with a 500 error in the console when I add a comment. I do not get an error when all of the comments are loaded during page load. However, the comments are successfully added to the URL, so the error is happening after creating the create.
Here's relevant code, cleaned up as much as possible (JavaScript at the bottom)
<div id="fb-root"></div>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>
<div class="w-container">
<div id="allPosts">
#foreach (var post in ViewBag.Posts.Data)
{
<div class="w-row">
<div class="w-col w-col-12 w-col-medium-12 w-col-small-12">
<p>#post.MetaDescription ...</p>
</div>
</div>
<div class="w-row post-button">
<div class="w-col w-col-3 w-col-small-12">
<input type="hidden" class="postBodyHtmlHidden" value="#post.Body" />
<input type="hidden" class="postSlug" value="#post.Slug" />
<div class="fb-comments" style="display: none;" data-href="http://localhost:36998/blog##post.Slug" data-numposts="5"></div>
<input type="button" value="Continue Reading" class="btn btn-primary continue-reading-btn" />
</div>
</div>
}
</div>
<div id="postBody" style="display:none;">
<div class="w-row">
<div class="w-col w-col-12">
<input type="button" value="Back" onclick="AllPosts()" class="btn btn-primary" />
<br />
<div id="postHmtlDiv">
</div>
<div id="postCommentDiv">
</div>
</div>
</div>
</div>
</div>
<script>
$('.continue-reading-btn').on("click", function () {
var postHtml = $(this).closest('.w-row').find('.postBodyHtmlHidden').val();
var postSlug = $(this).closest('.w-row').find('.postSlug').val();
var postComment = $(this).closest('.w-row').find('.fb-comments').html();
$('#allPosts').css("display", "none");
$("#postHmtlDiv").html(postHtml);
$('#postCommentDiv').html(postComment);
$('#postCommentDiv .fb-comments').removeAttr('style');
$("#postBody").fadeIn("slow");
});
function AllPosts() {
$('#postBody').css('display', 'none');
$('#postHmtlDiv').html('');
$('#allPosts').fadeIn('slow');
};
</script>
I don't know how to debug this.
The error looks like this (again, this after adding a comment):
The answer was simple! This code is not valid!
<div class="fb-comments" style="display: none;" data-href="http://localhost:36998/blog##post.Slug" data-numposts="5"></div>
The data-href attribute
cannot be localhost. I changed it to something else and it worked!
I have a form on the page and displayed it as none. And there is a button in the page I want when clicking on the button the form to display.
How can I do that?
<button type="button" class="btn btn-primary add-city">اضافه مدينة جديدة +</button>
and form code is this
<div id="forma">
<div class="form-head">
<p id="add-city">+اضافة المدينة</p>
<i class="fa fa-times-circle close" aria-hidden="true"></i>
</div>
<form class="">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>الدولة<span>*</span></label>
<select class="form-control">
<option>اختر الدوله </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(عربي)<span>*</span></label>
<input type="text" class="form-control" id="email">
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label>المحافظة<span>*</span></label>
<select class="form-control">
<option>اختر المحافظه </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(انجليزي)</label>
<input type="text" class="form-control" id="email">
</div>
</div>
</div>
</div>
</form>
<div class="form-footer">
<button type="button" class="btn btn-primary">ارسال</button>
<button type="button" class="btn btn-secondary">الغاء</button>
</div>
</div>
I made a div with an id called forma so that I can call it in javascript. But I don't know the right way.
You can add an onclick attribute to the button that changes the display to block.
onclick="document.getElementById('forma').style.display = 'block'"
Just use the jQuery click property and show property
$( "#idbutton" ).click(function() {
$("#idform").show();
});
If you are using Bootstrap.js, you can safely use jQuery because it's required. Assuming you should click #add-city button to display the form, simply add to your app.js or inside your <script> tags
$('#add-city').click(function() {
$('#forma').show();
});
In order to toggle the form (show/hide) on every click, you could do something like
$('#add-city').click(function() {
$('#forma').toggleClass('hidden');
});