Develop Reference

How to Display Recent message in MessageBox?

I'm using jquery and javascript to display messages, in backend I'm reversing list of messages but it displaying first message but I need recent sent and received message.
function scrollToLatestChatMessage(chatContainer) {
console.log("Entry::scrollToLatestChatMessage in chat.js "+chatContainer);
$(".msg_container_base").animate({
scrollTop : $('.msg_container_base')[0].scrollHeight
});
console.log("Entry::scrollToLatestChatMessage in chat.js ");
}
var str = '<div class="popup-box chat-popup chat-window" id="channel-'
+ channelId
+ '">'
+ ' <div class="col-xs-12 col-md-12">'
+ ' <div class="panel panel-default">'
+ ' <div class="top-bar">'
+ ' <div class="col-md-9 col-xs-9">'
+ '<img src="'
+ imageName
+ '" class="img-chat-box img-thumbnail" >'
+ '<span>'
+ name
+ '</span>'
+ '</div><div class="col-md-3 col-xs-3" style="text-align: right;">'
+ '<span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span>'
+ ' <a href="javascript:close_popup(\''
+ channelId
+ '\')"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>'
+ ' </div></div>'
+ '<div class="panel-body msg_container_base">'
+ '<input type="hidden" name="friendId" id="friendId" value="'
+ toUserId
+ '"/>'
+ '<input type="hidden" name="channelId" id="channelId" value="'
+ channelId
+ '"/>'
+ '<input type="hidden" name="chatType" id="chatType" value="'
+ chatType
+ '"/>'
+ '</div>'
+ '<div class="panel-chat-footer">'
+ '<div class="input-group">'
+ '<input id="txtSendMessage" type="text"'
+ 'class="chat-text-box input-sm chat_input"'
+ ' placeholder="Write your message here..." required="required" /> <span'
+ ' class="input-group-btn">'
+ '<button class="btn btn-primary btn-sm" id="sentMessageBtn">Send</button>'
+ '</span>' + '</div>' + '</div>' + '</div>';
html = $.parseHTML(str), $("body").append(html);
Its displaying first message but I need recent message which is sent or received.chat image displaying first message.

try to use the latest method
function scrollToLatestChatMessage(chatContainer) {
console.log("Entry::scrollToLatestChatMessage in chat.js "+chatContainer);
$(".msg_container_base").animate({
scrollTop : $('.msg_container_base').prop("scrollHeight")
},1000);
console.log("Entry::scrollToLatestChatMessage in chat.js ");
}

JS append function breaks form field iteration

