I have a button that redirect me to another view, in a href tag. When I click on the button its redirect me to a href view. like:
<a ng-click="gotoChat()" /*Redirect to another view
class="item item-avatar-right item-icon-left">
<i class="icon" ng-hide="{{item.toClose}} == 0">
<button ng-click="Close('{{item.key}}')" class="button button-assertive">סגור בקשה</button>
</i>*/When I click on the button its start gotoChat() and Close() instead of only Close()
</a>
How can I do that its redirect me to button function?
Change href to div in html as follow
<div ng-click="gotoChat()" class="item item-avatar-right item-icon-left">
<i class="icon" ng-hide="{{item.toClose}} == 0"><button ng-click="Close('{{item.key}}')" class="button button-assertive">סגור בקשה</button></i>*/When I click on the button its redirect me to a href function
</div>
and in your controller
$scope.gotoChat = function(){
$state.go("STATE OF PAGE FOR REDIRECT");
}
Related
I have a kendo-popup in an angular component which I use within a kendo-dialog. The popup will be shown next to an icon when the user clicks on the icon. The positioning of the popup works fine when it is not inside a kendo-dialog. But the positioning is not correct when it is within a kendo-dialog. When the button is clicked within the kendo-dialog, the popup does not show up next to the icon. It shows up somewhere else.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
</span>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
When I click the div to open the dialog, the kendo-popup does not show next to the input tag. It shows up somewhere to the lower right.
Edit 1:
Tried moving the popup to within the span. Still not working.
Angular 2 Component 1 <comp-1>:
<span>
<input type="text" #anchor />
<button type="button" click="toggleView()"><i class="fa fa-cog fa-2x"></i>
</button>
<kendo-popup [anchor]="anchor"><!-- Some Content --></kendo-popup>
</span>
Angular 2 Component 2:
<div click="openDialog()"></div>
<div>
<kendo-dialog *ngIf="showDialog">
<comp-1></comp-1>
</kendo-dialog>
</div>
Note: I have intentionally left out the styles. In the original source, I have all the styles setup properly.
You have to specify where the popup will display by using an id of anchor on the target element:
<div>
<target-tag #anchor></target-tag>
</div>
<div>
<kendo-popup [anchor]="anchor">
<Content to display>
</kendo-popup>
</div>
I have a Kendo Angular2 Slack: https://kendouiangular2.slack.com
I tried to replicate the issue in a standalone Plunker demo, but it seems that the popup positions just fine in Kendo Dialog component:
Tested in Chrome and Safari.
This is the dialog content:
<input #anchor style="width: 100px"/>
<button kendoButton (click)="toggle()">Toggle</button>
<kendo-popup *ngIf="popupOpen" [anchor]="anchor" style="width: 100px">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</kendo-popup>
And this is the actual test Plunker demo:
http://plnkr.co/edit/Y3oBZwa8xf0WiP462jW7?p=preview
Could you modify it in order to reproduce the issue? This will help to find the cause of the erroneous behavior faster.
please use div id which div you want to popup.
<div id="popupdiv"></div>
$("#popupdiv").kendoWindow({
title: "Inforamtion",
resizeable: true,
scrollable: false,
width: "50%",
actions: ["Pin", "Close"],//["Pin", "Refresh", "Maximize", "Close"],
modal: true,
// pinned: true,
animation: {
close: {
effects: "fade:out"
},
}
});
I have a confirm modal shown after a button clicked and in this modal has two buttons, "Cancel" and "Add". The "Add" will expend data into its own item list and it works fine. But if I click "Cancel" and then go back to show this modal again, if then I click "Add", my item list will be expended times depends on how many time I click "Cancel" before. I try .data("bs.modal", null) or .off('click') at .on("hidden.bs.modal"). None of them can fix my problem.
The sample link Sample
<div class="major">
<button class='btn btn-danger btn-xs' type="submit" name="additem" value="Add"><span class="fa fa-times"></span> add</button>
<ul id="itemlist" data="0">
</ul>
</div>
<div class="major">
<button class='btn btn-danger btn-xs' type="submit" name="additem" value="Add"><span class="fa fa-times"></span> add</button>
<ul id="itemlist" data="100">
</ul>
</div>
<!-- Modal -->
<div id="confirm" class="modal hide fade">
<div class="modal-body">
Are you sure?
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-primary" id="add">Add</button>
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
</div>
</div>
the script,
$('button[name="additem"]').on('click', function(e){
var $major=$(this).closest('.major');
e.preventDefault();
$('#confirm').modal({ backdrop: 'static', keyboard: false })
.one('click', '#add', function (e) {
var num = parseInt($major.children("#itemlist").attr("data")) + 1;
$major.children("#itemlist").append("<li>new item" + num + "</li>");
$major.children("#itemlist").attr("data", num);
});
});
$("#confirm").on("hidden.bs.modal", function(){
$(this).data("bs.modal", null);
$("#add").off("click");
});
Following were the problems :
Function for "Add Items"
All the code was inside function for Add Items, So whenever add button was getting called for displaying modal box, modal box's ADD button's code was also executing..
Jquery .one()
It will execute only one time, so I have replaced it with on which will be executed on every click to "Add button of Modal"
I have taken code out from the function and replaced one with on, now it works fine !!!
Updated fiddle can be found at : http://jsfiddle.net/L3ddq/732/
var $major ;
$('button[name="additem"]').on('click', function(e){
$major=$(this).closest('.major');
e.preventDefault();
$('#confirm').modal({ backdrop: 'static', keyboard: false });
});
$('#confirm').on('click', '#add', function (e) {
var num = parseInt($major.children("#itemlist").attr("data")) + 1;
$major.children("#itemlist").append("<li>new item" + num + "</li>");
$major.children("#itemlist").attr("data", num);
});
I have a main view that has a button "AddSkillBtn" which on clicked shows a modal popup witha partial view inside. Works fine so far. I have a link inside the partial view "addAnotherSkill" which on clicked has to show an alert. However, the click event doesn't get fired at all. Please find below the code snippet - Any help much appreciated!!
**jQuery:**
$('#AddSkillBtn').click(function (e) {
$.ajax({
url: '#Url.Action("MyAction", "MyController")',
type: "POST"
success: function (result) {
$("#AddContainer").html(result);
$('#AddModal').modal('show');
}
});
});
$("#addAnotherSkill").on('click', function () {
alert("Hi!!");
});
**Main View**
<p><a id="AddSkillBtn" href="javascript:void(0)" class="btn btn-rounded btn-primary">Add new Skill</a></p>
<div class="modal modal-wide fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="AddLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="AddLabel">Add New Skills</h4>
</div>
<div class="modal-body">
<div id="AddContainer">
</div>
</div>
</div>
</div>
</div>
**Partial View rendered in the modal popup has**
<a id="addAnotherSkill" href="javascript:void(0)"><i class="fa fa-plus"></i> Add Another</a> //clicking on this link does nothing
Your element with id="addAnotherSkill" is being added to DOM dynamically. In order to use event delegation using the .on() function, it needs to be
$(document).on('click', '#addAnotherSkill', function (e) {
e.preventDefault();
...
}
Note you should change document to the closest ancestor of the element which exists when the page is first loaded.
Note also the use of e.preventDefault() which means that you can just use <a id="addAnotherSkill" href="#"> (my preference but I have seen arguments for and against - for example the answers here)
I would like to have the pop up "Shutdown (name of app)" on the back button and not on the default button that is right now..(Intel xdk app framework)
How could i do that? Please help me!
For that Add a custom header like.........
<div class="panel" title="Custom title" data-footer="footer_1" data-header='custom-header' id="page_5" data-appbuilder-object="page">
<div class="container" id="page_5_container" style="width:100%" data-appbuilder-object="container" data-position="static">
your content here...............
</div>
</div>
<header id="custom-header" data-appbuilder-object="header">
<a id="backButton" onclick="popup()" class="button back" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">
Custom title
</h1>
</header>
I have HTML loaded with the Jquery .load method and need to dynamically change anchor HREF and input button ONCLICK targets in this HTML on the client as the page loads, (I don't have the option to change the server generated HTML).
The .load works fine and I can change the HREF target OK but I can't find a way of changing the ONCLICK target?
HTML
Anchor HREF
<div style="width:143px;" id="LM_OBJV">
<span title="View Objectives Detail" class="PSHYPERLINK">
<a class="PSHYPERLINK" href="javascript:Action_win0
(document.win0,'LM_OBJV','Relationship Building',false,true);" tabindex="54"
id="LM_OBJV" name="LM_OBJV">Relationship Building</a>
</span>
</div>
Button ONCLICK
<div id="win0divLM">
<a id="Left" style="background-Color: transparent;border:0;" class="PBUTTON">
<span style="background-Color: transparent;">
<input type="button" onclick="Action_win0(document.win0,'LM_PB', 0, 0, 'Add New',
false, true);" style="width:120px; " class="PBUTTON" value="Add New" tabindex="77"
id="LM_PB" name="LM_PB">
</span>
</a>
</div>
Javascript
$('#result').load('some.php', function() {
$("a.PSHYPERLINK")
.each(function()
{
this.href = this.href.replace("Action_win0", "Action_winx");
});
});
So this JS works fine, loads the HTML into the #results DIV and changes the HREF's from "Action_win0" to "Action_winx".
But how can I also change the input type="button ONCLICK events from "Action_win0" to "Action_winx"? I've tried several Jquery selectors but just can't get it to work :(
$('a.PSHYPERLINK').attr('onclick', 'alert("bar")')
Demo: http://jsfiddle.net/kzVSt/