Given the sample of the Kendo UI to load a tooltip with ajax data.
<ul id="products" class="dairy-photos">
<li><a href="#" data-id="11">
<img src="#Url.Content("~/content/12.jpg")" /></a> </li>
</ul>
#(Html.Kendo().Tooltip()
.For("#products")
.Filter("a")
.LoadContentFrom("Details", "Tooltip")
.Position(TooltipPosition.Top)
.Width(220)
.Height(280)
.Events(events => events.RequestStart("requestStart")))
<script type="text/javascript">
function requestStart(e) {
e.options.data = {
id: e.target.data("id")
}
}
</script>
This is working fine, but the call to the Tooltip controller is made only once !?
I'm unable to find a way to make sure the call is made -every- time the tooltip is hovered. Any help on this one ?
Seems like this is fixed in the latest release :
http://www.kendoui.com/forums/mvc/tooltip/load-tooltip-content-via-ajax-everytime-it-opens.aspx
#(Html.Kendo().Tooltip()
//...
.Events(e =>
{
//...
e.Show("show");
}))
<script type="text/javascript">
function show() {
this.refresh();
}
Related
I have a requirement to show the notification send by administrator.
My menu will be loaded only once.
I also have broadcast notification page where I will send notification to others. On click of save buttom using Hub I am sending the message to the clients.
Here my unread message count (like we have in fb) is placed in the layout .
All my send and receive code is in the Broadcast notification page. Notification count is not getting displayed on the layout menu like (like fb) .
What will be the issue.?
Count is updated on the Webpage where admin will send notification. Other pages say Home page or any other page the notification count which is ther in the layout is not getting updated.
Answer to this will be very helpful for me.
Hub class : on button click i am calling this hub method
public void BroadcastNotifications(string message)
{
// Save data to database
Utility.AddNotification(message);
// Call method to get the number of unread messages (consider the status = read / unread)
int UnreadCount = Utility.getUnreadMessageCount();
UnreadCount = 12;
IHubContext context = GlobalHost.ConnectionManager.GetHubContext<BroadcastMessage>();
context.Clients.All.receiveNotification(message, UnreadCount);
}
Admin page where notification message is going to send .
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<fieldset>
<legend>Notification</legend>
<div class="editor-label">
#Html.LabelFor(model => model.Message)
</div>
<p>
<input type="button" id="button1" value="Create" />
</p>
</fieldset>
}
#section Scripts
{
<script src="~/Scripts/jquery-1.11.3.js" type="text/javascript"></script>
<script src="~/Scripts/jquery.signalR-1.1.4.js" type="text/javascript"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
$.connection.hub.logging = true;
var proxy = $.connection.broadcastMessage;
$.connection.hub.start().done(function () {
$('#button1').click(function () {
proxy.server.broadcastNotifications($("#Message").val());
});
});
proxy.client.receiveNotification = function (message, UnreadCount) {
**$("#notification_count").html(UnreadCount);
$("#notification_count").show();**
};
$.connection.hub.start();
});
</script>
}
And the layout page where the notification count should display is
<li class="dropdown" id="notification_li">
<a href="#" class="fa fa-globe fa-inverse dropdown-toggle"
data-canvas="body" style="color:gray;padding-top:17px" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
<span id="**notification_count**" class="notification_count">0</span></a>
<ul class="dropdown-menu" id="popup">
</ul>
</li>
This is the _layout page where i have to display the count of unread mesasges.
If i trigger the send button the unread count is getting updated on all the admin add notification open pages. But the other pages it remains empty.
Updated _Layout as per the comment
I have moved the signal r client call to _layout
<head>
<meta charset="utf-8">
<title>Services</title>
<!-- Bootstrap core CSS -->
#Styles.Render("~/Content/bootstrapcss")
#Scripts.Render("~/bundles/modernizr")
<script src="~/Scripts/jquery.signalR-1.1.4.js" type="text/javascript"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
debugger;
$.connection.hub.logging = true;
var proxy = $.connection.broadcastMessage;
proxy.client.receiveNotification = function (message, UnreadCount) {
debugger;
$("#notification_count").html(UnreadCount);
$("#notification_count").show();
};
$.connection.hub.start();
$.connection.hub.start().done(function () {
$('#button1').click(function () {
proxy.server.broadcastNotifications($("#Message").val());
});
});
});
</script>
</head>
<body>
#Html.Partial("_RightMenu")
**#Html.Partial("_TopMenu") **//** Notificationcount span is in this partial view**
<div class="container-fluid body-content">
<div class="row" id="Content">#RenderBody()</div>
<br />
<br />
<footer>
<p>© #DateTime.Now.Year - FOOTER</p>
</footer>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrapjs")
#Scripts.Render("~/Scripts/abcjs")
#RenderSection("scripts", required: false)
</body>
</html>
I have updated as above. In _Layout there are two partial views in which the count i am displaying on one partial view. Is it the correct way to add.
tthis is the signal r file generated automatically
$.hubConnection.prototype.createHubProxies = function () {
var proxies = {};
this.starting(function () {
registerHubProxies(proxies, true);
this._registerSubscribedHubs();
}).disconnected(function () {
registerHubProxies(proxies, false);
});
proxies.broadcastMessage = this.createHubProxy('broadcastMessage');
proxies.broadcastMessage.client = { };
proxies.broadcastMessage.server = {
broadcastNotifications: function (message) {
return proxies.broadcastMessage.invoke.apply(proxies.broadcastMessage, $.merge(["BroadcastNotifications"], $.makeArray(arguments)));
}
};
return proxies;
};
signalR.hub = $.hubConnection("/signalr", { useDefaultPath: false });
$.extend(signalR, signalR.hub.createHubProxies());
}(window.jQuery, window));
I think the problem is the following: You are only receiving notifications on the admins' sites.
I would place the hub script section within the _layout.
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/jquery.signalR-2.2.0.js" type="text/javascript"></script>
<script src="~/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
debugger;
$.connection.hub.logging = true;
var proxy = $.connection.broadcastMessage;
proxy.client.receiveNotification = function (message, UnreadCount) {
debugger;
$("#notification_count").html(UnreadCount);
$("#notification_count").show();
};
$.connection.hub.start();
$.connection.hub.start().done(function () {
$('#button1').click(function () {
proxy.server.broadcastNotifications($("#Message").val());
});
});
});
</script>
#RenderSection("scripts", required: false)
<li class="dropdown" id="notification_li">
<a href="#" class="fa fa-globe fa-inverse dropdown-toggle"
data-canvas="body" style="color:gray;padding-top:17px" data-toggle="dropdown"
role="button" aria-haspopup="true" aria-expanded="false">
<span id="notification_count" class="notification_count">0</span>
</a>
<ul class="dropdown-menu" id="popup"></ul>
</li>
You can take a look in a sample project I created for the case:
https://github.com/blfuentes/SignalR_StackOverflow_Question
I updated the nuget packages to the latest version of SignalR 2.2.0
Is it possible to select multiple values from angular ui bootstrap typeahead?
http://angular-ui.github.io/bootstrap/#/typeahead
Hi without changing the codebase probably not - you could try https://github.com/rayshan/ui-multiselect
I recently had the same requirement and was able to solve it by overriding the internal bootstrap implementation via an alternate popup-template. I created a new directive (multi-select-typeahead) to encapsulate the change.
The template uses an ng-init to pass the scope reference (of the typeahead popup directive) to the multi-select-typeahead directive. There the directive overrides the parent's scope. $scope.$parent in this case is the bootstrap typeahead directive itself. The custom directive provides a new implementation of select() which is called internally by angular bootstrap. The new implementation prevents the popup from closing and removes selected items from the list.
The alternate popup I provided is almost entirely the same as the default angular bootstrap typeahead template "uib/template/typeahead/typeahead-popup.html". The only modification was the addition of the ng-init which passes its scope to the multi-select-typeahead directive.
I'm sure if you are clever enough you could render the angular bootstrap default template by reference and inject the ng-init part, removing the duplicated bootstrap code. This would make the solution a bit more resilient to future angular bootstrap changes. That being said, the solution is already quite a hack and is prone to breaking in future major releases.
Hope this is useful to someone!
angular.module('typeahead.demo', [
'ngAnimate',
'ngSanitize',
'ui.bootstrap'
]);
angular
.module('typeahead.demo')
.controller('TypeaheadDemo', TypeaheadDemo);
function TypeaheadDemo($scope) {
$scope.addItem = addItem;
$scope.itemApi = itemApi;
$scope.items = [];
function addItem(item) {
$scope.items.push(item);
}
function itemApi() {
return [
{ name: 'apple' },
{ name: 'orange' },
{ name: 'grape' }
];
}
}
angular
.module('typeahead.demo')
.directive('multiSelectTypeahead', multiSelectTypeahead);
function multiSelectTypeahead() {
return {
templateUrl: 'multi-select-typeahead.html',
scope: {
searchApi: '&',
displayNameField: '#',
onSelect: '&',
inputPlaceholder: '#?'
},
link: function ($scope) {
var uibTypeaheadScope;
$scope.initializeScope = initializeScope;
$scope.$watch('isOpen', function (newValue) {
if (!newValue) {
$scope.searchTerm = '';
}
});
function initializeScope(typeaheadPopupScope) {
uibTypeaheadScope = typeaheadPopupScope.$parent;
uibTypeaheadScope.select = selectItem;
}
function selectItem(index, event) {
var selectedItem = uibTypeaheadScope.matches[index].model;
event.stopPropagation();
if (event.type === 'click') {
event.target.blur();
}
uibTypeaheadScope.matches.splice(index, 1);
$scope.onSelect({ item: selectedItem });
}
}
};
}
<!doctype html>
<html ng-app="typeahead.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<script type="text/ng-template" id="typeahead-search-results.html">
<ul ng-init="$parent.$parent.initializeScope(this)"
class="dropdown-menu"
ng-show="isOpen() && !moveInProgress"
ng-style="{ top: position().top + 'px', left: position().left + 'px' }"
role="listbox"
aria-hidden="{{ !isOpen() }}">
<li class="uib-typeahead-match"
ng-repeat="match in matches track by $index"
ng-class="{ active: isActive($index) }"
ng-mouseenter="selectActive($index)"
ng-click="selectMatch($index, $event)"
role="option"
id="{{ ::match.id }}">
<div uib-typeahead-match
index="$index"
match="match"
query="query"
template-url="templateUrl"></div>
</li>
</ul>
</script>
<script type="text/ng-template" id="multi-select-typeahead.html">
<input type="text"
placeholder="{{::inputPlaceholder}}"
ng-model="searchTerm"
ng-model-options="{debounce: 500}"
uib-typeahead="result as result[displayNameField] for result in searchApi({ searchText: $viewValue })"
typeahead-is-open="isOpen"
class="form-control"
typeahead-popup-template-url="typeahead-search-results.html" />
</script>
<body>
<div ng-controller="TypeaheadDemo" style="padding-top: 15px;">
<multi-select-typeahead class="col-xs-6"
search-api="itemApi(searchText)"
display-name-field="name"
on-select="addItem(item)"
input-placeholder="Search Items...">
</multi-select-typeahead>
<div class="col-xs-6">
<ul class="list-group">
<li class="list-group-item" ng-repeat="item in items">
{{ item.name }}
</li>
</ul>
</div>
</div>
</body>
</html>
I'm trying to run up a little prototype in Ember.JS at the moment with a view to completely re-writing the UI of a web application as an Ember Application running against a WebAPI, but although I've managed to get Ember running OK, I cannot get jqueryui to initialise the tabs correctly.
It seems to work fine if within the view I put static data for tabs to be created from, but if I'm using dynamic data then it just doesn't work.
I have an Ember view template
<script type="text/x-handlebars" id="index">
<div id="tabs" class="ui-tabs">
<ul>
{{#each model}}
<li>
<span class="ui-icon ui-icon-person"></span>
<a {{bindAttr href="route"}} {{bindAttr title="tabTitle"}}><span>{{title}}</span></a>
</li>
{{/each}}
</ul>
{{#each model}}
<div {{bindAttr id="tabTitle"}}>
<p>
Retrieving Data - {{title}}
</p>
</div>
{{/each}}
</div>
</script>
and a view
App.IndexView = Ember.View.extend({
templateName: 'index',
didInsertElement: function () {
var tabs = $("#tabs").tabs();
}
});
and a model
App.Section = DS.Model.extend({
name: DS.attr('string'),
title: DS.attr('string'),
tabTitle: function () {
return 'tab-' + this.get('name');
}.property("name"),
route: function () {
return '#' + this.get('tabTitle');
}.property("tabTitle")
});
App.Section.FIXTURES = [
{
id: 1,
name: 'home',
title: 'Home'
},
{
id: 2,
name: 'users',
title: 'Users'
}
];
It appears to generate the HTML correctly (from checking in Firebug), but this does not work, where as if I replace the template with
<script type="text/x-handlebars" id="index">
<div id="tabs" class="ui-tabs">
<ul>
<li>
<span class="ui-icon ui-icon-person"></span>
<span>Home</span>
</li>
<li>
<span class="ui-icon ui-icon-person"></span>
<span>Users</span>
</li>
</ul>
<div id="tab-home">
<p>
Retrieving Data - Home
</p>
</div>
<div id="tab-users">
<p>
Retrieving Data - Users
</p>
</div>
</div>
</script>
it works perfectly.
I'm assuming that it's something to do with the DOM not being completely rendered by the time the tabs are initialised, but everything I can find says that didInsertElement is the place to do it, and I have had time to dig deeper yet.
I'd be grateful for any ideas.
Edit: I've managed to make this work in a fashion by doing the following:
App.IndexView = Ember.View.extend({
templateName: 'index',
didInsertElement: function () {
Ember.run.next(this, function () {
if (this.$('#tab-users').length > 0) {
var tabs = $('#tabs').tabs();
} else {
Ember.run.next(this.didInsertElement);
}
});
},
});
The problem with this is that 1) it requires me to know what one of the last elements that will be written to the view is called (and obviously with dynamic data I won't necessarily know that), so that I can keep checking for it, and 2) the inefficiency of this technique makes me want to scream!
In addition, we get a good old FoUC (Flash of Unstyled Content) after things have been rendered, but before we then get JQueryUI to style them correctly.
Any suggestions gratefully received.
It's still not nice... but this at least does work, and is reasonably efficient...
From Ember.js - Using a Handlebars helper to detect that a subview has rendered I discovered how to write a trigger, and because of the way that the run loop seems to work, inserting the trigger in the last loop on the page causes it to be called n times, but only after the loop is complete, so a quick state check "hasBeenTriggered" ensures that you only execute the delgate function once.
My code now looks like this:
<script type="text/x-handlebars" id="index">
<div id="tabs" class="ui-tabs">
<ul>
{{#each model}}
<li>
<span class="ui-icon ui-icon-person"></span>
<a {{bindAttr href="route"}} {{bindAttr title="tabTitle"}}><span>{{title}}</span></a>
</li>
{{/each}}
</ul>
{{#each model}}
<div {{bindAttr id="tabTitle"}}>
<p>
Retrieving Data - {{title}}
</p>
</div>
{{trigger "triggered"}}
{{/each}}
</div>
</script>
with the trigger
Ember.Handlebars.registerHelper('trigger', function (evtName, options) {
options = arguments[arguments.length - 1];
var hash = options.hash,
view = options.data.view,
target;
view = view.get('concreteView');
if (hash.target) {
target = Ember.Handlebars.get(this, hash.target, options);
} else {
target = view;
}
Ember.run.next(function () {
target.trigger(evtName);
});
});
and view
App.IndexView = Ember.View.extend({
templateName: 'index',
hasBeenTriggered: false,
triggered: function () {
if (!this.get("hasBeenTriggered")) {
var tabs = $('#tabs').tabs();
this.set("hasBeenTriggered", true);
}
}
});
I'd love to know if there's a better way of doing this, as this still doesn't get round the FOUC problem either (which again can be done with more JS hacks)... :(
I'm trying to enable each of the list items classed "draggable" to be drag enabled for dropping into the #content div. However, the first problem is that I'm not getting an alert on the click handler. What am I missing?
<script type="text/javascript" src="<?php echo plugins_url('', __FILE__)?>/jquery-ui.js"></script>
<script type="text/javascript">
jQuery('.draggable').click
(
function()
{
alert('clicked'); //DOES NOT FIRE
jQuery(this).draggable();
jQuery( "#content" ).droppable
({
drop: function( event, ui )
{
//drop/paste jQuery(this).text();
}
});
});
</script>
<ul class="keywords">
<li class="draggable" id="kw-1">keyword one</li>
<li class="draggable" id="kw-2">keyword two</li>
<li class="draggable" id="kw-3">keyword three</li>
</ul>
Can you check if your jquery is loaded correctly? Your script only shows that you are loading jquery-ui.js.
Otherwise, your code works when both jquery and jquery-ui are loaded.
I have this atm:
<img src="/Content/Admin/Images/Icons/delete.gif" />
How can I modify this one so it also shows a confirm messagebox?
As it is now nothing happens when I click it, it doesnt post, what more is needed for it to work?
EDIT:
<form action="/Admin/Users" method="post">
<script type="text/javascript">
$(function() {
$('.delete').click(function() {
$.post(this.href, {}, function(data) {
});
return false;
});
});
</script>
And each link:
<a class="delete" href="/Admin/User/Delete/71"><img src="/Content/Admin/Images/Icons/delete.gif" /></a>
no luck, nothing happens "onclick", not even a javascript error
/M
Indeed more is needed. I would advice you to separate javascript from HTML:
<a id="delete" href="<%= Url.RouteUrl("UserDelete", new { userID = item.UserID }) %>">
<img src="/Content/Admin/Images/Icons/delete.gif" />
</a>
and then register a click handler to this anchor in javascript:
<script type="text/javascript">
$(function() {
$('#delete').click(function() {
$.post(this.href, {}, function(data) {
alert('user successfully deleted');
});
return false;
});
});
</script>
Are you sure nothing is happening? Just calling $.post(url) will request the page, but it ignores any result. You may want to review the docs for the $.post function to accomplish what you'd like to do?
You can add a confirm box like this:
onclick = "if (confirm('Are you sure?')) $.post(this.href); return false;"