Display alert message after page reload - javascript

I have to call $route.reload(); in controller 2 addData API call so that I can get the added data in my UI. But then the text 'Data added successfully' goes away due to page refresh.
controller 1:
$rootScope.$on('reloaded', function(event, data) {
$scope.$parent.alerts.length=0;
$scope.$parent.alerts.push({type: 'success',msg: 'Data added successfully'});
});
controller 2:
$scope.add = function() {
someAPIService.addData(JSON.stringify($scope.rows)).success(function(response) {
ngDialog.close('ngdialog1');
$route.reload();
$rootScope.$emit('reloaded', "true");
});
}
HTML Part:
<section>
<div ng-controller="controller3">
<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
</div>
<div class="row form-inline" ng-controller="controller2 as vm">
<!-- Table data with text fields-->
</div>
<script type="text/ng-template" id="addDataDialog">
<div id="frm" ng-controller="controller1" class="col-xm-6">
<div class="form-group">
<!-- Labels with text fields-->
</div>
<button class="ngdialog-button" ng-click="add()">Save</button>
</div>
</script>
</section>
NOTE: Both controllers are in the same JS file and they are used for the same HTML file.

As you want to only load the latest record list which is on server side. Then there is not need to use $route.reload(); after making post call. You need to only make ajax call to get the latest records list that will solve your problem. For making ajax you need to refer $http
$route.reload() is getting used only when you need to load
controller again with specified template in your $routeProvider when
condition

just a simple hint of an answer:
add a (specific) cookie (with javascript) before calling reload (use e.g Cookies lib),
read it on reload,
and then delete it
Also you may use local storage if it is available instead of a cookie using same steps:
add a specific entry in local storage, before calling reload
read it on reload
and then delete it
Another option to maintain state client-side is to use url parameters but these will not do for page reload

Related

Multiple data objects in Ractive template