I have a conditional function (addAtn) that appends an extra field to a dynamic form if required. The main form is built once the number of items is selected.
All the elements of the function are tested and work, but when I try to call it from the ticketQuantity function it breaks, and only ever returns 1 ticketDetail row, without the extra append.
The addAtn function is
$.get('/sellers/' + venueId + '/atn', function(data) {
if (data['field']=="atn") {
function addAtn() {
ticketDetails.append(
'<div data-row="' + i + '" class="ticket-row form-group row">' +
'<div class="col-md-4 col-sm-6 col-xs-6">' +
'<label class="control-label text-muted">UTN (unique ticket number)</label>' +
'<input type="text" class="form-control utn" placeholder="" name="ticket[' + i + '][utn]">' +
'</div>' +
'</div>'
);
};
}
else {
function addAtn() {};
}
});
The ticketQuantity function on select is
$('#ticketQuantity').on('change', function () {
var ticketQuantity = $('#ticketQuantity').val();
var ticketDetails = $('#ticketDetails');
var previewTicketBtn = $('#previewTicketBtn');
ticketDetails.html('<p>For general admission tickets enter "GA" in Seat Number box.</p>');
if (ticketQuantity == 1) {
$('#split-tickets').hide();
} else {
$('#split-tickets').show();
}
$('#ticket-rows').html('');
for (var i = 1; i <= ticketQuantity; i++) {
ticketDetails.append('<hr><p class="ticket-details" style="margin-top: 30px;"><strong>Ticket ' + i + '</strong></p>' +
'<div data-row="' + i + '" class="ticket-row form-group row">' +
'<div class="col-md-2 col-sm-6 col-xs-6">' +
'<label class="control-label text-muted">Seat number</label>' +
'?' +
'<input type="text" class="form-control seatNumber" placeholder="" name="ticket[' + i + '][seat_number]">' +
'</div>' +
'<div class="col-md-2 col-sm-6 col-xs-6">' +
'<label class="control-label text-muted">Ticket face value</label>' +
'<div class="input-group">' +
'<span class="input-group-addon">£</span>' +
'<input type="text" class="form-control ticketFaceValue" name="ticket[' + i + '][ticket_face_value]">' +
'</div>' +
'</div>' +
'<div class="col-md-2 col-sm-6 col-xs-6">' +
'<label class="control-label text-muted">Asking price</label>' +
'<div class="input-group">' +
'<span class="input-group-addon">£</span>' +
'<input type="text" class="askingPrice last-ticket-input form-control" name="ticket[' + i + '][asking_price]">' +
'</div>' +
'</div>' +
'</div>' +
'<div data-row="' + i + '" class="ticket-row form-group row">' +
'<div class="col-md-6" col-sm-12 col-xs-12>' +
'<label class="control-label text-muted">Restrictions</label>' +
'<input type="text" class="form-control restrictions" placeholder="Please enter any restrictions here, for example Child or ID required" name="ticket[' + i + '][restrictions]">' +
'</div>' +
'</div>');
addAtn();
});
Can anyone help. I can't work out what I'm doing wrong.
Thanks.

How to create dynamic radio button using javascript

Hi my task is to dynamically add fields to a form when I click on a link.
I was successfull for text field, as well as file type, but not when I try to do this for inputs of type radio button.
Suppose I have created two rows and in one row I select gender, e.g. male, and in second row I want to select female then it will disappear the value of radio button from the first row. So I want to select different radio button values for different multiple rows.
Here is my code:
var counter = 0;
$(function(){
$('p#add_field').click(function(){
counter += 1;
$('#container').append(
'</br><strong>Item ' + counter + '</strong><br />'
+ '<input id="field_' + counter + '" name="item[]' + '" type="text" />'
+'<strong>quantity ' + counter + '</strong>'
+'<input class="qty" id="quantity' + counter + '" name="quantity[]' + '" type="text" />'
+'<strong>rate ' + counter + '</strong>'
+'<input id="rate' + counter + '" name="rate[]' + '" type="text" />'
+'<strong>Amount ' + counter + '</strong>'
+'<input id="field_' + counter + '" name="amount[]' + '" type="text" />'
+'<strong>img ' + counter + '</strong>'
+'<input id="field_' + counter + '" name="image[]' + '" type="file" />'
+'<strong>Gender ' + counter + '</strong>'
+'<input id="male_' + counter + '" name="gender[]' + '" type="radio" value="male"/>Male'
+'<input id="female_' + counter + '" name="gender[]' + '" type="radio" value="female"/>female'
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="custom.js"></script>
<h1>Add your Hobbies</h1>
<form method="post" action="save.php" enctype="multipart/form-data">
<div id="container">
<p id="add_field"><span>Add Field</span></p>
</div>
<input type="submit" name="submit_val" value="Submit" />
</form>
Please let me know where I am wrong.

Only one radio button can be selected from a list of radio button which have the same name. i.e why you are not able to select radio button for each row. To solve this, make use of counter to give separate names to each row that you add, like
'<input id="male_' + counter + '" name="gender' + counter + '[]" type="radio" value="male"/>Male'
var counter = 0;
$(function(){
$('p#add_field').click(function(){
counter += 1;
$('#container').append(
'</br><strong>Item ' + counter + '</strong><br />'
+ '<input id="field_' + counter + '" name="item[]' + '" type="text" />'
+'<strong>quantity ' + counter + '</strong>'
+'<input class="qty" id="quantity' + counter + '" name="quantity[]' + '" type="text" />'
+'<strong>rate ' + counter + '</strong>'
+'<input id="rate' + counter + '" name="rate[]' + '" type="text" />'
+'<strong>Amount ' + counter + '</strong>'
+'<input id="field_' + counter + '" name="amount[]' + '" type="text" />'
+'<strong>img ' + counter + '</strong>'
+'<input id="field_' + counter + '" name="image[]' + '" type="file" />'
+'<strong>Gender ' + counter + '</strong>'
+'<input id="male_' + counter + '" name="gender' + counter + '[]" type="radio" value="male"/>Male'
+'<input id="female_' + counter + '" name="gender' + counter + '[]" type="radio" value="female"/>female'
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Add your Hobbies</h1>
<form method="post" action="save.php" enctype="multipart/form-data">
<div id="container">
<p id="add_field"><span>Add Field</span></p>
</div>
<input type="submit" name="submit_val" value="Submit" />
</form>
</body>
</html>

When you add more radio button your all radio button name is same, that's why you was select only one radio button.
So, Change your radio button like this :
+'<input id="male_' + counter + '" name="gender_'+counter+'[]" type="radio" value="male"/>Male'
+'<input id="female_' + counter + '" name="gender_'+counter+'[]" type="radio" value="female"/>female'

How to Call Child controller function from Directive

I have a directive like. In directive Template i mentioned ng-controller='LoginController'. In login Controller i have a function 'Initalize Function this function needs to be called every time popup opens How can i call this function from directive???
var app = window.app;
app.directive('loginpop', function () {
return {
template: '<div id="loginPopup" class="modal fade loginPopup" ng-controller="LoginController">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" id="close" class="close" ng-click="closeFun()" data-dismiss="modal" aria-hidden="true"><img src="images/closeBtn.png" alt=""></button>' +
'<h2>Log In</h2>' +
'</div>' +
'<div class="modal-inner">' +
'<form class="form-horizontal Loginform" >' +
'<div class="control-group">' +
'<div id="loginErrormessage" ng-bind="loginErrormessage" ng-class="{loginErrorhidden:loginErrorStatus}" ></div>' +
'<div class="controls">' +
'<input type="text" id="inputTxt" name="username" placeholder="Enter your user name" ng-model="credentials.username" />' +
'</div>' +
'</div>' +
' <div class="control-group">' +
' <div class="controls">' +
' <input type="password" id="inputPassword" name="password" placeholder="Enter your Password" ng-model="credentials.password" />' +
' </div>' +
' </div>' +
' <div class="control-group">' +
' <div class="controls check-forget">' +
' <div class="checkbox">' +
' <input type="checkbox" id="checkbox" ng-model="rememberMe" />' +
' <label for="checkbox">Remember me</label>' +
' </div>' +
' <label class="forget">' +
' <a>Forget your password?</a>' +
' </label>' +
' </div>' +
' </div>' +
' <div class="control-group">' +
' <div class="controls">' +
' <button type="submit" class="btn yellowBtn" ng-click="login(credentials)" >log in</button>' +
' </div>' +
' </div>' +
' </form>' +
' <div class="join-content-wrap">' +
' <div class="social-wrap row">' +
' <div class="col-md-6 col-sm-6">' +
' <p>Or log in with:</p>' +
' <a href="javascript:;" class="fb-join" ng-click="facebookLogin()" >Facebook</a>' +
' <a href="javascript:;" class="twitter-join" >twitter</a>' +
' </div>' +
' <div class="col-md-6 col-sm-6">' +
' <p>Not a member yet?</p>' +
' <a ng-click="redirectTosignuppage()" class="join-now-wrap" >join now</a>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
'</div>',
restrict: 'E',
transclude: true,
replace:true,
scope:true,
link: function postLink(scope, element, attrs) {
scope.$watch(attrs.visible, function(value){
if(value == true){
$(element).modal('show');
}
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
}
};
});

Define controller as:
myApp.directive('helloWorld', function ($timeout) {
return {
/*
.
.
.
*/
controller: <controller>
/*
.
.
.
*/
};
}
Look this example:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.text = "Any text";
}
function ChildCtrl($scope) {
$scope.init = function () {
$scope.demo = "This is a demo";
};
}
myApp.directive('helloWorld', function ($timeout) {
return {
restrict: 'E',
replace: true,
template: '<span ng-init="init()">Loading... {{demo}}</span>',
controller: ChildCtrl
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
{{text}}
<br/>
<hello-world/>
</div>

Javascript syntax error: TypeError: 'undefined' is not a constructor

i recieve this error when i launching my javascript below:
if(isPartOfIndex(new Array[25,20], indexClaimTypeRow) ){
//display size
listItem = '<li id="soze" data-theme="c"><h3>Size:</h3>' +
'<div data-role="fieldcontain" data-theme="c">' +
'<fieldset data-role="controlgroup" data-type="horizontal" id="recieptVat">' +
'<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1.0" />' +
'<label for="radio-choice-1">1.0</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-2" value="1.4" />' +
'<label for="radio-choice-2">1.4</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-3" value="2.0" />' +
'<label for="radio-choice-3">2.0</label>' +
'</fieldset>' +
'</div>' +
'</li>';
$('#itemFieldslist').append(listItem);
$('#itemFieldslist').listview('refresh');
}
The error message displayed is:
TypeError: 'undefined' is not a constructor (evaluating 'new
Array[25,20]')
here is the isPartOfindex which expects an array as the first parameter
function isPartOfIndex(indexRow, indexType){
for(var i = 0; i < indexRow.length; i++){
if(indexRow[i] == indexType){
return true;
}
}
return false;
}
What am i doing wrong?
Thanks

Should be new Array(25, 20) or just [25, 20]

you need to change your code to:
if(isPartOfIndex(new Array(25,20), indexClaimTypeRow) ){
//display size
listItem = '<li id="soze" data-theme="c"><h3>Size:</h3>' +
'<div data-role="fieldcontain" data-theme="c">' +
'<fieldset data-role="controlgroup" data-type="horizontal" id="recieptVat">' +
'<input type="radio" name="radio-choice-1" id="radio-choice-1" value="1.0" />' +
'<label for="radio-choice-1">1.0</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-2" value="1.4" />' +
'<label for="radio-choice-2">1.4</label>' +
'<input type="radio" name="radio-choice-1" id="radio-choice-3" value="2.0" />' +
'<label for="radio-choice-3">2.0</label>' +
'</fieldset>' +
'</div>' +
'</li>';
$('#itemFieldslist').append(listItem);
$('#itemFieldslist').listview('refresh');
}
new Array[25,20] is not proper declaration for your array.

Just need [20, 25] instead of new Array[20, 25]. You also can use new Array(20, 25)