I'm trying to change the page title using ng-idle:
My title:
<title>MySite Local</title>
The code that doesn't seem to be working:
app.run(function (Title) {
Title.idleMessage('You are idle');
});
Taken from https://github.com/HackedByChinese/ng-idle/issues/128
Am I missing anything here? The title doesn't change without the above code either.
I've also got TitleProvider.enabled(true); just in case.
I'm not familiar with that directive, but if all you're trying to do is set the title, a plain old controller will work.
titleController.js
(() => {
"use strict"
angular.module('myApp').controller('titleController', titleController)
function titleController($scope) {
$scope.appTitle = "Hi Dad, I'm in jail!"
}
})()
index.html
{{appTitle}}
Of course, you'd have to add your own logic to detect an idle user.
Related
I'm facing this nightmare since many days and I still cannot figure what I'm missing to make the changeView event work.
What am I doing? I'm programmatically trying to make the calendar's view changed. How? Searching for fullcalendar by his id within the controller and setting the new view.
Lots of guides/threads tell many ways but the more comprehensible I got was the following:
That's my HTML code (it's the whole HTML page):
<div class="container">
<div id="eventsCalendar" ui-calendar="main.uiConfig.calendar" class="span8 calendar" ng-model="main.eventSources">
</div>
</div>
This's how to get the calendar, setting the new view within the controller:
angular.element('#eventsCalendar').fullCalendar('changeView', 'agendaView');
It looks fine, no errors and angular got the calendar (yay!!!). Amazing! No "calendar-related-dependencies" injected, a very simple and short way... That's awesome! Set a function with that line of code but nothing happened and the calendar still be in the month view (holy damn... back to the drawing board...)
Some threads for the ui-calendar (maybe something similar to fullcalendar?) tells to inject uiCalendarConfig as controller's dependency, declaring the calendar="myCalendar" attribute in HTML declaration and calling uiCalendarConfig.calendars.myCalendar... the result was: uiCalendarConfig is empty... I'm confused.
Does anyone ever get the changeView work properly? How could I do that? I'm sure I'm missing something stupid... I can feel it!
Any help will be appreciated.
<div calendar="eventsCalendar" ui-calendar="main.uiConfig.calendar" class="span8 calendar" ng-model="main.eventSources">
To change the calendar view, use this function
$scope.changeView = function(view) {
uiCalendarConfig.calendars["eventsCalendar"].fullCalendar('changeView',view);
};
call the function as below
$scope.changeView('month'); //or
$scope.changeView('agendaDay'); //or
$scope.changeView('agendaWeek'); //or
Unfortunately, there does not seem to be an onload callback. However, this is what I came up with for my app
// watcher for on load
var calendarOnLoad = null;
var calendarOnLoadCallbacks = [];
$scope.changeView = function(view) {
if(uiCalendarConfig.calendars.eventsCalendar) {
// already initiated or beat the race condition, great!
uiCalendarConfig.calendars.eventsCalendar.fullCalendar('changeView',view);
}
else {
// calendar is undefined. watch for onload
if(!calendarOnLoad) {
calendarOnLoad = $scope.$watch(function () {
// prevent type error which breaks the app
try {
return uiCalendarConfig.calendars.eventsCalendar;
} catch (err) {
return null;
}
}, function (calendar) {
// uiCalendarConfig.calendars.eventsCalendar is now initiated
if(calendar) {
calendarOnLoad(); // clear watcher since calendar exists
// call all the callbacks queued
calendarOnLoadCallbacks.forEach(function (fn) {
fn(calendar);
});
}
});
}
// run this calendarOnLoadCallbacks queue once calendar is initiated
calendarOnLoadCallbacks.push(function(calendar) {
calendar.fullCalendar('changeView',view);
});
}
}
$scope.changeView('agendaWeek');
$scope.changeView('month');
$scope.changeView('agendaDay');
I hope this helps.
I've tried to come up with some sort of "error checker/validation" for my users IF they forget to Save the edits they made on their profiles.
The user enters the Profile.html state. They start to update some of their info (i.e name, phone number, etc.). INSTEAD of pressing the SAVE CHANGES button they navigate away from the Profile state by clicking the SideMenu icon at the top left of their mobile screen.
Since the form is technically now consider to be "$dirty". I've tried to use this angular property at first but I couldn't really get the results I wanted so I tried my luck with $watch..
ProfileController.js
$rootScope.isFormDirty = false;//global variable 'isFormDirty'->inject in controller.js (toggleLeftSideMenu())
$scope.$watch('updateDriverProfileInfo', function(newValue, oldValue) {//new & oldValue = ng-model when form is 1st 'viewed' is dirty
//http://tutorials.jenkov.com/angularjs/watch-digest-apply.html
if (newValue !== oldValue) {
// console.log("updatingg")
$rootScope.isFormDirty = true;
}
}, true);
Angular docs on $watch
Maybe I should of made a factory or Service for this now that I think about it but at the time I used $rootScope so that I can set a global variable isFormDirty on this controller and use it on the General Controller that holds the Side Menu's logic in this Ionic app.
controller.js (this is where the Controller for the SideMenu is)
$scope.sidemenuIsOpen = false;
$scope.toggleLeftSideMenu = function() {//ng-click from menu.html
$scope.sidemenuIsOpen = !$scope.sidemenuIsOpen;
if ($scope.sidemenuIsOpen && $rootScope.isFormDirty) {
var confirmPopup = $ionicPopup.confirm({
title: 'Changes were not saved',
template: 'Do you want to save your changes?',
});
confirmPopup.then(function(res) {
if (res) {
console.log('Run updateDriverProfile()');
} else {
console.log('Allow user to continue w/o changes');
}
});
}
};
That's basically the gist of my code. It actually "works" but I have identified a pattern and this is where I need your assistance to either suggest a whole different method to accomplish this or perhaps some refactoring tips for this current code.
The Pop up does show when the user clicks on the Side Menu button BUT I don't think it really matters if the form is $dirty or not..
The bigger issue is that the Pop up starts showing regardless if you are trying to leave the profile.html view or any other view for that matter.
When I wrote this code I was under the impression that the Pop up and toggleLeftSideMenu functions would ONLY work on the Profile view since I am "watching" the updateDriverProfileInfo object and I also created that global variable to use between the Menu Controller and Profile Controller.
you need to have a good understanding on ionic Lifecycle, try with any of the below events
$scope.$on('$ionicView.leave', function(){
// Anything you can think of
});
$scope.$on('$ionicView.beforeLeave', function(){
// Anything you can think of
});
$scope.$on('$ionicView.unloaded', function(){
// Anything you can think of
});
find more information here http://www.gajotres.net/understanding-ionic-view-lifecycle/
Ok, so with the help of a couple sites, I was able to put this code together to inactivate the responsive coding for a website and activate the non-responsive coding. However, when the link is clicked again, it doesn't perform this function in reverse.
I tried using ".toggle", but that doesn't work. Which event should I be using to get this effect? Any help would be great!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#togglerwd").click(function() {
$('meta[name="viewport"]').prop('content', 'width=1440');
});
});
</script>
Toggle Responsive Layout
Isn't there an event that will allow the code to be active and inactive when the hyperlink is clicked?
The click itself is the event that is happening – but that event does not know anything about what “state” your page is currently in.
A “flag” is a common programming basic, and not specific to jQuery or JavaScript. Basically it is just a variable with a value that alternates between true and false, and based on which you decide what to do.
It would look something like this:
$(document).ready(function (e) {
// set the initial flag value, we assume your page “starts” in responsive mode
var isResponsive = true;
$("#togglerwd").click(function() {
// check flag, to see what state the page is in
if(isResponsive) {
// set viewport meta to “non-responsive”
$('meta[name="viewport"]').prop('content', 'width=1440');
// remember current state in flag for check on next click
isResponsive = false;
}
else {
// set viewport meta to “responsive”
$('meta[name="viewport"]').prop('content', 'width=device-width');
// remember current state in flag for check on next click
isResponsive = true;
}
});
});
Thank you so much for your help CBroe, but I ended up creating the exact solution I wanted. Here is the code:
<script>
$(document).ready(function () {
$("#togglerwd").click(function() {
$('meta[name="viewport"]').prop('content', 'width=1440');
});
$("#togglerrl").click(function() {
$('meta[name="viewport"]').prop('content', 'width=device-width');
});
});
</script>
Full Site |
Responsive Layout
I´m using angular-translate $translate service to translate the title and meta description tags content dinamically according to the page (for SEO purposes).
I have a function that is called when a select combobox component with the language changes:
$scope.changeLanguage = function (langKey) {
$scope.langKey = langKey;
$translate.uses(langKey);
$rootScope.title = $translate('PAGE_TITLE');
tmhDynamicLocale.set(langKey).then(function (){
LocationService.setLangKey($scope.langKey);
$window.moment.lang(langKey);
});
};
All my application content is translated but the title.
My application default language is english. When I change to spanish (for first time) it´s not translating. After that, if I change to english and then to spanish again it works. All next times will work.
the translate service returns a promise
$translate('PAGE_TITLE').then(function(result) {
$rootScope.title = result
});
I think I have fixed it this way:
$translate.uses(langKey).then(function() {
$rootScope.title = $translate('PAGE_TITLE');
});
I'm working with CakePHP 1.3.7 and I'm trying to do the following:
On a given page, the user can click a link (or image, or button, doesn't matter) that passes a parameter which is saved into a database. BUT, all this, without refreshing the page.
I've been doing some research and I believe I need to use AJAX as well to acomplish this. However, I can't find the a good example/explanation on how to do it.
I think that the idea is to create the link using AJAX, which calls the controller/action that would receive the variable as a parameter and performs the operation to save it in its corresponding field/table of the DB.
Does anyone have a small example of what I want to do? Or maybe point me to some tutorial that explains it... Thanks so much in advance!
EDIT
Well, thank you guys for your replies. THey're not working directly, but I think I'm getting closer to what I want. Here's what i'm doing now:
I have this code in my view:
<div id="prev"><a>click me</a></div>
<div id="message_board"> </div>
I call this JS file:
$(document).ready(function () {
$("#prev").click(function(event) {
$.ajax({data:{name:"John",id:"100"}, dataType:"html", success:function (data, textStatus) {$("#message_board").html(data);}, type:"post", url:"\/galleries\/add"});
return false;
});
});
And my add action in my galleries controller looks like:
function add() {
$this->autoRender = false;
if($this->RequestHandler->isAjax()) {
echo "<h2>Hello</h2>";
print_r($this->data);
$this->layout = 'ajax';
if(!empty($this->data)) {
$fields = array('phone' => 8, 'modified' => false);
$this->User->id = 6;
$this->User->save($fields, false, array('phone'));
}
}
}
When clicking on the '#prev' element, I get a response from the add action, I know because the text 'Hello' is printed inside #message_board. And it does this without refreshing the page, which is why I need. My problem is that I can't make the $.ajax() function to send any data, when it gets to the controller the $this->data is empty, so it never goes inside the if that saves the info to the database (right now it's saving just an easy thing, but I will want it to save the data that comes from the view).
Can anyone see what am I doing wrong? How can I send the data to the controller?
CakePHP does not matter, most of the code you would need for this would be at clientside. Implementing AJAX by yourself is a pain in the $, so you really want to use a library; currently the most popular is probably jQuery. There's a bunch of examples on their AJAX page: http://api.jquery.com/jQuery.ajax/
So, assuming you have something like this in the document:
<form id="s">
<input id="q"/>
<input type="submit" href="Search!"/>
</form>
<div id="r"/>
you can put this in the JavaScript:
$('#s').submit(function(evt) {
evt.preventDefault();
$.ajax({
url: 'foo.php',
data: {
query: $('#q').val()
},
success: function(data) {
$('#r').html(data);
}
});
return false;
});
Then your foo.php only needs to return the fragment HTML that would go into the div#r.
EDIT: I forgot to stop the submit :( Thanks to #Leo for the correction.
EDIT: I can see what your confusion is about. You will not get a data. I haven't worked with CakePHP, but I assume $this->data is what you'd get from $_REQUEST['data']? You don't get that on the server. data is a hash of what is getting submitted; you will directly get the $_REQUEST['name'] and $_REQUEST['id'] (which, I assume, translate into CakePHP as $this->name and $this->id).
You need to add
$('#s').submit(function(evt) {
evt.preventDefault();
To prevent a page refresh, as in Amadans answer just refer to your controller/ action in the url variable
$('#s').submit(function(evt) {
$.ajax({
url: '/patients/search/',
data: {
query: $('#q').val()
},
success: function(data) {
$('#r').html(data);
}
In the patients/add controller action make sure you return a valid result ( in json is good )