We Keep Coding

JS is working in console but doesn't work in code

I have this button which calls modal window with simple form.
<aui:button-row>
<a style="float: left" onclick="ITD.robomarket.activateKeyModalWindowFunction(
'${activateKeyURL}', '<%=LanguageUtil.get(pageContext, "key-activating")%>', '400', '334')" class="btn btn-green"> </a>
</aui:button-row>
I want to close this modal window after submitting. I have already done this:
function closeModal () {
var id = 'robomarket-activate-key-modal-window'
var dialog = Liferay.Util.Window.getById(id);
dialog.destroy();
}
And this function I call in .jsp:
<script>
$(document).ready(function() {
closeModal();
});
</script>
The problem is this doesn't work BUT that modal window closes when I write this lines in console! What's the problem?

You have to call closeModal from the JSP where the modal was opened.
For exemple A.jsp has a link that open B.jsp in a modal dialog, then you want to close B.jsp when form is submitted
Here is a possible implementation :
In A.jsp :
<portlet:renderURL var="popupUrl" windowState="<%=LiferayWindowState.POP_UP.toString()%>">
<portlet:param name="mvcPath" value="/B.jsp"/>
</portlet:renderURL>
<aui:button href="${popupUrl}" useDialog="true" value="Open in popup" />
and at the bottom of A.jsp :
<aui:script>
Liferay.provide(window, 'closePopup', function(dialogId) {
var A = AUI();
var dialogId = A.one('div.dialog-iframe-modal').get("id");
var dialog = Liferay.Util.Window.getById(dialogId);
dialog.destroy();
});
</aui:script>
Then in B.jsp
You have to say to the opener to close the dialog, here is a possible implementation :
<portlet:actionURL name="/submitForm" var="submitFormURL">
<portlet:param name="action" value="submitForm" />
</portlet:actionURL>
<aui:form action="<%= submitFormURL %>" method="post" name="fm" onSubmit='<%= "event.preventDefault(); " + renderResponse.getNamespace() + "submitForm();" %>'>
...the form
<aui:button name="submitForm" type="submit"/>
</aui:form>
And at the bottom of the B.jsp page :
<script>
function <portlet:namespace/>submitForm(){
AUI().use('aui-io-request', function(A) {
var url = '<%=submitFormURL.toString()%>';
A.io.request(
url,
{
method: 'POST',
form: {id: '<portlet:namespace/>fm'},
on: {
success: function() {
Liferay.Util.getOpener().closePopup('dialog');
}
}
}
);
});
}
</script>
Hope it helps
Regards
Arnaud

You are calling closeModal () method just after de DOM is ready. Wich mean you are asking to close even before the popUp is opened.
It is not clear what you do in your popUp. If is a partial submit, say an ajax call or similar, you need to call closeModal after you have got a response and treated the returned data.
Otherwise, if you are submiting a full submit, (a full reaload, navigation to a new page, you go through a whole new render phase) the modal window will dissapear with everi thing else in the currently renderes page.

JQuery loading issue on submission

On my website. Im having trouble with JQuery. Im not an expert here so please understand.
Here it is the script that I'm using its working actually but, once you click the submit btn..even you have an incomplete info in the form the loader still show processing. Even the my board says: please complete your..., still the loading gif is running.
The Script:
<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).on( "click", ".show-page-loading-msg", function() {
var $this = $( this ),
theme = $this.jqmData( "theme" ) || $.mobile.loader.prototype.options.theme,
msgText = $this.jqmData( "msgtext" ) || $.mobile.loader.prototype.options.text,
textVisible = $this.jqmData( "textvisible" ) || $.mobile.loader.prototype.options.textVisible,
textonly = !!$this.jqmData( "textonly" );
html = $this.jqmData( "html" ) || "";
$.mobile.loading( 'show', {
text: msgText,
textVisible: textVisible,
theme: theme,
textonly: textonly,
html: html
});
})
.on( "click", ".hide-page-loading-msg", function() {
$.mobile.loading( "hide" );
});
</script>
My php code: (This is not complete i just want to share the end part)
<div class="form-group">
<div class="col-md-5 col-sm-8 col-xs-8">
<?if (Core::config('general.recaptcha_active')):?>
<?=Captcha::recaptcha_display()?>
<div id="recaptcha3"></div>
<?else:?>
<?= FORM::label('captcha', _e('Captcha'), array('for'=>'captcha'))?>
<span id="helpBlock" class="help-block"><?=captcha::image_tag('publish_new')?></span>
<?= FORM::input('captcha', "", array('class' => 'form-control', 'id' => 'captcha', 'required', 'data-error' => __('Captcha is not correct')))?>
<?endif?>
</div>
</div>
<?endif?>
<div class="control-group">
<div class="controls">
<?= FORM::button('submit', __('<i class="glyphicon glyphicon-send"></i> Publish New Ad'), array('type'=>'submit', 'data-corners'=>'false', 'class'=>'pub-new show-page-loading-msg', 'data-theme'=>'b', 'data-textonly'=>'false', 'data-msgtext'=>'Processing....', 'data-textvisible'=>'true', 'action'=>Route::url('post_new',array('controller'=>'new','action'=>'index'))))>
</div>
</div>
</fieldset>
<?= FORM::close()?>
To know more Please you can go here, but you need to use mobile to see : https://linkinads.com/publish-new.html or here in youtube for video : https://www.youtube.com/watch?v=dKzabE2eJN0

