cutting right to the chase here heh
Building an admin backend system with angular for a client. This site and backend are built with Node and Angular. I've got a post editor setup, so that when you click a link to edit a post, locationProvider and ngRoute go to work and swap out the partial with a new controller, and updates the url.
Here at this point, everything shows up perfectly.
It's when I click on Cancel (which is a standard link going back to the post list view) or submit (which works it's magic and then redirects to the same url as cancel) and this works.
It's when I click on the link to edit the same post again. The content that's supposed to be in the CKEditor is blank. However when using Chrome Dev Tools I can see that tw original input field has the content in it correctly, but the iframe has nothing in it at all but the CKEditor Chrome.
As for code,
In my controller it looks like this:
$scope.post = null;
$http.get('/api/post/'+$routeParams.id)
.success(function(data,status,headers){
$scope.post = data;
});
$(function() {
CKEDITOR.replace("content");
});
$scope.submit = function() {
// submission code here
};
Pretty basic here, just want to get the basics out of the way first.
Is the problem with how I'm loading CKEditor?
CKEDITOR.replace("content") would replace the html element with CKEditor instance. Assuming "content" is some div id or text area in your html.
To set the content you need to use
CKEDITOR.instances["content"].setData("Contents to be displayed in text area");
Related
How can I automatically close the $cordovaInAppBrowser when it goes to my website and returns content "OK"? I would like to do this to avoid displaying the close button in the browser window.
Does anyone know how I can achieve this?
I did find the website that can solve this for those who also need to self close the browser in some condition.Here is the reference link : https://developer.salesforce.com/forums/?id=906F00000009ALSIA2
sample coding:
authWindow.addEventListener('loadstop', function(e) {
var loc = e.url;
//when url is changed check if the url contains your specific callbackURL
if (loc.search(data.callbackURL) >= 0) {
//at this point close your inapp browser
//you will land on the index page within your application.
authWindow.close();
//your code after successful authentication
}
});
you can use something like a timeout function or other than that a even listener other than i would suggest make a custom plugin and use it. The solution provided by #Blouraf is very hacky.
I did find some documentation on the cordova plugin that recommends a listener.
I need to display or load a HTML page within another HTML page on a button click.I need this in a popup with the main html page as the background..pls can any tell me proper suggestions.
Take a look at the Facebox jQuery plugin. It does pretty much exactly what you're asking for. For example you can have a link like this to some remote page like so
text
then just call the facebox plugin when your content is loaded like so
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
});
and your content will render in a modal window. You can also take a look at Fancybox or ThickBox which provide very similar functionality.
try using windows.open() function.
for Example
var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
var URL = "https://www.linkedin.com/cws/share?mini=true&url=" + location.href;
var win = window.open(URL, "_blank", strWindowFeatures);
I have an ionic app that has a search template that has a form where you can query posts by keyword. I also have a service that returns the post(s) as a list on another view. All that is working well.
My search controller upon submitting the search form uses:
$state.go('app.search.results', {'searchId': hash});
so that I can have a unique url for that search. I needed this unique url to implement 'back' functionality so that if a user clicks on one of the posts in the list, after viewing the post if they decide to click back, they would get to see the results of the search still (by default they would be returned to the search form without any results anymore).
To allow for a back to search results I implemented a custom back button function and put it on the ionic back button element like this:
<ion-nav-back-button ng-click="goBack()">
and then setup a the custom function:
$scope.goBack = function() {
$window.history.back();
}
All of this works well, I can go back to search results and see them, essentially very much like normal browser back functionality.
Problem for me is that when I have gone all the way 'back' via the back button, my initial state contains the 'Back' button and clicking it does not go anywhere and the 'Back' button still shows. Ionic does pretty good about hiding the back button when it shouldn't be there but in this case not so. Any ideas for how to check when history is exhausted and hiding the back button conditionally would be appreciated.
EDIT:
Here is a jsFiddle ; Note: open fiddle in a new, separate tab to see back button issue. FYI Search is in the menu.
One of the few qualms I have with Ionic is their "smart" navigation. I have run into a lot of problems with this myself. My solution was to create a back button of my own, this back button stores previous states and their params so you can go back and not lose search results for example with your scenario.
This component gives you both a back button and breadcrumbs to use (or you can just use back button)
It is open source and feel free to use it!
jscBreadcrumbs
Strange Milk - Breadcrumbs Post
Here is your jsFiddle with the jscBreadcrumbs implemented and working:
jsFiddle
jscbreadcrumbs
You use $window.history.back(), I think you should use $ionicHistory.goBack(); instead. It can control the history and view and state in the ionic way.
Before I go and do this in Jquery out of frustration I figured I would ask what the angular way is?
I'm building an AngularJS site using a model based of the Phonecat tutorial example on the AngularJS site.
I found this method to set the title of a page and can work out how to modify it to do description as well in the app config but this doesn't work when I'm populating pages with content via json. I tried doing it using a ngbind method as well but have yet to find a working solution as I think something to do with the order in which files are loaded is breaking.
For example
when('/faq', {
templateUrl: 'sub_pages/articles.html',
title: 'Landing page title goes here, not to big a deal'
}).
when('/things-to-do/:activityID', {
templateUrl: 'sub_pages/activity-detail.html',
controller: 'activityDetailCtrl',
title: 'If I put a title here it will be the same on all of these pieces of content'
}).
What method can I use in order to set title on both the landing pages and also the pages which draw their content from a JSON feed?
EDIT - ANSWER BELOW
After about 2 days of bashing my head against a wall trying to work this one out it's actually quite simple and works for both static pages and templates with dynamically loaded content.
Inside the view pages (html that loads inside of ng-view) add a couple of divs (you can put this anywhere really) and then inside them you need to load in ng-init.
ng-init="$root.title = path.to.title"
ng-init="$root.description = path.to.description"
This will set the title and description on the root scope. The "path.to." is just an example path to content in json, you can replace this with plain text as well which is how I deal with landing pages.
Then on the index.html or what ever page your app is based on inside the head you just need to load in.
Your Page Title
This will automatically set your page title and description meta tags and you can pretty much use this formula for any other meta data you need to create.
I haven't tested this yet with Prerender.io or any other cache service but will do some checks and post the results here.
Something like
$document[0].title = "xyz";
I have a site that has a user page. On that page, there are several links that let you explore the user's profile. I'd like to make it so that, when one of those links is clicked on, the url changes, but the top third of the page containing the user's banner doesn't reload.
I'm using Backbone.js
I have a feeling that I'm in one of those situation where I have such a poor understanding of the problem I'm dealing with that I'm asking the wrong question, so please let me know if that appears to be the case
My mistake was assuming that there was a special, built-in way of doing this in backbone. There isn't.
Simply running the following line of code
window.history.pushState('object or string', 'Title', '/new-url');
will cause your browser's URL to change without reloading the page. You can open up the javascript console in your browser right now and try it with this page. This article explains how it works in more detail (as noted in this SO post).
Now I've just bound the following event to the document object (I'm running a single page site):
bindEvents: () ->
$(document).on('click', 'a', #pushstateClick)
pushstateClick: (e) ->
href = e.target.href || $(e.target).parents('a')[0].href
if MyApp.isOutsideLink(href) == false
if e.metaKey
#don't do anything if the user is holding down ctrl or cmd;
#let the link open up in a new tab
else
e.preventDefault()
window.history.pushState('', '', href);
Backbone.history.checkUrl()
See this post for more info.
Note that you CAN pass the option pushstate: true to your call to Backbone.history.start(), but this merely makes it so that navigating directly to a certain page (e.g. example.com/exampleuser/followers) will trigger a backbone route rather than simply leading to nowhere.
Routers are your friend in this situation. Basically, create a router that has several different routes. Your routes will call different views. These views will just affect the portions of the page that you define. I'm not sure if this video will help, but it may give you some idea of how routers interact with the page: http://www.youtube.com/watch?v=T4iPnh-qago
Here's a rudimentary example:
myapp.Router = Backbone.Router.extend({
routes: {
'link1': 'dosomething1',
'link2': 'dosomething2',
'link3': 'dosomething3'
},
dosomething1: function() {
new myapp.MyView();
},
dosomething2: function() {
new myapp.MyView2();
},
dosomething3: function() {
new myapp.MyView3();
}
});
Then your url will look like this: www.mydomain.com/#link1.
Also, because <a href=''></a> tags will automatically call a page refresh, make sure you are calling .preventDefault(); on them if you don't want the page to refresh.