I'm using the jquery plugin masked input, and when the placeholder of the plugin is active, I want it to change the colour and didn't take the input color. Is there anyway to do it easily?
This is my jquery code:
$.mask.definitions['A'] = "[A-Z]";
$(".accountnumber").mask("AA99 | 9999 | 9999 | 9999 | 9999 | 9999", { placeholder: "ES00 | 0000 | 0000 | 0000 | 0000 | 0000" });
Thank you very much.
I am using MyApp.updateHashLabel on using browser location hash to enable back/forward events which works with only one issue - it doesn't pass value. This is my html code and one of the buttons (fourth) has got onClick MyApp.updateApp with extra value which I want to pass when I click on a back button from another screen/state. So when I am clicking on second button after fourth and go back it shows my a correct screen but doesn't display the value = 6. Is there any way to put it in sessionStorage for this action? Or there may be a different solution...
<div class="button-bar">
<button onclick="MyApp.updateApp(1, true);" type="button">ONE</button>
<button onclick="MyApp.updateApp(2, true);" type="button">TWO</button>
<button onclick="MyApp.updateApp(3, true);" type="button">THREE</button>
<button onclick="MyApp.updateApp(4, true, 6);" type="button">FOUR</button>
</div>
<div id="hash-label">#</div>
<div id="value-label"></div>
<div id="image-placeholder"></div>
This is my jQuery code:
MyApp.updateApp = function (hashValue, allowAppToUpdateHash, valueID) {
var index = parseInt(hashValue, 10);
var imageNode = document.getElementById('image-placeholder');
var id = parseInt(valueID, 10);
}
And the function of a value usage is:
window.article = function (id) {
$("#value-label").html(id);
}
Please see my whole code on jsfiddle here: http://ift.tt/1eNgTJj
Really appreciate your help.
I have two text boxes which are created dynamically .How to make them align correct position. I mean i have
PhoneNo:123646
1234455
Now i have to get a output as
PhoneNo:123646
1234455
Is it possible to do like that.Those Phone numbers in textboxes are dynamically created at the output.
This question already has an answer here:
How do I set my website zoom level to a desired percentage (Such as 90%)? And it should be cross-browser support.
I have been struggling with jQuery (I am new to it) I want to create an invoice page.
Page will have the following row of Text fields:
Quantity, Description, Net. Price, VAT price, Total Price.
When user starts filling in the Quantity, Description and when starts typing in Net. Price jQuery needs to add another row of empty text fields below.
--If user skips and fills in the VAT price without filling in the Net. price first jQuery needs to add another row below the existing one.
-- and If user skips Net price and VAT price and start filling Total price jQuery needs to add another row below the existing one.
Then comes the calculation:
when user fills in the Net. Price jQuery should automatically fill in the VAT price and also Total Price (which is Quantity + VAT Price)
When user fills in the VAT Price (skipping Net. Price) jQuery should automatically fill in the Net. Price and also Total Price (which is Quantity + VAT Price)
When user fills in the Total price (skipping Net. and VAT Price) jQuery should deduct it with Quantity and fill in the Net. Price and VAT price.
do you guys think you could help me?
I have this HTML code:
<div id='Invoice' class="row">
<div class='InvoiceLine row'>
<div class="ItemFields col-md-1"><input type="text" class="form-control" name="Quantity" id="Quantity"></div>
<div class="ItemFields col-md-2"><input type="text" class="form-control" name="Description"></div>
<div class="ItemFields col-md-1"><input type="text" class="form-control" name="NetPrice" id="NetPrice"></div>
<div class="ItemFields col-md-1"><input type="text" class="form-control" name="VATPrice" id="VATPrice"></div>
<div class="ItemFields col-md-1"><input type="text" class="form-control" name="TotalPrice" id="TotalPrice"></div>
</div>
</div>
And I was working on this jQuery code to automatically add row of empty text fields
I managed to get it working. Just missing a small part.
I know I am killing the code but I will make it nicer, with functions and staff.
$('#Invoice').on("keyup", ".ItemFields", function() {
var LineNumber = parseInt( $(this).closest('#Invoice').children().last().attr('id') ) + 1
var InvoiceLine = '<div class="ItemFields col-md-1"><input type="text" class="form-control" name="Quantity_'+LineNumber+'" id="Quantity"></div><div class="ItemFields col-md-2"><input type="text" class="form-control" name="Description_'+LineNumber+'"></div><div class="ItemFields col-md-1"><input type="text" class="form-control" name="NetPrice_'+LineNumber+'" id="NetPrice"></div><div class="ItemFields col-md-1"><input type="text" class="form-control" name="VATPrice_'+LineNumber+'" id="VATPrice"></div><div class="ItemFields col-md-1"><input type="text" class="form-control" name="TotalPrice_'+LineNumber+'" id="TotalPrice"></div>';
if ( ($(this).closest('.InvoiceLine').find('#NetPrice').val() != "" || $(this).closest('.InvoiceLine').find('#VATPrice').val() != "" ) && $(this).closest('.InvoiceLine').attr('id') == $(this).closest('#Invoice').children().last().attr('id') ) {
$('#Invoice .InvoiceLine').last().after('<div id="'+LineNumber+'" class="InvoiceLine row">'+InvoiceLine+'</div>')
};
$(this).closest('.InvoiceLine').find('#VATPrice').val( ( 0.21 * parseInt($(this).closest('.InvoiceLine').find('#NetPrice').val()) ) + parseInt($(this).closest('.InvoiceLine').find('#NetPrice').val()) );
$(this).closest('.InvoiceLine').find('#TotalPrice').val( parseInt($(this).closest('.InvoiceLine').find('#Quantity').val()) * parseInt($(this).closest('.InvoiceLine').find('#VATPrice').val()));
});
I have a java application that talks via websocket with my javascript webinterface. The webinterface consists of basic form elements such as inputs, radio buttons, a jquery slider and so on. The form fields are monitored by the jQuery .on(change)-Function. If a form field changes by user input the on-change-function triggers the websocket-transmission of the changed-data.
Now there is following problem: If a user in a second instance triggers a change the Java-Server will broadcast the information to every client. Now I want that the form element gets refreshed by changing it's value. But this is impossible because the change will trigger the onchange-event again.
So it will be an endless loop. How to solve that? Is there any way to bypass the .on(change)-Function or do I have to change my design (If yes, how to change?)
i have applied select2 on some select box, but i want to open these only on left click, not on right or middle click.
jQuery(".dropdown").select2({placeholder: "some text"});
I tried many things but nothing seems to work. please help.
I'm using Datatable to display data and charge a table using an AJAX call to a file stored in a JSON object.
I need that one of columns be a text with a link that opens a modal window.
"columns": [
{ 'data': 'BATCH'},
{ 'data': 'DATE'},
{ 'data': 'STARTTIME'},
{ 'data': 'FINISHTIME'},
{ 'data': 'STATUS'},
]
For example, colum Batch is loaded from JSON file, and I want to be a link that opens a modal window.
Please, where do I write the link, in the JSON, when to load the DataTable, or with the API DataTable?
Thank you.
Regards,
In backbone I can use my models in different ways.
As I understand, a (Data) model is used to store data (possibly served from a RESTful web server) and a ViewModel is used to store information about a specific view (The views hidden/shown state for example).
Most of my knowledge is from this SO question.
After reading this article where the author says:
Render UI Upon Data Change, Not User Interaction
and
The flow is : User interaction -> data change -> view render.
For instance, if we are writing a play/pause toggle button in an audio player, the flow would be:
- The user hits ‘play’
- The model (data) state changes to ‘playing’
- The view renders in ‘playing’ mode
Following this pattern ensures that changes to the state triggered from other sources (such as fast forward, new playlist, network error, etc.) will toggle our button to do the right thing. In other words, we have a single source of truth: whenever our model changes we know we should render our button.
var PlayPauseButton = Backbone.View.extend({
tagName: 'li',
className: 'icon',
initialize: function(){
this.model.on('change:status', this.render, this);
},
render: function(){
this.$el.removeClass('icon-play').removeClass('icon-pause');
this.$el.addClass('icon-' + (this.isPlaying() ? 'pause' : 'play'));
},
events: {
'click': function(){
this.model.set('status', this.isPlaying() ? 'paused' : 'playing');
}
},
isPlaying: function(){
return this.model.get('status') === 'playing';
}
});
I started to wonder the advantages and disadvantages of using each one.
Assuming we only have one model per view (I know we could have more, but if we limit it to one). I can think of,
ViewModel pros:
cons:
(Data) Model pros:
cons:
Am I correct in thinking this?
Should I have a model for my data and a model for my view?
How does this work with collections?
I know Backbone is very loose and there are no hard and fast rules. But, does anybody have any real world experience of using one or the other? Or possibly both?
Any help is appreciated.
I have a little slider im working on which is almost there im jsut having some trouble with me jQuery.
So first off: I want my slider to reset after the interval has run x amount of times. It was my understanding that the following would work but it doesn't seem to take. 6000, slides, function() { homesliderend();
so lets say slides = 2 set interval should call homesliderend(); but it doesn't the interval just keeps running.
Second Issue: I'm also trying to get it to add 100% to lengther every 6 seconds. But instead of adding 100 each time its just setting it to 100 its not multiplying.
jQuery(document).ready(function($) {
"use strict";
function homesliderend() {
$(".lengther").animate({
left: "0%"
}, 500);
}
function homeslider() {
var slides = $(".slide.t-align").length,
lwidth = slides * 100,
n = 0;
$(".lengther").css("width", lwidth + "%");
setInterval(function() {
var tn = n + 100;
$(".lengther").animate({
left: "-" + tn + "%"
}, 500);
}, 6000, slides, function() {
homesliderend();
});
}
homeslider();
});
I am writing a directive in AngularJs and I want to pass ng-model as an argument.
<div class="col-md-7"><time-picker></time-picker></div>
The directive is:
app.directive('timePicker', function () {
return {
restrict: 'E',
replace: true,
template: '<input type="text" class="form-control time-picker" ng-model="emp.signin">',
link: function ($scope, element, form) {
$(element).timepicker({'timeFormat': 'H:i:s'});
}
}
})
It is working fine, and here the ng-model is emp.signin. I want to be able to pass this ng-model dynamically as argument
How is this possible?
I have an accordion that works and only one image at a time can be open. The arrow starts with down but if you click it, the icon changes to up. I tried to make it with images because I don't like the possible icons. The thing is my JavaScript worked for icons but, after trying, I don't get how to use it with images. I tried two images of mine that showed up. flip-up and flip-down.
My jQuery
jQuery(document).ready(function () {
$(".flip").click(function () {
$(".panel").not($(this).next(".panel").slideToggle("slow")).slideUp("slow");
if($("i",this).hasClass('fa-chevron-circle-down')){
$(".fa-chevron-circle-up").removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down");
$("i",this).removeClass("fa-chevron-circle-down").addClass("fa-chevron-circle-up");
}
else{
$("i",this).removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down");
}
});
});
and the HTML
<div class="flip shadow-box col-xs-12 col-md-12 col-sm-12 arrow-icon-geschaeftsfelder">
<i class="fa fa-chevron-circle-down"></i>
</div>
I am using jquery datatable ajax pagination. Each time when I click pagination link same ajax url is called. How can I send different offset to load records accordingly?
I need some info from people who are a lot smarter than I am.
I am creating a plugin which requires me to force an event to the top of the list so it fires first. I am using a slightly modified version of http://ift.tt/1eKJJt2
The only way it can access this info on an element is by using:
$._data($(this)[0]).events
I want to know how "future proof" this is as I know this changed already since 1.7. Are there any plans to officially support a similar thing, is using $._data a big no no?
This question already has an answer here:
I'm not entirely sure if this is possible but I am trying to use an ajax response in a javascript array in my page.
this is what I have:
var interval = 5000;
function doAjax() {
jQuery.ajax({
type: 'POST',
url: 've.php',
dataType : 'json',
success: function (data) {
//var arr = data.split('|');
jQuery('#counterint').html(data);
var res = $.parseJSON(data);
//test: simulated ajax
var testLocs = {
<<<<<<<<<<<<<< I NEED TO USE THE "data" HERE >>>>>>>>>>>>>>>>>
};
setMarkers(testLocs);
The ajax response looks like this when I outputs it on my page in the browser:
1: { info: '1. rooz', lat: 51.5033630, lng: -0.1276250 },2: { info: '1. Rooz555', lat: 51.5033567, lng: -0.1276444 },3: { info: '1. david', lat: 51.5033777, lng: -0.1276777 },4: { info: '1. sam', lat: 51.5033555, lng: -0.1276543 },
any help would be appreciated.
When I view source of the tiny-mce plugin and add the following code, next time when I click button to see HTML source code it gives me following error.
<h3><!-- [if gte mso 9]><xml>
</xml><![endif]-->
<div class="content">
All my content goes here.
</div>
Uncaught HierarchyRequestError: Failed to execute 'insertNode' on 'Range': The node to be inserted contains a 'SPAN' node, which may not be inserted here.
When i add an empty container just like this, it fixes the problem.
<p></p>
<h3><!-- [if gte mso 9]><xml>
</xml><![endif]-->
<div class="content">
All my content goes here.
</div>
JS
$(document).ready(function() {
$('.tg tr.data-list-row[name=data-list-row]').click(function() {
var currentId = $(this).closest('tr').attr('id');
$.getJSON('<%=request.getContextPath()%>/ws/booking/getpriceinput_by_id/' + currentId, function(data) {
$("#current_typetarif_id").val(data.id);
$("#inputName").val(data.libelle);
$("#inputCode").val(data.code);
$("#inputTarif").val(data.montantTarifDefaut);
});
});
});
<div class="table-responsive">
<table class="table tg" style="table-layout: fixed; width: 745px">
<colgroup>
<col style="width: 249px">
<col style="width: 249px">
<col style="width: 249px">
</colgroup>
<thead>
<tr>
<th class="tg-s6z2 bdleft">NOM</th>
<th class="tg-s6z2">CODE</th>
<th class="tg-s6z2">PRIX PAR DEFAUT</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
<tr>
<td colspan="5">
<div class="scrollit">
<table class="table tg" style="table-layout: fixed;">
<colgroup>
<col style="width: 220px">
<col style="width: 240px">
<col style="width: 240px">
</colgroup>
<c:forEach items="${type_tarif_list}" var="type_tarif" varStatus="loop">
<tr class="data-list-row" name="data-list-row" id="${type_tarif.id}" style="cursor: pointer;">
<td class="tg-s6z2 bdleft">${type_tarif.libelle}</td>
<td class="tg-s6z2">${type_tarif.code}</td>
<td class="tg-s6z2">${type_tarif.montantTarifDefaut}</td>
<td class="deleterow bdryt" id="${type_tarif.id}" name="del_button">
<div class="glyphicon glyphicon-remove" title="Supprimer"></div>
</td>
</tr>
</c:forEach>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<form class="form-horizontal" style="margin: 0 auto; width: 150px;" id="scrollit" name="thisForm">
<c:forEach items="${option_tarif_list}" var="option_tarif" varStatus="loop">
<div class="checkbox1">
<label>
<input type="checkbox" name="tarif_inclue" value="${option_tarif.libelle}" class="checkboxchk" id="option_tarif_chk_${option_tarif.id}">${option_tarif.libelle}
</label>
</div>
</c:forEach>
</form>
JSON value extracted from database
{
"id": 1,
"code": "0001",
"libelle": "TARIF PUBLIC",
"montantTarifDefaut": 10.00,
"tarifTypeList": [
{
"chambreTypeId": 1,
"tarifTypeId": 1
}
],
"tarifTypeOptionList": [
{
"typeTarifId": 1,
"tarifOptionId": 1
},
{
"typeTarifId": 1,
"tarifOptionId": 2
},
{
"typeTarifId": 1,
"tarifOptionId": 3
}
]
}
Hi.
This block of code below make a select in the table row to display values into the texts fields.
$(document).ready(function() {
$('.tg tr.data-list-row[name=data-list-row]').click(function() {
var currentId = $(this).closest('tr').attr('id');
$.getJSON('<%=request.getContextPath()%>/ws/booking/getpriceinput_by_id/' + currentId, function(data) {
$("#current_typetarif_id").val(data.id);
$("#inputName").val(data.libelle);
$("#inputCode").val(data.code);
$("#inputTarif").val(data.montantTarifDefaut);
});
});
});
On clicking on the table row, i need to display the checked values in the checkbox. According to the id selected in the rows, specific values will be checked in the checkboxes. Those values are being extracted from a database through a JSON file. I should extract it using the value (data.tarifOptionId)
I think is should be put it in a loop, so that the id value is incremented when each table row is clicked. The id of the input is #option_tarif_chk_, and it is embeded in a cforeach loop.
I have written something like this below:
$.each(data, function(i, item) {
alert(item.tarifTypeOptionList[0].tarifOptionId);
});
But it is not working. The alert returns Uncaught TypeError: Cannot read property '0' of undefined
Any help will be much appreciated.
Thank you
I am creating an overlay/modal/pop-up on my site.
When the user clicks a button the overlay appears. To close the overlay I wish for the user to be able to click anywhere on the outside area of the page (e.g the black opacity area in my example).
JSFiddle: http://ift.tt/1KM1Xqr
I have set the following:
$('.overlay-wrapper').click(function(){
$('.overlay-wrapper').css('opacity','0');
$('.overlay-wrapper').css('z-index','-100');
});
This works fine, however it is also affecting clicking inside the .overlay-content div, a child of .overlay-wrapper. I want the user to be able to click/highlight etc inside the content box and NOT trigger the click event.
How can I make this click event not apply to the inner content?
I use dhtmlx menu on my charts. (legendItemClick event). It was working well when i use highcharts 3.0.1 . Today, I upgraded to 4.1.7 but dhtmlx menu's legendMenu_<?=$id?>.showContextMenu(x,y) function does not work like old one.
When i inspect the menu element on firebug, i see display: "none". I tried to change it manually. However, Id is randomly generated.
legendMenu_<?=$id?> = new dhtmlXMenuObject();
legendMenu_<?=$id?>.renderAsContextMenu();
How can i fix?
I have 2 Iframes having the ids demo and demo1. I have a list of 5 html files (promo1,promo2,promo3,promo4,promo5) which have to be displayed in both Iframes, one after the other, repeatedly. Each html page has a different time intervals for which it should be displayed in the frame
Here is my JavaScript code in which the dict represents each html and the time for which it should be displayed.
the following code makes the browser crash and fill up the memory. i know its because of the reccurrsion. please help me
;(function($){
"use strict";
var index=1,
dict={"promo1":70000,"promo2":46500,"promo3":18000,"promo4":93000,"promo5":86000},
var $firstFrame = $("#demo"),
$secondFrame = $("#demo1");
$(function (){
function demo(frameId,index){
frameId.attr("src","static/promo" + index + ".html");
frameId.load(function(){
if(a){
a.clearTimeout();
}
if(index < 5){
a = setTimeout(demo(frameId , index + 1),dict["promo"+index]);
}
else if(index = 5){
var a = setTimeout(demo(frameId , 1),dict["promo"+index]);
}
});
index += 1;
if(index > 5){
index = 1;
}
}
demo($firstFrame , 1);
});
}(window.jQuery));