I tried to open ui-sref in new tab, noted that i don't want to call it from controller. How to do from view end?
<div class="col-md-12 text-right wow fadeInUp">
<!-- submit button -->
<button ui-sref="app.blogs" target="_blank" class="btn btn-black " id="form-submit" type="submit" value="Submit">See all Blogs</button>
<div id="msgSubmit" class="h3 text-center hidden"></div>
</div>
If you want to open a ui-sref from the view you can use target="_blank", but note that the button element does not support target. Change your button into an anchor tag.
<a ui-sref="app.blogs" target="_blank">See all blogs</a>
If you want to continue to use the button element, I believe you need to use the controller.
adding logic to view is not a good practice, however,
you can add some function to your controller and use it in your view(in view you don't have access to WINDOW/DOCUMENT or any other variable/function which is not part of scope)
or you can use HTML tags same as #Zahid Rahman answer(like target="_blank")
but I really recommend you to use a controller for UI logic and services for general logics and API calls or sharing data between controllers
Related
I want to make a button that will have href that is same as another button.
I have one button on my website that not all users see but its almost hidden and hard to reach. This button has specific UR for every user and contains his ID. On another page I want to create a button that will copy the same href from the other button:
Here is an example:
<div class="row exsisting-button button-hard-to-reach">
See my offers
</div>
<div class="row new-button">
Here are you offers
</div>
You can use querySelector to find element and getAttribute getAttribute to set get href
document.querySelector('.btn-href').setAttribute('href',
document.querySelector('.your-offers').getAttribute('href')
);
<div class="row exsisting-button button-hard-to-reach">
See my offers
</div>
<div class="row new-button">
Here are you offers
</div>
I have a html code that describes about the community members like "K S Lenscapes" and "Venky P G" which onclick calls a modal popup #visit
<div class="portfolio-info">
<a href="#visit" id="ks" ><h3>K S Lenscapes</h3></a>
</div>
<div class="portfolio-info">
<h3>Venky P G</h3>
</div>
This is #visit code :
<div id="visit" class="modalDialog">
<div>
X<br><br>
<div class="text-center">
<p><a class="btn btn-primary btn-lg" href="#" id="ba">Book Appointment</a></p>
</div>
</div>
</div>
I need "Book Appointment" button of #visit to recognize from which anchor tag it is requested and send mail to corresponding portfolio taking its email from a file or databse.
I have no idea how to do this, Please help me out with this.
You can use data attribute for this
<div class="portfolio-info">
<h3>K S Lenscapes</h3>
</div>
<div class="portfolio-info">
<h3>Venky P G</h3>
</div>
and update the book appointment href URL when ever the dialog is opened.
in this case data variables can be called like $('selector').data('url')
HTML:
<h3>Bar</h3>
JavaScript:
function updatePopup(id) {
document.getElementById('ba').href = 'path/to/handler?id=' + id;
}
The updated HTML will pass the link ID to the function when clicked, and the JavaScript will update the popup window 'Book Appointment' button accordingly.
The ID is then passed in the query string of the URL of wherever you'd like to handle the email sending part. Retrieving the email from the database and sending an email to it is an entirely different and much broader question, of which I'm sure you will be able to find information on how to do this elsewhere on the site.
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.
I have a web application built using Knockout.js but the one thing I have failed to implement is proper reusable HTML. Right now even if I have a view such as a dialog which is shared by multiple other views I have to copy and paste the HTML code and nest it in the parent in order to achieve proper binding communication between the child and parent.
Here's an example:
<div class="person-view"> <!-- PersonViewModel -->
<div class="person-details">
<!-- Person details -->
</div>
<button type="button" data-bind="click: EditAddress">Edit address</button>
<div class="modal hide fade" role="dialog" data-bind="modal: ShowEditAddressModal, with: Address"> <!-- AddressViewModel -->
<div class="modal-header">
<h3>Edit address</h3>
</div>
<div class="modal-body">
<!-- Address details -->
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal">Cancel</button>
<button class="btn btn-danger" data-dismiss="modal" data-bind="click: function() { $parent.SetAddress($data); }">Save</button>
</div>
</div>
</div>
In this case I have a sub-ViewModel which I am setting as the DataContext for the modal div. When the user clicks the Save button I am calling a method on the parent DataContext.
I know how to break the modal out to a separate HTML template and to generate the template dynamically supplying the ViewModel. That would work for showing and hiding the modal because I would simply need to do the following from within the code of the parent:
this.Address().IsShown(true);
In this case the modal would simply bind its visibility to a property on itself and the parent just needs to change it. That's fine.
However, what about when I click the Save button? I do not see how to have the parent respond to this occurrence using the MVVM pattern of Knockout.js. The button would still need a click binding which would bind to arbitrary code on the AddressViewModel, but how would it signal an event to its parent using Knockout?
Is there no way of doing this with Knockout and do I need to implement a separate library such as Underscore.js for events?
This is not a direct answer to your question, but the problem you're trying to solve is eliminated by using a library like DurandalJS which is built on top of knockout and handles view composition. There are a lot of features that Durandal provides to enable the kind of code reuse you're looking for, without having to reinvent the wheel. It's not the right fit for every project, but it might fit your needs.
Task Overview
I'm using the Code Igniter Framework to build a small client management system.
Part of the functionality would be to delete records from the database, before deleting I need to check with the user their okay to delete that record as a precaution. I'd like to do this via a modal window.
Frameworks I'm using
CodeIgniter MVC Framework (PHP, MYSQL)
Foundation HTML/CSS Boilerplate
Foundation's Javascript Libraries (In particular reveal.js)
What I would like to achieve
I'd like to have the user click on the delete link:
Delete
As you can see, the href tag is currently saying, go to the delete_domain function in the main class, and it's passing in the clients ID into the URL, this is used of course on the otherside of the application to delete the record that matches that ID.
Further on in the tag we have:
data-reveal-id="deleteModal"
This refers to the same [id=deletemodal] found in the modal window div that has to reside at the bottom of the page just before the closing body tag.
This is the DIV for the Modal window that resides at the bottom of the page?
<div id="deleteModal" class="reveal-modal small">
<h2>Are you sure you want to DELETE?</h2>
<p class="lead">Random Text</p>
<a href="" ></a>
<a class="close-reveal-modal">×</a>
</div>
The Issue
I'm not really sure if or how it will work, because at the moment the delete link is inside a table row, each one of these rows is generated by a foreach function, so they're multiple of these inside the DOM each with a different /$clientID value.
If I could I'd like to pass that value to a modal window, then of course to the option to finally delete the row.
Can anyone help?
You can grab the data you want from the pressed button and throw it in the modal. There are probably a few ways to do it; here's one of them: http://jsfiddle.net/b37s3/
Delete
<div id="deleteModal" class="reveal-modal">
<h2>Are you sure you want to DELETE?</h2>
<p class="lead">Random Text</p>
<a class="deleteUrl" href="#"></a>
<a class="close-reveal-modal">×</a>
</div>
and js:
$(document).foundation();
$('a.deleteLink').click(function(){
var link = $('.deleteUrl');
$(link).attr('href', this.href);
$(link).html(this.href);
});
This will throw the href from the Delete button pressed into the modals' a href and as the links text.