I have a simple directive:
<div my-directive>
<span ng-click="reveal()">Click Me</span>
<!-- And other stuff -->
</div>
When I press Click Me, a modal opens up with a form for you to edit some content. All these contents are to part of the scope.form data. For now, say this object only has one entry called name.
So this is what I did for my directive:
scope.reveal = function()
{
var el = $compile('<input type="text" ng-model="scope.form.name" />')(scope);
// Now launch the modal
}
So the modal does open up and the content of scope.form.name is shown correctly. However, if I close the modal, and open it again, the value is not saved (i.e, the scope.form.name is not updated inside the directive).
What's the best I can do this?
With angularjs you usually don't compile and add elements to the DOM. You should declare your form in your template and bind ng-show to a property on the scope to show/hide your form.
<div my-directive>
<span ng-click="form.show = true">Click Me</span>
<form ng-show="form.show">
<input type="text" ng-model="form.name" />
<form>
</div>
Related
I am using Tag manager and Anayltics 360.
My code as follows,
<div rel="ABC_Links" class="ak_widget" >
<!-- BEGIN: Widget - Links -->
<section class="mfb-30">
<div class="widget_links">
<div class="widget_container">
<div class="widget_content">
<button type="button" class="buttonShadow" onclick="window.open('https://somepagelink.aspx); return false;">
<div class="widget_item">
<div class="widget_icon">
<svg>123</svg>
</div>
<div class="widget_text"><span style="overflow-wrap: normal;">ABCD TEXT</span></div>
</div>
</button>
<button type="button" class="buttonShadow" onclick="window.open('https://somepagelink.aspx); return false;">
<div class="widget_item">
<div class="widget_icon">
<svg> 12345</svg>
</div>
<div class="widget_text"><span style="overflow-wrap: normal;">XYZ TEXT</span></div>
</div>
</button>
</div>
</div>
</div>
</section>
<!-- END: Widget Links --></div>
I have 12 buttons in this same format. Here i have given an example of two buttons.
Button name i can change later so i can not take it as hard coded for "Click Text" in tag manager.
I can use only rel= "ABC_Links" as unique identifier. I can not use any of below class as they are not unique.
I have used Custome javascript to get parent child relationship but didn't work.
I have used DOM element variable but it did not work.
Now Question is, Is there any way to trigger event in tag manager when i click on any of the button below and get the info in real time event in Anayltics 360 ???
One way to achieve this would be to create a User-Defined Custom JavaScript variable in GTM to set isABCLink=true on button click.
On the Variables screen under Built-In Variables make sure you have "Click Element" ticked.
Create a User-Defined Variable
Name: isABCLink
Type: Custom JavaScript
Code:
function() {
return {{Click Element}}.matches("div[rel=ABC_Links] button, div[rel=ABC_Links] button *");
}
Create a Trigger
Trigger Type: Click - All Elements
This trigger fires on: Some Clicks
Conditions: isABCLink equals true
Set up your tag firing on above trigger
Once caveat to point out is that the exact element clicked on could be the button or one of the child elements of the button such as the <svg> which might make it hard to set up your tag depending on what exactly you need.
I want to put a "Pay with card" simple Stripe button inside an AngularJS's ng-repeat tag type.
It is working properly when the button is placed outside the ng-repeat div, and opens the Stripe's model popup; but the popup does not opens when I put it inside an ng-repeat tag.
<div ng-if(condition)>
<form class="" action="/buyer/buyer/StripePayement?
Amount=500"method="POST">
<article>
<label>Amount: $500</label>
</article>
<script src="//checkout.stripe.com/v2/checkout.js"
class="stripe-button"
data-key="pk_test_ryEeHLLIGikPwMiZdK7b0FNf00IbqsyXht"
data-locale="auto"
data-description=""
data-amount="500">
</script>
</form>
</div>
When you have an item inside of an ng-repeat the repeat has its own scope. You likely need to reference the parent scope with $parent like in
Pass parent scope value into ng-repeat loop in Angular
Rather new to javascript, jquery and bootstrap, etc., so bear with me. I have a situation where I want to present a list of errors in a model dialog after the user hits a "validate" button. Got all the working - I am generating a list of objects that indicate to the user they need more work to the exact spot that needs additional data entry. I have the the DIV "id" that represents the field that needs more data (and each item will jump someplace different).I do not want a drop down list since there are be lots and lots of these items.
A few questions:
How do I go about jumping from the modal to the main html. I believe I have seen scrollIntoView mentioned in a few other posts as I was looking but will that hop to the DIV and also close the modal?
What construct should I use for the list? A list of scrolling button? The size of this can be quite large (hundreds) so it will need a scroll capability.
Finally, the app is "paged" with a next and prev buttons. I assume that will not be a problem from the aspect of jumping to a page not already displayed?
Here is the current modal code:
<script id="template-validation-error" type="text/x-handlebars-template">
<div id="validationErrorModal" class="modal">
<div class="message-container">
<div class="header">
Validation Errors
</div>
<div class="message">
The following fields are required:
</div>
<div class="center">
<input type="button" class="btn btn-solid-green btn-sm" onclick="fffdevice.validationErrorOk();" value="Done" />
</div>
</div>
</div>
</script>
and
showValidationError: function (fieldlist) {
settings.focusedField = $(':focus');
$("#validationErrorModal").detach();
$(".device-container").append(templates.validationerror({ fieldlist }));
$(".message-container input").focus();
},
validationErrorOk: function () {
$("#validationErrorModal").detach();
if (settings.focusedField) {
settings.focusedField.focus();
}
},
The field list is a list of objects that contain the id (field.id) of the DIV and also a description (field.fieldName) that I want to display.
Here is something I mocked up in paint...I am not sold on it but it show in a general sense what I am looking for:
I don't need a full solution rather, just want mechanisms I can use.
UPDATE
Just to help out anyone else in the future, using the info provided in the correct answer below I have a new code as follows:
<script id="template-validation-error" type="text/x-handlebars-template">
<div id="validationErrorModal" class="modal">
<div class="validation-container">
<div class="header" align="center">
Validation Errors
</div>
<div class="message">
<div class="scrolling-container" style="background-color: rgb(238, 238, 238); height:660px">
<div class="grid grid-pad">
{{#each fieldlist}}
<div class="row click-row" onclick="fffdevice.validationErrorFix('{{id}}');">
<div class="col-7-8 field-name">{{fieldName}}</div>
<div class="col-1-8">
<img class="pull-right" src="/mysite/Content/device/images/fix.png" style="width: 40px; position:relative; top: -5px;">
</div>
</div>
{{/each}}
</div>
</div>
</div>
<div><br/></div>
<div class="center">
<input type="button" class="btn btn-solid-green btn-sm" onclick="fffdevice.validationErrorOk();" value="Done" />
</div>
</div>
</div>
Then the Javascript for the onClick is:
validationErrorFix: function (id) {
$("#validationErrorModal").detach();
var x = document.getElementById(id);
x.scrollIntoView({
behavior: "smooth", // or "auto" or "instant"
block: "start" // or "end"
});
},
Which closes the dialog and jumps to the field. It looks like (I know this is ugly and I will clean it up later):
Bind the modal event to the validation code and show the modal if error(s) are found.
Display the modal with the list of errors using an html unordered list, inside the li element an anchor tag where the href attribute will have a value with the id that corresponds to the input field, all this done dynamically from your validation code.
Once an error in the list is clicked hide the modal using bootstrap $('#your-error-modal').modal('hide'); so the code would be something like this:
$('#your-error-modal').on('click', 'a.error-item', function(){
$('#your-error-modal').modal('hide');
});
I haven't tested this code, but if you're having issues with scrolling to the section of the input and closing the modal you can probably do something like this too:
$('#your-error-modal').on('click', 'a.error-item', function(e){ // use this method of onclick because your list will be created dynamically
e.preventDefault(); // prevent the default anchor tag action
var href = $(this).attr('href'); // grab the href value
$('#your-error-modal').modal('hide'); // close the modal first
scrollToDiv(href); // then take the user to the div with error with a nice smooth scroll animation
});
function scrollToDiv(location) {
$('html, body').animate({
scrollTop: $(location).offset().top
}, 2000);
}
Again this is untested code, but the idea is there.
For UX reasons you might also want to create a floating div or something where users can click on it and go back to the modal to continue reading your list of errors.
I wana toggle elements but not all elements i need just one on which is clicked.
for example if I have 3 form elements and 3 buttons if I click on button 1. I just wana toggle 1. form element.
This is my current code:
angular:
$scope.formWhat = false;
$scope.formShow = function(item){
$scope.formWhat = !$scope.formWhat;
};
html:
<div ng-repeat="x in comments">
replay
<form id="<%x.id%>" ng-show="formWhat">
blbllblblbl
</form>
</div>
This code will open all forms, but i need just on which is clicked, any idea?
One of the helpful things here is that ng-repeat creates a child scope for each item repeated.
So you can use a local variable inside that child scope that controller knows nothing about. This won't close any of the others but that could be accomplished also. Criteria you gave wasn't very specific
<div ng-repeat="x in comments">
<a ng-click="showForm = !showForm">replay</a>
<form ng-show="showForm"></form>
</div>
I am making a KnockoutJS application where it should be possible to view products and when clicking them a detailed view of the selected product should be displayed to the user and an overlay should be put over the other products.
I have managed to get almost all of this working using JQuery and Featherlight.js. I am able to populate the detailed view with KnockoutJS observable variables but the problem I am having is that when the detailed view is displayed (using JQuery) the bindings to the KnockoutJS view model is lost. I want to be able to listen to click events using KnockoutJS (and call the function "update()" in the knockout controller shown in the code below) in the detailed view and update the view based on this event but as of right now this is only possible by using JQuery.
I think the problem is that when opening the detailed view using Featherlight.js a new "context" or instance is created that Knockout no longer have any bindings to. Anyone knows how this can be fixed?
Here is a fiddle: https://jsfiddle.net/d1txamd4/8/
Here is my code:
HTML
<div style="margin-top:2em;" class="row" data-bind="foreach: products">
<div class="col l4 m6 s12">
<div class="card">
<a href="#" data-bind="click: $parent.showProductDialog">
<div class="card-image">
<img data-bind="attr:{src: image}">
</div>
</a>
<div class="card-content">
<b data-bind="text: title"></b>
</div>
<div class="card-action">
<p style="float:left;"><span data-bind="text: price"></span> kr</p>
<a style="float:right;" class="btn disabled">Föreslå</a>
</div>
</div>
</div>
</div>
<!-- This is the HTML for the lightbox -->
<div class="lightbox">
<div class="lightbox-content">
<img data-bind="attr:{src: lightboxImage}"></br>
<b class="dialog-title" data-bind="text: lightboxTitle"></b>
<p data-bind="text: lightboxDescription"></p>
</div>
<div class="modal-footer">
<a data-bind="click: update" class="btn">Click me</a>
</div>
</div>
JavaScript
function ProductCardViewModel() {
var self = this;
// Array containing all products
self.products = ko.observableArray();
self.lightboxImage = ko.observable();
self.lightboxDescription = ko.observable();
self.lightboxTitle = ko.observable();
self.products = [
{"id":1,"name":"Cool healine","title":"It's cool to have a cool headline","description":"This text is suppost to describe something","price":700,"image":"http://www.swedishevent.se/se/wp-content/uploads/2010/11/takvandring_top.jpg","categories":[1,4]},{"id":2,"name":"Even cooler headline","title":"A nice headline is the key to success ","description":"What to write, what to write, what to write?","price":500,"image":"http://www.karlliesilva.com/Massage-Therapy-white-flower2.jpg","categories":[2]}
];
self.showProductDialog = function(product) {
self.lightboxImage(product.image);
self.lightboxDescription(product.description);
self.lightboxTitle(product.title);
$.featherlight('.lightbox');
};
<!-- I want to be able to call this function from the lightbox -->
self.update = function() {
alert("Success!");
};
}
ko.applyBindings(new ProductCardViewModel());
There are two issues here.
Issue one
The featherlight plugin appears to create new dom elements and then insert them into the dom. This means that knockout won't have anything bound to these injected elements.
Issue two
The submit binding only works within form elements, please see the knockout documentation
The solution
The solution is two use ko.applyBindings to bind your view model to the injected dom elements and change the submit binding to a click binding.
I have updated your fiddle with a working solution.
Check out the option persist introduced in version 1.3.0.
Instead of cloning your content, featherlight can instead "steal" it and persist it. This might be more appropriate to the way you bind your code.