I am in the middle of the development of a standalone widget in jQuery and RactiveJS template. Initially the widget is opened with dynamic input form elements and these elements are populated with AJAX call. Here the email is a static field. This is the initial view for the user. When a user clicks on a button in the widget, it will validate the form and send another AJAX-POST call with validated data and show the response of the request on a div inside the widget template itself. If the POST call fails, some error message should be displayed in the same div. I have successfully implemented the initial view of the widget and validation. Below is my code:
Template
<div> <!-- all the mustache {{}} variables are coming from the loadData() ajax call -->
{{#partial widget-header}}
<header>
<div >
<img alt="logo"><span>{{clientID}}</span>
</div>
</header>
{{/partial}} {{>widget-header}}
<section>
<div>
<div>
<form>
<span>Complete required fields </span> {{#partial mandatory}}
<em>*</em> {{/partial}}
{{#each items}}
<div>
<div>
<label>{{dynamicField}}</label>{{>mandatory}}</div>
<div>
<input type="text" name="{{dynamicField}}" maxlength="20">
<div>{{dynamicFieldHelp}}</div>
</div>
</div>
{{/each}}
<div >
<div>
<label>Your Email Id</label>{{>mandatory}}
</div>
<div >
<input type="text" name="email">
<div>enter your email</div>
</div>
</div>
<div >
<input type="button" value="Submit Form" on-click="formValidate">
</div>
</form>
</div>
</div>
</section>
</div>
JavaScript
this.ractive = new Ractive({
el: 'widgetContent',
template: mainTemplate,
data: function loadData() {
$.ajax({
async: false,
url: "https://example.com/xyz/" +employeeNo,
success: function (response) {
initialData = response.payload[0];
}
});
return initialData; // return the dynamic form elements in data field.
},
oncomplete: function () {
self.center();
}
});
this.ractive.on({
formValidate: function (ev) {
validate the form and send AJAX-POST call then display the response data in a div -
this is where I am stuck..
},
});
But the problem I am facing here in the second AJAX-POST call. I am not able to use a second data field in the ractive initialization. How can I implement this part ? If I use a second data field in the ractive, it will not call the first AJAX call for displaying the form elements. So my understanding is like only one data field can be added in the ractive initialization.
Do I need to use any advanced ractive concepts such as components to implement this part? Can someone help me on this.
note:- I haven't added divs for result handling in the template since I am stuck
You don't want two data members; what you want is for your data to contain a separate field for the response data. Based on what you have, data should initially be something like:
{
items: [],
response: 0
}
I would add an oninit function where you do the initial AJAX call, then when you get the response do ractive.set("items", items) to set it. Using set will cause Ractive to automatically update the view with your new items.
Next, in your formValidate function, make your AJAX call. When the response comes back, again use set to notify Ractive of the change: ractive.set("response", response). Add your div to the template:
{{#response}}
<div>{{response}}</div>
{{/}}

How to load a view when a button is pressed?

I have a list of buttons in my <div>, when the user click on a specific div, I want display a view of my controller, for example:
<div class="row">
<div id="booking" class="command-buttons tile col-xs-12 btn">
<h3 class="title">Book appointment</h3>
</div>
</div>
I want load the appointment booking page when my user click on booking div. For load a view I use this code:
$this->load->view('appointments/book', $view);
but how I can do this using js? Usually a call a function that contains the view load, but in this case I'm on js side.
probably something like that:
$('div#booking').on('click', function() {
$(this).load( "view.html");
});
you can find some details here http://api.jquery.com/load/
I'm not entirely sure, but I think
echo $this->load->view('appointments/book', $view, true);
will return the html to your ajax success function and you can then easily inject it in the page.

JSON data not showing up when I change http.jsonp() URL

I'm trying to read data from an external JSON file using AngularJS.
Here is my HTML
<div class="panel panel-default" ng-controller="MyAppController">
<div class="panel-heading">
<div class="input-group">
<input ng-model="query" type="text" placeholder="What file are you looking for?" class="form-control"><span ng-click="clearFilter()" ng-disabled="query.length == 0" class="input-group-addon"><i class="glyphicon glyphicon-remove"></i></span>
</div>
</div>
<div class="panel list-group">
<span data-ng-repeat="cat in cats | filter: query" class="list-group-item animate-repeat">{{cat.title}}
</span>
<div class="clearfix"></div>
</div>
</div>
It works fine when I use this in my JS file and data shows up in a list.
function MyAppController($scope, $http) {
var url = 'http://jobs.github.com/positions.json?callback=JSON_CALLBACK';
$http.jsonp(url).success(function(data) {
$scope.cats = data;
});
}
But when I change the URL to my personal site nothing shows up even though I literally just copied and pasted everything in the github JSON file to a local JSON file. (just to test it out)
function MyAppController($scope, $http) {
var url = 'http://ciagent.com/Website-files/positions.json?callback=JSON_CALLBACK';
$http.jsonp(url).success(function(data) {
$scope.cats = data;
});
}
http://ciagent.com/Website-files/positions.json?callback=JSON_CALLBACK &
http://jobs.github.com/positions.json?callback=JSON_CALLBACK have the same exact content but only the github one works with my angular app for some reason.
Any reasons as to why it's doing this?
Assuming you are using a static resource file you need to realize that the string 'JSON_CALLBACK' is a placeholder and gets modified within each $http.jsonp() request to something else.
You should be able to see this in the actual request URL in network tab of browser dev tools.
You can also open the github version in browser and change the value to see that it is not static on their server and will adjust to whatever value is sent.
If you want to use jsonp server side it needs to return dynamic value of the callback GET parameter value.
+1 to what #charlietfl said. Also, be sure to set Content-Type:application/javascript;charset=utf-8 in your response headers.

angularjs bindings won't show unless i make a GET call

here is my situation:
I have an "edit" screen in my app. To load this screen, i am passing in an object through a window.postMessage event. I am listening for this postMessage event in my controller for the edit page and assigning the passed-in object to a property on my scope called "patient". Then, in the edit page markup, i am using ng-repeat to bind to an array on my "patient" object. The problem is, the page does not update to show the received data.
Here is what my event handler code looks like in my controller:
window.addEventListener("message", function(event) {
if (event.data.view === 'edit') {
$scope.patient = event.data.patient;
}
});
Here is what the markup looks like to bind to the patient object:
<div ng-repeat="dataItem in patient.fields | filter:{display:true}">
<div class="row" >
<div class="col-xs-12">
{{dataItem.displayName}}:
</div>
</div>
<div class="row" >
<div class="col-xs-12">
<input type="text" style="width: 100%;" ng-model="dataItem.value" /><br />
</div>
</div>
</div>
The data loads correctly and the $scope.patient property is getting fully populated, but the screen does not update. However, if I add a simple 'GET' call using RESTAngular, and don't even use the result of the call, the page updates correctly. Why is that and what can I do to get the page to update without the meaningless RESTAngular call? Here is the code that works with the RESTAngular call:
window.addEventListener("message", function(event) {
if (event.data.view === 'edit') {
patient = PatientRestangular.one('patients', event.data.patientId);
//this is a hack
//the data will not load on the edit screen without a call to 'get()'
patient.get().then(function(){
$scope.patient = event.data.patient;
});
}
});
Try $apply:
$scope.$apply(function(){
$scope.patient = event.data.patient;
});

jQuery Mobile navigate - Why is the state empty?

I'm using $.mobile.navigate("#test-page", {id:123}) to navigate to a secondary page.
The navigation from page to page works fine.... but the state is empty!
The docs clearly show that the state should contain all information I need when the navigation is performed.
This is the code I'm using:
$(window).on('navigate', function(event, data) {
console.log("navigated", data);
console.log(data.state.info);
console.log(data.state.direction);
console.log(data.state.url);
console.log(data.state.hash);
if (data.state.hash === "test-page") {
console.log("Test page", data.state.id);
}
});
Unfortunately data is passed as empty:
{
state:{}
}
The HTML is the following:
<div id="test-home" data-role="page">
<div data-role="header">
<h1>Test Home</h1>
</div>
<div data-role="content">
<div id="test-btn">
Click DIV for TEST page
</div>
</div>
<div data-role="footer">
</div>
</div>
<div id="test-page" data-role="page">
<div data-role="header">
<h1>Test Page</h1>
</div>
<div data-role="content">
Test page
</div>
</div>
Hope that someone can help. Thanks!
$.mobile.navigate and navigate event, are used to track URL history and pass/fetch data from URL. They work with browser's navigation (back / forward).
To pass data between pages dynamically within a webapp using internal navigation, use $.mobile.changePage.
Resources:
$.mobile.navigate()
Navigate
$.mobile.changePage()
Use the below code to pass data from page to another.
$.mobile.changePage('store.html', {
dataUrl: "store.html?id=123",
data: {
'id': '123'
},
reloadPage: true // force page to reload
});
To retrieve data
$('.selector').on('pagebeforeshow', function () {
var values = $(this).data("url").split("?")[1];
id = values.replace("id=", "");
console.log(id);
});
I know it is an old question, but #Omar's answer can be improved.
In fact, it is possible to use pagecontainerbeforehide, pagecontainerbeforeshow, pagecontainerhide, pagecontainershow, pagecontainertransition and pagecontainerchange (they are fired in this order) and inside the handler you can read the property history.state, that at that point is updated with the new state.
So, for example, you can write (to initialize things that need the page already formatted, e.g. Google Maps):
$(document).on("pagecontainershow", function(e, data) {
console.log("pagecontainershow: " + JSON.stringify(history.state));
});
This works in all cases: if you click on a link (with a hash, e.g. #user), if you navigate with the back and forward buttons, if you use $.mobile.navigate and also for window.history.back().
Moreover, you can pass complex data, not limited to the query string constraints.
Resources:
Pagecontainer
History

Categories