though I dont know the real issued here but after i move this, things are fixed
'data-ajax'=>'false'
solve my issue.

Your button is a submit button. These button fire an event to process the form natively in HTML.
In your Javascript, instead of binding your code to the click event for the class of the button, you should instead bind it to the submit event of the form (which is tied to the button and the form as a whole) and then block the default submit action. Something like the below.
$('#publish-new').submit(function(event) {
event.preventDefault(); //Prevents the default form event from firing
//Rest of your code can go here
});

Bootstrap modal won't close on click

I am very new to web dev. Still not too familiar with JavaScript. I am making an error message using that will load using code one of our dev guys created for a different page. I created modals that show on a click event and then close on a click event. For this one I am having the modal show based on returned URL parameters. And I am using code I copied from another page one of our dev guys made (not with Bootstrap modals).
The code below makes the modal show, but the buttons used to close the modal don't work. Not sure why.
This is the tag that will append the URL when returned:
(**...?companyName=ACME47 & err1=0 & err2=0 & err3=1**)
When the error values are 1 is loads the page to show the error modal with the text for that error in it.
Here is the code I'm using for the form (not attaching the style sheet, so it looks different).
jQuery(document).ready(function() {
// jQuery code snippet to get the dynamic variables stored in the url as parameters and store them as JavaScript variables ready for use with your scripts
$.urlParam = function(name) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (results == null) {
return null;
} else {
return results[1] || 0;
}
}
// Get url parameters
var err1 = new Number($.urlParam('err1'));
if (isNaN(err1)) {
err1 = new Number(0);
}
var err2 = new Number($.urlParam('err2'));
if (isNaN(err2)) {
err2 = new Number(0);
}
var err3 = new Number($.urlParam('err3'));
if (isNaN(err3)) {
err3 = new Number(0);
}
console.log('err1: ' + err1); // Writes a message to the browser console [f12]
console.log('err2: ' + err2); // Writes a message to the browser console [f12]
console.log('err3: ' + err3); // Writes a message to the browser console [f12]
console.log('CompanyName: ' + $.urlParam('companyName')); // Writes a message to the browser console [f12]
// Display error message function
// Read a page's GET URL variables and return them as an associative array.
if (err1 > 0) {
$("#error-box").show();
$("#error-1").show();
};
if (err2 > 0) {
$("#error-box").show();
$("#error-2").show();
};
if (err3 > 0) {
$("#error-box").show();
$("#error-3").show();
};
});
<div class="modal" id="error-box" style="display: none;" tabindex="-1" role="dialog" aria-labelledby="error-boxLabel">
<div class="modal-dialog" role="document" style="height:200px;">
<div class="modal-content" style="height: 100%;">
<div class="modal-header alert-danger">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
</button>
<h4 class="modal-title text-danger">Form Submission Error</h4>
</div>
<div class="modal-body alert-danger" style="height: 100%;">
<div class="textWrapper">
<ul>
<li id="error-1" style="display: none;">That email address is already in use. (01)</li>
<li id="error-2" style="display: none;">A company with that name already has an account in this system. (02)</li>
<li id="error-3" style="display: none;">An unknown error has occurred. If your E-Mail or Phone Number was correctly filled in, you will be contacted shortly. (03)</li>
</ul>
</div>
</div>
<div class="modal-footer modal-footer-text">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

You shouldn't be using jQuery's show() method to show the modal. Doing so doesn't register it with Bootstrap, so there's nothing to close with elements possessing the data-dismiss attribute. Use Bootstrap's method:
$("#error-box").modal('show');
Note that you may also need to use Bootstrap's show.bs.modal callback to show your error containers. It's possible that they won't be available to jQuery until the modal is initiated.

