I know there a lot of things related to this stuff but I find it quite hard to implement
My current result is this. I added some details to the code to add to the DB then as I pressed the next button, it goes to another same page but its all about update and its not going anywhere to the page that I linked it to.
So far, this is what I've made to link the button to another page
if(!employeeExist){
$("#nextBtn").html("Next");
$("#nextBtn").removeClass("btn-success")
$("#nextBtn").addClass("btn-primary")
$('#a').hide();
$('#c').hide();
$('#d').hide();
$("#updateBtn").hide();
}else{
$("#updateBtn").html("Update");
$("#updateBtn").removeClass("btn-primary")
$("#updateBtn").addClass("btn-success")
$('#a').show();
$('#c').show();
$('#d').show();
$("#nextBtn").hide();
}
$("#updateBtn").click(updateCompanyInfo);
$("#nextBtn").click(updateCompanyInfo);
and this
if(employeeExist) {
$alertDiv("success","Company related information was successfully updated.",true);
} else {
$alertDiv("success","Company related information was successfully added.",true);
var fam = "${pageContext.request.contextPath}/employee/details/family?id="+empID;
window.location.replace(fam);
}
Here is the redirect part of my code
function Redirect() {
window.location="${pageContext.request.contextPath}/employee/details/family?id="+empID;
}
and the HTML part
<!-- Update -->
<div class="col-md-2 col-md-offset-8">
<br>
<div class="input-group">
<span class="input-group-btn">
<button id = "updateBtn" class="btn btn-success marginBtn">Update</button>
</span>
</div>
<br>
</div>
<!-- Next -->
<div class="col-md-2 col-md-offset-7">
<br>
<div class="input-group">
<span class="input-group-btn">
<button id = "nextBtn" class="btn btn-primary marginBtn" onclick="Redirect();">Next</button>
</span>
</div>
<br>
</div>
So how can I achieve this? Am I lacking something in the code or am I doing it the wrong way? Help me please!
Related
I've tried to build multi web by using Google Apps Script for other people to check or edit their information in database (Google spreadsheet), reserve time to photo which also link to google spreadsheet.
However, when I test web in incognito mode to test that anyone can use this web appropriately and when pressing button to go to another page, it just show me
Sorry but unable to open file at this time, please check the address
I 've search about how to solve in similar question but nothing works for me. Of course I didn't login many accounts when I deploy web and also very sure that I choose to 'anyone, even anonymous' before I deploy web.
so my question is that how can I fix this? This is some of my Code.gs and HTML
Some of Code.gs
function doGet(e) {
var htmlOutput = HtmlService.createTemplateFromFile('home')
htmlOutput.search = '';
htmlOutput.search2 = '';
htmlOutput.message = '';
return htmlOutput.evaluate()
}
function doPost(e) {
Logger.log(JSON.stringify(e));
if(e.parameter.checkdata == 'checkdata'){
var htmlOutput = HtmlService.createTemplateFromFile('checkdata');
htmlOutput.message = '';
return htmlOutput.evaluate()
}
else if (e.parameter.reservetime == 'reservetime'){
var htmlOutput = HtmlService.createTemplateFromFile('club');
return htmlOutput.evaluate()
HTML
<body class="background row align-items-center">
<div class="container" align = "center">
<?var url = getUrl();?>
<form method="post" action="<?= url ?>" >
<div class="row justify-content-center mt-4">
<div class="col-3 d-grid">
<button type="submit" class="btn btn-primary" value="checkdata" name="checkdata">Check Information</button>
</div>
<div class="col-3 d-grid">
<button type="submit" class="btn btn-primary" value="reservetime" name="reservetime">Reserve Time</button>
</div>
<div class="col-3 d-grid">
<button type="submit" class="btn btn-primary" value="paybook" name="paybook">Upload Slip</button>
</div>
</form>
<h4><?= message ?></h4>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
As can be seen, from home page if I click 'reserve time button' it will show the error that I mentioned above and I have no idea why.
I am sorry if my question is not clear and if you think you would like to get more information to help me, please feel free to ask me or request me to give some information more.
In the template page, I have an image and an input field. The image is a puzzle. If a user submits the wrong answer I want to show the user a modal with a message. So the modal will load only if the user submits the wrong answer.
image
html
<!-- show modal -->
<div id="error" style="margin-top: 120px">
<div id='modal1' class='modal modal-fixed-footer'></div>
</div>
<img class="materialboxed" width="480" height="200" src="{{ img_url }}" style="margin-top: 50px">
<form class="" id="puzzle_form" name="puzzle_form" method="post" style="margin-left: 20px; margin-top: 10px">
{% csrf_token %}
<div class="row">
<div class="input-field">
<i class="material-icons prefix">sentiment_very_satisfied</i>
<input id="answer" name="answer" type="text" class="validate" required>
<label for="answer">Your answer here...</label>
</div>
</div>
<div class="row">
<button id="submit_button" class="btn waves-effect waves-light" type="submit" style="margin-left: 90px">
Submit
<i class="material-icons right">send</i>
</button>
</div>
</form>
js
let _html = "<!-- Modal Structure -->";
_html += "<div class='modal-content'>";
_html += "<h4>Modal Header</h4>";
_html += "<p>A bunch of text</p>";
_html += "</div>";
_html += "<div class='modal-footer'>";
_html += "<a href='#!' class='modal-close waves-effect waves-green btn-flat'>Agree</a>";
_html += "</div>";
$('#error').ready(function () {
$('.modal').append(_html);
$('.modal').modal();
});
But when the user submits the wrong answer, the modal is not shown in the HTML page. (It is loaded though. I can see it from the Inspect element.)
Have you tried adding class="modal-trigger" in your submit button?
Could you please provide the codepen/JSfiddle link? If you saying the html has been appended to the page and you can see it by doing inspect element. So based on this there are two possibilities:
If you are using a plugin for this modal, it may not have been triggered.
There is some issue with the CSS.
Please share a link or CSS code so that I can check where it is gone wrong.Cause if it has been appended there is no issue from HTML end. Only with triggering the modal or with CSS.
Hope this helps!
What I did is, in my error callback in Ajax, I wrote this piece of code.
$('#error').ready(function () {
$('.modal').append(_html);
let _modal = document.querySelector('.modal');
let instance = M.Modal.init(_modal);
instance.open();
});
According to the doc, I am creating an instance of the modal by initializing it and then calling the open method on this instance to open the modal.
I am trying to add some buttons to the GeoNetwork 3 MapViewer. Unfortunately I'm new to AngularJS, which GN3 is written in. So what I've done is editing the html-template that the 'gnMainViewer' directive is using.
ViewerDirectve.js:
module.directive('gnMainViewer', [
'gnMap',
function(gnMap) {
return {
restrict: 'A',
replace: true,
scope: true,
templateUrl: '../../catalog/components/viewer/' +
'partials/mainviewer.html',
[...]
}]);
In this template I can find the buttons that are shown in the MapView.
mainviewer.html:
<div class="wrapper" data-ng-controller="gnViewerController">
<div data-gn-alert-manager=""></div>
<div id="map" ngeo-map="map" class="map"></div>
<div gn-gfi="" map="map"></div>
<div gn-localisation-input map="map"></div>
<!--Top right buttons - Tools-->
<div class="tools tools-right" gi-btn-group gnv-close-panel data-ng-controller="toolsController">
<button class="btn btn-default" ng-model="activeTools.addLayers" type="submit"
rel="#addLayers" gi-btn gnv-tools-btn>
<span class="fa fa-plus"></span>
<span role="tooltip" data-translate="">addLayers</span>
</button>
<button class="btn btn-default" ng-model="activeTools.layers" type="submit"
rel="#layers" gi-btn gnv-tools-btn>
<span class="fa fa-tasks"></span>
<span role="tooltip" data-translate="">Layers</span>
</button>
[...]
</div>
</div>
So I've added a button let's say:
<button class="btn btn-default" ng-model="" type="submit"
rel="#" gi-btn gnv-tools-btn>
<span class="fa fa-beer"></span>
<span role="tooltip">NewButton</span>
</button>
to the template.
Then I've saved my changed and refreshed the MapView-Page on my server. But a new button will not be displayed. Also, changing the comment "Top right buttons" to something else will not make any changes to the displayed MapView-Page.
Even restarting the server won't change anything.
Could somebody explain me why AngularJS reacts like this? Any Ideas?
Turned out I had to run the page in debug mode e.g. http://localhost:8080/geonetwork/srv/ger/catalog.search?debug#/map
to force to load all AngularJS files seperately and without cache.
Hello I am new to angular js , I need some help that i have one edit form in angular js when user click on edit it redirect to edit form but i am getting some issues that my json result look like :
[{"0":"3",
"1":"The only people for me are the mad ones",
"2":"“The only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars.”",
"3":"2015-05-08 13:01:58",
"id":"3","title":"The only people for me are the mad ones",
"description":"“The only people for me are the mad ones, the ones who are mad to live, mad to talk, mad to be saved, desirous of everything at the same time, the ones who never yawn or say a commonplace thing, but burn, burn, burn like fabulous yellow roman candles exploding like spiders across the stars.”",
"created_on":"2015-05-08 13:01:58"
}]
I want to know how to print my title , description in view.
Here is my controller file: where i get the data from database:
var myApp = angular.module("blogapp",[]);
myApp.config(['$routeProvider',function($routeProvider){
$routeProvider
.when('/home',{
templateUrl:'home.html',
controller:'blogcontroller'
})
.when('/list',{
templateUrl:'list.html',
controller:'blogcontroller'
})
.when('/add',{
templateUrl:'add.html',
controller:'addcontroller'
})
.when('/edit/:Blogid',{
templateUrl:'edit.html',
controller:'editcontroller'
})
.otherwise({
redirectTo:'/home'
});
}]);
myApp.controller('blogcontroller',function ($scope,$http){
$http({method: 'GET' , url: 'getallblog.php'}).success(function(data){
$scope.allblog = data;
console.log(data);
});
// DELETE blog HERE
$scope.removeRow= function(id){
$http.post("removeblog.php",{'id' : id}).success(function(data,status,headers,config){
window.location='index.html';
console.log("Deleted Successfully");
});
};
// delete blog code ends here
});
myApp.controller('addcontroller',function ($scope,$http){
/// New Post Here
$scope.new_post =function(){
$http.post("addblog.php" ,{'title' : $scope.title ,'description' : $scope.description }).success(function(data,status,headers,config){
window.location='index.html';
console.log("inserted Successfully");
});
};
// New Post ends Here
});
myApp.controller('editcontroller',function ($scope,$http,$routeParams){
$scope.Blogid = $routeParams.Blogid;
$http.post("getblog.php",{'id' : $scope.Blogid}).success(function(data){
$scope.editit = data; /// here i get the resuly want to pass it t view
console.log(data);
});
});
My edit html form : edit.html
<!-- Page Content -->
<div class="container">
<div class="row">
<!-- Blog Entries Column -->
<div class="col-md-6">
<h1 class="page-header">
Angular Blog
</h1>
<div >
<form class="form-signin">
<h2 class="form-signin-heading">Modify // want to print title here </h2>
<div class="row">
<div class="col-md-12">
<label for="posttitle" class="sr-only">Email address</label>
<input type="text" id="posttitle" class="form-control" ng-model="{{title}}" required="" value=""><br>
<span>Title : // want to print title here</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<label for="postdetails" class="sr-only">Password</label>
<textarea id="postdetails" class="form-control" ng-model="description" required=""></textarea>
<br>
<span>Blog Description: // want to print description here</span>
</div>
</div>
<br>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<button class="btn btn-lg btn-primary btn-block" type="button" ng-click="edit_post()" name="editblog">Modify Now</button>
</div>
<div class="col-md-3"></div>
</div>
</form>
</div>
</div>
<div class="col-md-2"></div>
<!-- Blog Sidebar Widgets Column -->
<div ng-include="'includes/sidebar.html'">
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
to print your title, you first need to replace this line in JS:
$scope.allblog = data;
with
$scope.allblog = data[0];
Now, you can write in HTML the following statement:
{{allblog.title}}
Something like this:
<span>Blog Description: {{allblog.description}}</span>
Or
<span>Blog Description: <span ng-bind-html ="allblog.description"></span></span>
if your allblog is an array use allblog[0]
I been scratching my head on this one for a while.
Writing a plugin in grails that calls on bootstrap-mini.js and most of its css. Everything works fine. The issue I am having is I have a remote form which onComplete runs java script:
https://github.com/vahidhedayati/ml-test/blob/master/grails-app/views/mailingListModal/_modalcreate.gsp
<g:javascript>
function ${controller}CloseModal() {
var myClone=$('#BuildModal${id}').clone();
$('#BuildModal${id}').dialog().dialog('close');
$(".modal-backdrop").hide();
$('body').removeClass('modal-open');
//var myCloner = myClone.clone();
$('#${divId}1').hide().append(myClone);
//$('body').append(myClone);
<g:if test="${!disablecheck.equals('true') }">
var controller="${controller }";
var divId="${divId }";
$.get('${createLink(controller:"MailingListEmail", action: "getAjaxCall")}?ccontroller='+controller+'&divId='+divId,function(data){
$('#${divId}').hide().html(data).fadeIn('slow');
});
</g:if>
}
</g:javascript>
The bits at the top of the function is all the things I have tried so far.
https://github.com/vahidhedayati/ml-test/blob/master/grails-app/views/mailingListEmail/contactclients.gsp
<div class="tbutton">
<button href="#BuildModalSENDERS" class="btn btn-block btn-success" role="button" data-toggle="modal" title="Configure New Sender">
New Sender?</button>
<div id="mailerSenders1">
<g:render template="/mailingListModal/modalcreate" model="[title:'Add Senders Email', controller: 'mailingListSenders', callPage: 'form' , divId: 'mailerSenders', id: 'SENDERS' ]" />
</div>
And finally modelForm which is included on the top of the modalcreate.gsp (now shown)
<div class="modal fade" id="BuildModal${id}" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<g:if test="${flash.message}">
<div class="message" role="status">${flash.message}</div>
</g:if>
<g:formRemote id="${controller}" name="urlParams" class="form-horizontal" url="[controller:controller, action:'save']"
update="BuildModal${id}" onComplete="${controller}CloseModal()"
>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">x</button>
<h3>${title }</h3>
</div>
<div class="modal-body">
<div class="form-group">
<g:render template="/${controller }/${callPage }"/>
<g:submitToRemote class="myformsubmit" url="[controller:controller, action:'save']" update="BuildModal${id}" onComplete="${controller}CloseModal()" value="Create" />
</div>
</div>
</g:formRemote>
</div>
</div>
</div>
</div>
So it is a remote Form that submits can calls the above CloseModal
The question is when I Close this how do I make it available again when the user clicks the button to create new email ?
After adding all the cloning at the top of java script the only difference I was able to make was to make it display the backdrop on 2nd click so it went black on 2nd click but did not show up the modal content.
ok got it working by doing this:
<button href="#BuildModalSENDERS" class="btn btn-block btn-success" role="button" data-toggle="modal" title="Configure New Sender"
Now adding
onClick="runCheck()"> .....
<g:javascript>
function runCheck() {
$('#mailerSenders1').show();
}
</g:javascript>
That seems to work fine, it now loads up the page, just to add when I did body it just loaded it up again from the commented out attempts, modal.hide etc did not work and the hide attempts just showed it up under some other layers of the same page.. anyways this works fine now. sorry