I can only navigate from page 1 to page 2 but couldn't get back from page 2 to page 1.
demo http://codepen.io/anon/pen/qEOJBp
I wonder why? The code look flawless for me :
<ion-nav-view name="home"></ion-nav-view>
<ion-nav-view name="threadContent"></ion-nav-view>
<script type="text/ng-template" id="home.html">
<ion-view name="home">
<ion-content>
<h2>Home Page</h2>
<p>Here is the main route for the app.</p>
GO
</ion-content>
</ion-view>
</script>
<script type="text/ng-template" id="threadContent.html">
<ion-view name="threadContent" title="Thread Content">
<ion-content>
Back
<h2>Using the app</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis architecto hic officia quasi excepturi sequi deleniti maiores consectetur veritatis sint?</p>
</ion-content>
</ion-view>
</script>
$rootScope.$on('$stateChangeSuccess', function (event, to, toParams, from, fromParams) {
$rootScope.$previousState = from;
$rootScope.$previousStateParams = fromParams;
});
On my project I have used ui.router, but main idea is:
Catch change state event and save data to root scope. And you will always have an ability back to previous sate.
Related
I have an issue when i get the data with vue js, it returns a HTML not json. I conse the route params it show an id of the post. This is my code in vue:
axios.get("api/posts/" + this.$route.params.id).then(response => {
console.log(this.$route.params.id);
console.log(response.data);
});
And this is the response data :
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" href="http://127.0.0.1:8000/css/app.css">
<script src="http://127.0.0.1:8000/js/app.js" defer></script>
</head>
<body>
<div id="app">
<index></index>
</div>
</body>
</html>
But in the postman, i access the url "api/posts/1" it show json data
{"id": 1,"title": "Schambergerstad Fancy Rooms",
"description": "Qui minima tempora ea modi maiores. Quaerat non aut porro vel occaecati. Deleniti quaerat quod veniam. Dolor ducimus facilis molestiae omnis fuga occaecati.",
"created_at": "2020-06-04T11:28:25.000000Z","updated_at": "2020-06-04T11:28:25.000000Z"
}
But i see in network tab, the request url is "http://127.0.0.1:8000/posts/api/posts/1". Why become to that url? I call it in axios is "api/posts/1"
How to fix it?
try adding headers Content-Type json
axios.get("/api/posts/" + this.$route.params.id, {
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
console.log(this.$route.params.id);
console.log(response.data);
});
Okay sorry it's just typo axios.get("api/posts/" + this.$route.params.id) it's should add "/" before "api/posts/"
axios.get("/api/posts/" + this.$route.params.id)
I can't get UI-Router to work, which is really annoying because I'm building a site off of another site I built where it was working fine. Currently, ui-view is not displaying anything, and ui-sref links are not clickable or redirecting. I'm not getting any errors either. My code is below. Any help would be much appreciated!
JS: app.js
var app = angular
.module("RssTransfers", ["ui.router"])
.config(MainRouter);
function MainRouter($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/');
$stateProvider
.state('transfers', {
url: '/',
templateUrl: 'transfers.html',
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
})
.state('upload', {
url: '/upload',
templateUrl: 'upload.html'
})
};
HTML: index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>RSS Transfers</title>
<link rel="stylesheet" type="text/css" href="./css/materialize.css" />
<link rel="stylesheet" type="text/css" href="./css/style.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script>
<script src="./js/ng-file-upload-shim.min.js"></script> <!-- for no html5 browsers support -->
<script src="./js/ng-file-upload.min.js"></script>
<script src="./js/app.js"></script>
<script src="./js/transferController.js"></script>
<script src="./js/uploadController.js"></script>
<script src="./js/materialize.js"></script>
</head>
<body ng-app="RssTransfers">
<div ng-include="'navbar.html'"></div>
<div class="wrapper" ui-view></div>
</body>
</html>
dummy text to display: transfers.html
<div ng-controller="TransferController as transfer">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, est, cum. Dicta, eius obcaecati quia culpa ipsam quibusdam tempore adipisci molestias optio, nam corporis, veritatis voluptatem incidunt cumque a sequi?</p>
</div>
As requested, here's the code for the controller:
TransferController.js
angular.module('RssTransfers')
.controller('TransferController', TransfersController);
TransfersController.$inject = ['$http'];
function TransfersController($http){
var self = this;
self.all = [];
self.addTransfer = addTransfer;
self.newTransfer = {};
self.getTransfer = getTransfer;
getTransfers();
function getTransfers(){
$http
.get('http://localhost:3000/transfers/')
.then(function(response){
self.all = response.data.transfers;
});
}
function addCriminal() {
$http
.post('http://localhost:3000/transfer', self.newTransfer)
.then(function(response){
getTransfers();
});
self.newTransfer = {};
}
}
Solved, although I'm not sure why. I deleted my frontend files and started from scratch, and it works fine. I suspect there may be an issue with ui-router and ng-file-upload conflicting, but I'll tackle that issue when I get there.
I've taken your code and created a plunkr here. Note - that it doesn't contain the controller just yet.
angular.module('RssTransfers',['ui.router']);
(function() {
'use strict';
angular
.module('RssTransfers')
.config(routing);
routing.$inject = ['$stateProvider', '$urlMatcherFactoryProvider', '$urlRouterProvider'];
function routing( $stateProvider, $urlMatcherFactoryProvider, $urlRouterProvider ){
$urlMatcherFactoryProvider.strictMode(false);
// For any unmatched url, redirect to /root
$urlRouterProvider.otherwise("/transfers");
$stateProvider
.state('transfers', {
url: '/transfers',
templateUrl: 'transfers.html',
})
.state('about', {
url: '/about',
templateUrl: 'about.html'
})
.state('upload', {
url: '/upload',
templateUrl: 'upload.html'
});
}
})();
though I'm still unsure why yours doesn't work...
I am completely new to Backbone JS. I thought I could solve this minor problem by myself but I can't figure why I am still getting this error:
Uncaught ReferenceError: Backbone is not defined
when trying to extend a Backbone.Model. backbone.js is called before the script that uses it so I don't get it.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/backbone.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<title></title>
</head>
<body>
</body>
</html>
My external file main.js
(function($) {
window.Doc = Backbone.Model.extend({
defaults : {
id : '???',
title : 'Le titre de mon modèle',
text : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer varius ipsum nec porta dignissim. Donec a elementum magna. Donec sagittis magna eu nulla ullamcorper dictum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nullam volutpat felis vehicula, congue mi at, lobortis dolor.',
keywords : 'lorem ipsum dolor sit amet'
},
initialize : function Doc() {
console.log('Doc Constructor');
}
});
})(jQuery);
I also get the following error coming from backbone.js:219
Uncaught TypeError: Cannot call method 'each' of undefined
You forgot to import underscore.js.
It is a Backbone requirement.
Grab it here!
I faced the same issue while running jasmine testcases using SpecRunner.html, so when specifying backbone.js in your dependencies in SpecRunner.html, add jquery and underscore.js first, because backbone depends on them.
I can't seem to get the Modal popup to show. With the code below, the display goes out of focus but no window displays.
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnShow" runat="server" Text="Open ModalPopup" OnClientClick="return ShowModalPopup('modal');" />
<ajaxToolkit:ModalPopupExtender runat="server" ID="modal" BackgroundCssClass="darken"
CancelControlID="btnCancel" PopupControlID="pnl" TargetControlID="btnShow" />
<asp:Panel ID="pnl" runat="server" style="width:55%;display:none;">
<h1>You can now see me!</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum."</p>
<asp:Button ID="btnCancel" runat="server" Text="Close" />
</asp:Panel>
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
</div>
</form>
</body>
</html>
<script type="text/javascript">
function ShowModalPop(PopupExtenderID) {
var ModalPopWindowShow = $find(PopupExtenderID);
if (ModalPopWindowShow) {
ModalPopWindowShow.show();
}
return false;
}
</script>
Code behind:
protected void Page_Load(object sender, EventArgs e)
{
_grid.DataSource = BuildList();
_grid.DataBind();
}
private List<EntityPerson> BuildList()
{
...
}
protected override void OnInit(EventArgs e)
{
base.OnInit(e);
btnShow.Click +=new EventHandler(btnShow_Click);
}
protected void btnShow_Click(object sender, EventArgs e)
{
Button btnShow = sender as Button;
ScriptManager.RegisterStartupScript(btnShow, btnShow.GetType(), "Popup", "return ShowModalPopup('modal');", true);
}
All your help is appreciated.
If there is another way to show a pop up window with AJAX, I would appreciate guidance on that as well.
I just need to be able to display cell content in a modal window when a user clicks on a cell in a grid.
I replaced
<asp:ScriptManager ID="ScriptManager1" runat="server"/>
with
<ajaxToolkit:ToolkitScriptManager ID="ajaxSM" runat="server" />
and I got the popup to show.
Cant get the stylesheet to work on the printed document. It works on the popup window but not when printed. So when the window on the screen pops up it has the proper styling but when the print dialog is used the print the contents of the window it does not take the styling from the stylesheet just default styles.
Here is the code:
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery- 1.3.1.min.js" > </script>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('', 'my div', 'height=400,width=600');
mywindow.document.write('<html><head><title>my div</title>');
mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
</script>
</head>
<body>
<div id="mydiv">
This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante.
</div>
Printout
If you want to design your print page.It will not work with your style sheet.You need to write inline style sheet.
I have face the same problem and finally solved that this is code :
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
</head>
<body>
<div id="mydiv">
This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante.
</div>
<a onClick="PrintElem('#mydiv')" class="btn btn-default btn-icon icon-left hidden-print pull-left">
My Div
<i class="entypo-print"></i>
</a>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($('<div/>').append($(elem).clone()).html());
}
function Popup(data)
{
var myWindow = window.open('', 'my div', 'height=400,width=600');
myWindow.document.write('<html><head><title>my div</title>');
myWindow.document.write('</head><body >');
myWindow.document.write(data);
myWindow.document.write('</body></html>');
myWindow.print();
myWindow.close();
return true;
};
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" > </script>
</body>
</html>
Print pages are usually used inside email as well. Based on what I experienced, you should write all your stylesheet codes within the code (inline).