This is what I think you want see fiddle https://jsfiddle.net/sxh0n7d1/53/
Note: I set all the errors to visible in the fiddle, so that there is something to see how it works.
add this to your javascript
$('.close, .btn-danger').click(function() {
$( "#error-box" ).hide();
});

Set flash message after redirect in angularjs

I am just starting with Angular js. I have a doubt in that. I want to set flash messsage after redirect.
In my case, I have a form and am saving the data through http requst. In the success function I put window.location(). It is another page. I want to set a flash message in that page.
js
$scope.Save_Details = function (id)
{
$http.post(base_url+"sur/sur/save_data/"+id,{data:$scope.Surdata}).
success(function(response) {
// $scope.successTextAlert = "Saved";
// $scope.showSuccessAlert = true;
window.location = "#/surpage/nextpage?show_message= true";
});
}
new update
var messageFlag = $location.search().show_message;
if(messageFlag && messageFlag === 'true'){
alert(messageFlag);
$scope.successTextAlert = "Saved";
$scope.showSuccessAlertMsg = true;
}
view
<div class="alert alert-success" ng-show="showSuccessAlert">
<button type="button" class="close" data-ng-click="switchBool('showSuccessAlert')">×</button> <strong> {{successTextAlert}}</strong>
</div>
Anyone help me?

Put this code in HTML -
<!-- message text -->
<div class=" panel-{{alerts.class}}" ng-show="alerts.messages" >
<div ng-repeat="alert in alerts.messages track by $index" class="panel-body alert-{{alerts.class}}" >{{alert}}</div>
</div>
Put this code in angular model -
$rootScope.alert = function(type,msg){
$rootScope.message.push(msg);
$rootScope.alerts = {
class: type,
messages:$rootScope.message
}
}
For success message -
$rootScope.alert('success',"Success !!!");
For Error message -
$rootScope.alert('danger',"Error.");

You can use toastr JS specially for flash.
http://codeseven.github.io/toastr/demo.html
By using below js code, you can display a flash message.
For success message :
toastr"success";
For Error message :
toastr"success";

EDIT - Adding code
yourAppModule.controller('nextPageController', function($location){
var messageFlag = $location.search().show_message;
if(messageFlag && messageFlag === 'true'){
//show your message
}
});
When you navigate to "nextpage" pass a flag along -> #/surpage/nextpage?show_message= true
In the "nextpage" controller, read the query string value for
"show_message" ( inject $location to your controller and get value
using $location.search().show_message)
if that value == true, show your flash message

Getting Meteor 0.9.1.1 click event to update object

I'm just playing around with different patterns and am very new to programming, however I've got everything to work in my test app so far except this. I've tried a bunch of variations with no luck, but I suspect I'm missing something really simple.
Basically what I want to happen is for a user to click a button and for it to then update the value of two specific attributes of the current object.
In this example I'm wanting the update to occur when the user clicks the "Return" button (the other buttons shown below are working fine).
Here's the HTML template for the button in question:
<template name="bookDetails">
<div class="post">
<div class="post-content">
<h3>{{title}}</h3><span> {{author}}</span>
{{#if onLoan}}
<i class="fa fa-star"></i>
On loan to: {{lender}}{{/if}}
</div>
{{#if ownBook}}
Edit
Lend
<div class="control-group">
<div class="controls">
<a class="discuss btn return" href="">Return </a>
</div>
</div>
{{/if}}
</div>
</template>
Here's the .js file which contains my Template event. Basically I want to set the values for the "lendstatus" and "lender" attributes.
Template.bookDetails.helpers({
ownBook: function() {
return this.userId == Meteor.userId();
},
onLoan: function() {
return this.lendstatus == 'true';
}
});
Template.bookLoan.events({
'click .return': function(e) {
e.preventDefault();
var currentBookId = this._id;
var bookProperties = {
lendstatus: "false",
lender: "",
}
Books.update(currentBookId, {$set: bookProperties}, function(error) {
if (error) {
// display the error to the user
throwError(error.reason);
} else {
Router.go('bookPage', {_id: currentBookId});
}
});
},
});
If I type the following into the Browser console while on the page for the object with id ZLDvXZ9esfp8yEmJu I get the correct behaviour on screen and the database updates so I know I'm close:
Books.update({ _id: "ZLDvXZ9esfp8yEmJu"}, {$set: {lendstatus: "false", lender: ""}});
What am I missing?

OK - so my problem was that I'd defined the event handler in the wrong template. I'd defined it in the bookLoan template instead of the bookDetails template. Thanks #saimeunt for pointing this out!