i am new to AngularJs, Initially when page loads ie. when loadResponseData() is processing i need to show progress div and after ajax call completed need to show success div with response data. but success is not showing
after loadResponseData() is completed. Is there any way to show progress bar before completing ajax call and should show success div after response received from ajax call. Sorry for my english and kindly save my day.
<%
PayBean payBean = (PayBean) session.getAttribute("payData");
%>
<div ng-controller="payCtrl" ng-init="loadResponseData()" id="loadResponseData">
<div class="row">
<div class="col-12 col-md-12 col-sm-12 col-lg-8">
<form id="response">
<div class="row row-space" ng-if="status=='success'">
// load response data in elements
</div>
<div class="row row-space" ng-if="status=='progress'">
// Progress bar takes place
</div>
</form>
</div>
<div>
Method in payCtrl:
$scope.loadResponseData = function() {
$http.post(contextRoot + getResponseData(function(data) {
var status = sessionStorage.getItem("status");
$scope.status = status ;
sessionStorage.setItem('data', JSON.stringify(data));
});
};
try this example in here $timeout directive replace with $http and use ng-show instead of ng-if
var app = angular.module('app',[]);
app.controller('payCtrl',function($timeout,$scope){
$scope.status = "progress"; //by default set as progress
$scope.loadResponseData = function() {
console.log("yes called");
$timeout(function(){
$scope.status = "success";
},2000);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' class="container" ng-controller="payCtrl" ng-init="loadResponseData()" id="oadResponseData">
<div class="row">
<div class="col-12 col-md-12 col-sm-12 col-lg-8 center">
<form id="response" class="success">
<div class="row row-space" ng-show="status== 'success'">
<h1>success code loaded</h1>
</div>
<div class="row row-space" ng-show="status== 'progress'">
<h1>Progress code loaded</h1>
</div>
</form>
</div>
<div>
Because you are using ng-if directive it creates new scope so status isn't visible. try use controllerAs syntax or use ng-hide or ng-show directive.
Try this one
<div ng-controller="payCtrl as vm" ng-init="vm.loadResponseData()" id="loadResponseData">
<div class="row">
<div class="col-12 col-md-12 col-sm-12 col-lg-8">
<form id="response">
<div class="row row-space" ng-if="vm.status=='success'">
// load response data in elements
</div>
<div class="row row-space" ng-if="vm.status=='progress'">
// Progress bar takes place
</div>
</form>
</div>
<div>
and in controller use var vm = this; instead $scope;
var vm = this;
vm.loadResponseData = function() {
vm.post(contextRoot + getResponseData(function(data) {
var status = sessionStorage.getItem("status");
vm.status = status ;
sessionStorage.setItem('data', JSON.stringify(data));
});
};
Related
I have a side bar for my user profile page which has two items for 1) Updating the information and 2) showing the reviews that the user has already written.
The first item works perfectly (as it includes a form and has a submit button). But for the second one, I have no idea. The goal is that when I click on My Reviews, a method from the controller class is called, the reviews of the user are extracted from the database and the results are shown on the right side of the page.
As I don't have a submit button or a form for the second item, I don't know how I can implement it.
Here is my code:
<div class="module-inner">
<div class="side-bar">
<nav class="side-menu">
<div class="col-xs-3">
<ul class="nav nav-pills nav-stacked">
<li class="active"><a data-toggle="pill" href="#profile">Profile</li>
<li class="active"><a data-toggle="pill" href="#review">My
Reviews</a></li>
</ul>
</div>
</nav>
</div>
<div class="content-panel">
<div class="col-xs-9">
<div class="tab-content">
<div id="profile" class="tab-pane fade">
<form class="form-horizontal" th:action="#{/edit_profile}"> <fieldset class="fieldset">
<h3 class="fieldset-title">Personal Info</h3>
<div class="form-group">
<label class="col-md-2 col-sm-3 col-xs-12 control-label">User
Name</label>
<div class="col-md-10 col-sm-9 col-xs-12">
<input type="text" class="form-control"
th:disabled="${currentUser.email}"
th:value="${currentUser.email}">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-sm-3 col-xs-12 control-label">First
Name</label>
<div class="col-md-10 col-sm-9 col-xs-12">
<input name="firstname" type="text" class="form-control"
th:value="${currentUser.firstname}">
</div>
</div>
<div class="form-group">
<label class="col-md-2 col-sm-3 col-xs-12 control-label">Last
Name</label>
<div class="col-md-10 col-sm-9 col-xs-12">
<input name="lastname" type="text" class="form-control"
th:value="${currentUser.lastname}">
</div>
</div>
</fieldset>
<hr>
<div class="form-group">
<div
class="col-md-10 col-sm-9 col-xs-12 col-md-push-2 col-sm-push-3 col-xs-push-0">
<input class="btn btn-primary" type="submit"
value="Update Profile">
</div>
</div>
</form>
</div>
<div id="review" class="tab-pane fade">
<h3>Menu 2</h3>
<p>You have no reviews yet.</p>
</div>
</div>
</div>
</div>
</div>
Here is my controller:
#RequestMapping(value = "/findUserReviews", method = RequestMethod.GET)
public ModelAndView findUserReviews() {
ModelAndView modelAndView = new ModelAndView();
Authentication auth = SecurityContextHolder.getContext().getAuthentication();
User user = userService.findUserByEmail(auth.getName());
..
modelAndView.addObject("reviews", reviewRepository.findUserRevies());
modelAndView.setViewName("profile");
return modelAndView;
}
I use the following technologies: Spring boot, Hibernate and Thymeleaf.
Any help would be appreciated.
Final update: The provided code in the accepted answer works, provided that I don't return a ModelAndView but a List<Review>.
With Ajax calls you can call the controller endpoints using javascript. One ajax call looks like this :
function getReviews() {
$.ajax({
type: "GET",
url: "/users/findUserReviews", //example
dataType: "JSON",
success: function (data) {
//do something with this JSON
fillReviews(data);
}
});
}
Now you can use this function as an on-click event for your button. And the fillReviews() is a function that gets the element with id="review" from the jsp page and create the list tree with the fetched data.
function fillReviews(data) {
var reviewDiv= document.getElementById('review');
var reviewList = document.createElement('ul');
for ( var i=0 ; i < data.length; i++)
{
var reviewListItem = createListItem(data[i]);
reviewList.appendChild(reviewListItem);
}
reviewDiv.appendChild(reviewList);
}
And createListItem(data[i]) could look like this:
function createListItem(data)
{
var listItem = document.createElement('li');
listItem.innerHTML = data["reviewName"]; // for example ..
return listItem;
}
And now all you have to do is to call getReviews() here :
<button onclick="getReviews()"/>
EDIT : The "data" from the ajax call is a JSON. So the "/users/findUserReviews" should return a List<Review> for example. And there is no need to change your original "/findUserReviews" endpoint. This was only an example, you can create a new endpoint in your controller which returns a list.
I have form action with textarea and submit button
<form method="post" action="/analyze">
<div class="form-group">
<label for="text">Input text:</label>
<textarea class="w-100" name="text" id="text" cols="30" rows="10"></textarea>
</div>
<div class="form-group d-flex justify-content-center">
<input type="submit" class="btn__submit btn btn-dark my-auto" value="Обработать">
</div>
</form>
<div class="row">
<div class="col">
<p th:text="#{nertext}"></p>
</div>
</div>
When I click submit button, i want to get processed text from server in Spring Boot and paste in tag p in div col.
Java Controller
#RequestMapping(value = "/analyze", method = RequestMethod.POST)
public String analyzeText(#RequestParam String text, Model model) {
System.out.print(classifier.classifyToString(text, "tsv", false));
String asd = classifier.classifyToString(text, "tsv", false);
model.addAttribute("nertext", asd);
return "/analyze";
}
How can i do submit without reload page
Use the Fetch API (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) and the onsubmit event listener (https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit) to submit the form with JavaScript without reloading the page:
let form = document.getElementById("the-form");
form.onsubmit = function (e) {
e.preventDefault();
fetch(form.action, {
method: "post",
body: new FormData(form)
}).then(response => {
// do something with the response...
});
}
The e.preventDefault() makes sure that the page is not reloaded when you click the submit button. This assumes your form has the id the-form, like this:
<form id="the-form" method="post" action="/analyze"> ... </form>
When user click "All"(20k) from drop-down list of "List of users", Internet Explorer 10 falls in "Not Responding" state.
If user ignore that "Not Responding" state and keep waiting, full report is shown after approximately 4 minutes.
Trying this procedure on Firefox 26(supported) and Chrome 32(unsupported) and I don't encounter it.
How to improve performance AjaxFallbackDefaultDataTable?
private WebMarkupContainer createReportContainer()
{
Collections.addAll(numberRowsList, "50", "100", "1000", "All");
final WebMarkupContainer usersDiv = new WebMarkupContainer("usersDiv");
usersDropDown = new NoDefaultDropDownChoice<String>("usersDropdown", new Model<String>(String.valueOf(DEFAULT_ROWS_PER_PAGE)), numnerRowsList);
usersDropDown.add(new AjaxFormComponentUpdatingBehavior("onchange")
{
private static final long serialVersionUID = 1L;
#Override
protected void onUpdate(final AjaxRequestTarget target)
{
final int index = Integer.valueOf(usersDropDown.getValue());
try
{
rowsPerPage = Integer.valueOf(numberRowsList.get(index));
}
catch (final NumberFormatException ex)
{
rowsPerPage = usersTable.getRowCount();
}
catch (final Exception ex)
{
rowsPerPage = 0;
}
if (rowsPerPage < 1)
{
rowsPerPage = DEFAULT_ROWS_PER_PAGE;
}
usersTable.setRowsPerPage(rowsPerPage);
target.addComponent(usersTable);
}
});
usersDiv.add(usersDropDown);
final List<IColumn<ReportDisplayItem>> usersColumns = new ArrayList<IColumn<ReportDisplayItem>>();
usersColumns.add(new TextFilteredPropertyColumn<ReportDisplayItem, String>(new StringResourceModel("FirstName", this, null),
"firstName", "firstName"));
usersTable = new AjaxFallbackDefaultDataTable<ReportDisplayItem>("table", usersColumns, dataProvider, rowsPerPage);
usersDiv.add(usersTable)
HTML
<html>
<wicket:extend>
<div class="user-management">
<div wicket:id="navborder">
<div wicket:id="reportsDiv">
<div id="header-title" class="topheader">
<div class="topsubheader">
<p><wicket:message key="LiteralReports">Reports</wicket:message></p>
</div>
</div>
<div wicket:id="feedback" class="error-message"></div>
<div class="row row-auto">
<div class="column-1"></div>
<div class="column-2"><hr width="60%" align="left"></div>
</div>
<div class="section" wicket:id="usersDiv">
<div class="row section-header datatable-header">
<div class="column-1and2">
<wicket:message key="LiteralLocalUsers">Users (Local)</wicket:message>
<span class="shownumberofrecords">
<wicket:message key="LiteralDisplay">Display:</wicket:message>
<select wicket:id="usersDropdown"></select>
<wicket:message key="LiteralItems">items</wicket:message>
</span>
</div>
</div>
<div class="row row-auto">
<div class="column-1and2">
<!-- <table class="dataview" cellspacing="0" wicket:id="table">[table]</table> -->
<form wicket:id="FilterForm" id="FilterForm">
<input type="hidden" name="tracker" wicket:id="focus-tracker"/>
<table class="dataview" cellspacing="0" wicket:id="table">[table]</table>
<span wicket:id="focus-restore">[call to focus restore script]</span>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</wicket:extend>
</html>
well i have got this Themeforest Template and played around with it until the website looks in a way how i imagined it. The only Problem i have is that the .js form somehow doesnt work and i dont have any idea. I dont even know where to tell the form to which Adress it should send the text. Maybe you can help me.
The Domain is: entwicklung.thechillingbull.de
This is the HTML:
<div class="container"> </div>
<div class="container"> </div>
<div class="bg-2 section" id="contact">
<div class="inner" data-topspace="50" data-bottomspace="20" data-image="flavours/coffeecream/images/demo-content/background-6.jpg">
<div class="container">
<h3 class="hdr4">Kontakt und Reservierung</h3>
<div class="easyBox full">
<div class="row nomargin">
<div class="col-md-11">
<h4 class="hdr2 special">Wenn du Uns etwas mitteilen oder Reservieren möchtest hast du hier die Chance!</h4>
<form class="simpleForm" action="form/form.php" method="post">
<fieldset>
<div class="form-group">
<label>Dein Name</label>
<input type="text" class="form-control" name="field_[]" placeholder="Schreibe deinen Namen">
</div>
<div class="form-group">
<label>Deine E-Mail-Adresse</label>
<input type="email" required class="form-control" name="email" placeholder="Schreibe deine E-Mail-Adresse">
</div>
<div class="form-group">
<label>Deine Nachricht</label>
<textarea class="form-control" rows="5" name="field_[]" placeholder="Schreibe deine Nachricht"></textarea>
</div>
<input type="hidden" name="msg_subject" value="Contact Form">
<input type="hidden" name="field_[]" value=" ">
<input class="btn btn-default" type="submit" value="Senden">
</fieldset>
</form>
<div class="successMsg" style="display:none;">Nachricht erfolgreich gesendet! </div>
<div class="errorMsg" style="display:none;"> Ups! Es ist ein Fehler unterlaufen, versuche es später erneut. </div>
</div>
<div class="col-md-2"> </div>
</div>
</div>
</div>
</div>
and this is the .js
/**
* Submitting Form
*/
jQuery(document).ready(function ($) {
var debug = false; //show system errors
var sendingMessage = 'Sending...';
$('.simpleForm').submit(function () {
var $f = $(this);
var $submit = $f.find('input[type="submit"]');
//prevent double click
if ($submit.hasClass('disabled')) {
return false;
}
$submit.attr('data-value', $submit.val()).val(sendingMessage).addClass('disabled');
$.ajax({
url: $f.attr('action'),
method: 'post',
data: $f.serialize(),
dataType: 'json',
success: function (data) {
if (data.errors) {
// error
var $errorMsg = jQuery($f).parent().find(".errorMsg");
jQuery($f).fadeOut(300,function(){
$errorMsg.fadeIn();
});
} else {
// success
var $successMsg = jQuery($f).parent().find(".successMsg");
jQuery($f).fadeOut(300,function(){
$successMsg.fadeIn();
});
}
$submit.val($submit.attr('data-value')).removeClass('disabled');
},
error: function (data) {
if (debug) {
alert(data.responseText);
}
$submit.val($submit.attr('data-value')).removeClass('disabled');
}
});
return false;
});
});
hope you can help me get this to work.
Thank you !
Change:
<form class="simpleForm" action="form/form.php" method="post">
To
<form class="simpleForm" action="/your-code-file" method="post">
where your-code-file will be the location of the file which will handle the form values.
I need to save event data to an xml file.I need to do this using a java code.i am using html5.
So from the javascript i need to call this java code and need to save event text,date and other details to an xml file.And whenever the data is needed it should be displayed back in the dhtmlx scheduler.How can i do this?
function init() {
scheduler.config.xml_date="%Y-%m-%d %H:%i";
scheduler.config.prevent_cache = true;
scheduler.init('scheduler_here',new Date(2010,0,20),"month");
scheduler.load("data/data.xml");
}
function show() {
alert(scheduler.toXML());
}
function save() {
var form = document.forms[0];
form.action = "./data/xml_writer.php";
form.elements.data.value = scheduler.toXML();
form.submit();
}
function download() {
var form = document.forms[0];
form.action = "./data/xml_download.php";
form.elements.data.value = scheduler.toXML();
form.submit();
}
xml_writer.php
<?php
file_put_contents("./data.xml",$_POST["data"]);
header("Location:./dummy.html");
?>
<?php
if(empty($_POST['data'])) {
echo "why";
exit;
}
xml_download
$filename = "data.xml";
header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');
echo $_POST['data'];
?>
html code
<form action="./php/xml_writer.php" method="post" target="hidden_frame" accept-charset="utf-8">
<input type="hidden" name="data" value="" id="data">
</form>
<iframe src='about:blank' frameborder="0" style="width:0px; height:0px;" id="hidden_frame" name="hidden_frame"></iframe>
<div id="scheduler_here" class="dhx_cal_container" style='width:100%; height:100%;'>
<div class="dhx_cal_navline">
<div class="dhx_cal_prev_button"> </div>
<div class="dhx_cal_next_button"> </div>
<div class="dhx_cal_today_button"></div>
<div class="dhx_cal_date"></div>
<input type="button" name="download" value="Download" onclick="download()" style="right:500px;" />
<input type="button" name="show" value="Show" onclick="show()" style="right:400px;" />
<input type="button" name="save" value="Save" onclick="save()" style="right:300px;" />
<div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div>
<div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div>
<div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div>
</div>
<div class="dhx_cal_header">
</div>
<div class="dhx_cal_data">
</div>
This much code i have.But code for saving to an xml file is in php.I need java code instead of php.