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));
I like the fact that $('element').data() converts values to integer, float, array etc.
If I use the dataset property I only get strings.
But the problem is that jQuery.data does not update the values if I alter the data attributes on the element.
Can I use dataset but also be able to convert the values like jQuery.data() does ?
For example data-num="5" should be integer, data-bool="false" should be boolean, data-arr="[1,2]" should be array etc.
I want to make a form with informations such as "name, type, etc.." and i want to make a 'Drag and Drop' image uploader with click fuction. SO drag and drop or click to select the images. Max is 5 images. I found some script and divs but it alway upload the file whzen you drag and drop it or choose it. I want to submit the upload with the whole form, because it is connected to a mysql database. I did't find a solution for this.
I am using the adjusting Jqgrid Column width According to Its Content suggested in this post,
Jqgrid Column width According to Its Content
This way after loadcomplete event of jqgrid.
loadComplete : function () {
$("#list").bind("jqGridAfterLoadComplete", function () {
var $this = $(this), iCol, iRow, rows, row, cm, colWidth,
$cells = $this.find(">tbody>tr>td"),
$colHeaders = $(this.grid.hDiv).find(">.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"),
colModel = $this.jqGrid("getGridParam", "colModel"),
n = $.isArray(colModel) ? colModel.length : 0,
idColHeadPrexif = "jqgh_" + this.id + "_";
$cells.wrapInner("<span class='mywrapping'></span>");
$colHeaders.wrapInner("<span class='mywrapping'></span>");
for (iCol = 0; iCol < n; iCol++) {
cm = colModel[iCol];
colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth() + 25; // 25px for sorting icons
for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
row = rows[iRow];
if ($(row).hasClass("jqgrow")) {
colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());
}
}
$this.jqGrid("setColWidth", iCol, colWidth);
}
});
}
Issue is i am getting zero for column width at this line
colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth()+25;
My column headers will have special characters this way,Though i have set autoencode : true. I am getting column width = 0. Do I need to parse these columns?
list_Code [HEAVY] [DUTY] [50]
And in the same way i am getting zero for the row outerewidth at this line,
colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());
as a result, all the time width of my rows are being 25.
Why I am not able to fetch outerwidth() in these cases for coulms and rows?
Can anyone help?
However, if i print .html(), I am getting the DIv content correctly this way,
var spans = $( "span" );
$(row.cells[iCol]).find(spans).html();
<th id="list_Code [HEAVY] [DUTY] [50]" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 65px;">
<span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;"> </span>
<div id="jqgh_list_Code [HEAVY] [DUTY] [50]" class="ui-jqgrid-sortable">
<span class="mywrapping">Code [HEAVY] [DUTY] [50]<span class="s-ico" style="display:none">
<span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr">
</span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></span></div></th>
<td role="gridcell" style="text-align:left;" title="FE" aria-describedby="list_Code [HEAVY] [DUTY] [50]"><span class="mywrapping"><div style="max-height: 100px">FEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFE</div></span></td>
Only problem is with width's..
formatter : function(v){ return '<div style="max-height: 100px">' + v + '</div>'; },
All my column names have special characters.Is thats is the reason? If so why the row/cell width is also retrived as zero.
I tried width/inner/outer nothing worked.
Can any one shed some light on this?
I'm stuck to close child rows on this script (for datatables): I cannot close the opened row child by clicking on the same td.details-control (which open and should close the row child) but the opened row child is closed after that I click on another td.details-control (so after that I open another row child).
Here is my code:
var tr;
var row;
// Opening child row
$('#table tbody').on('click', 'td.details-control', function () {
if (tr !== null && tr !== undefined && row !== null && tr !== undefined) {
row.child.hide();
tr.removeClass('shown');
}
tr = $(this).closest('tr');
row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
// Table refresh
var table = $('#table').DataTable();
setInterval( function () {
table.ajax.reload( function () {
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
if (tr.hasClass('shown')) {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
}
} );
}, 5000 );
$('table td .details-control').html('<button><i class="fa fa-plus"></i></button>');
The problem is here: (I shall work on the condition but tried 10 000 things, and still stuck)
if (tr !== null && tr !== undefined && row !== null && tr !== undefined)
{
row.child.hide();
tr.removeClass('shown');
}
Because the row.child.hide(); I am stuck in the open this row condition
As far as I can infer from the Lodash documentation, _.bind(func, thisArg, [partials]) simply returns a version of func where the scope of this is bound to whatever you pass in to thisArg. However, you then need to invoke that function seperately, ie:
var boundFunction = _.bind(aFunction, aThisTarget);
boundFunction();
Is there a way to use _.bind() or a different function in lodash in the same manner that one can use jQuery's .proxy(), in that it immediately invokes the function with the passed in scope?
I don't need/want to save the found function to a variable, as it's part of a callback. I just want to fire a function with a different scope (immediately). IE:
this.loadScripts(function() {
// do something
}, $.proxy(this, 'doSomethingElse', 'params') );
i have used Bootstrap and created form.my form Looks like
<form action="default_results.php" method="post" class="calculator" name="frmCalculator">
i have put this code begin of the code and end of the page i have used three button Looks like
<button id="button2" class="dont-compare shadow-inset" value="reset" >
Reset</button>
<button id="button3" data-toggle="pop" class="dont-compare shadow-inset" class="update" >
Update MI</button>
<button id="Button4" class="dont-compare shadow-inset" class="calculator" >
Calculate Scenarios</button>
</div>
i have another page its called default_ results.php page. i want load that page when i click Calculate Scenarios button . i used href tag that button. but that three button also load default_results page. how to set particular button? please any idea about it?
I've got some problems splitting up my jquery source code into more than one file. My real source code is a bit more complicated but the following simple example shows my problem very good. At first I would like to show you a working example with only one javascript file. Afterwards, I will describe what I tried in order to split the javascript into two files.
My html code looks like this ("./jquery" is a symbolic link to my local jquery download):
<html>
<head>
<script src="./jquery"></script>
<script src="./file1.js"></script>
</head>
<body>
<div id="content"></div>
</body>
</html>
The jquery source code in file1.js looks like this:
$(document).ready(function() {
var Test = (function() {
var content = $('#content');
var init = function() {
content.html('<p>test</p>');
};
return {
init: init
}
})();
Test.init();
});
After opening the page, "test" is displayed so that this example works as expected.
But now I want to put the whole Test part into another file file2.js. My html is basically the same but gets an additional line:
<script src="./file2.js"></script>
file1.js now contains only the call of the init function:
$(document).ready(function() {
Test.init();
});
and file2.js contains the definition of Test:
var Test = (function() {
var content = $('#content');
var init = function() {
content.html('<p>test</p>');
};
return {
init: init
}
})();
When I open the page, "test" is not displayed any more. In order to make sure that the init function is called at all, I added a console.log("test"); to the init function which is working fine. Therefore, I suppose that the function might be called before the DOM is ready, but actually I am pretty clueless. Maybe someone can give me a hint how to make that run.
Best regards and thanks in advance!
The following JQuery instruction works correctly on desktop but it's not working on mobile devices.
jQuery('.post-below-thumbnails a.post-small-pic').click(function(e) {
e.preventDefault();
var url = jQuery(this).data('image-link');
jQuery('body.single #post-main-thumbnail img').attr("src",url);
});
The Html Code is :
<div class="col-lg-12" id="post-main-thumbnail">
<img src="link to change" class="attachment-full wp-post-image">
</div>
<div class="post-below-thumbnails">
<a href="#" class="post-small-pic" data-image-link="http:www.thelink.com">
<img src="small image link" class="main-thumbnail wp-post-image wp-post-image">
</a>
</div>
Could you please help
Best regards
I have ASP.NET-MVC5 application. I have strongly typed form and I successfully can pass back to controller. Now I have JavaScript array variable that I need to also send so I need to post back both information from view to controller using .$ajax post function.
I have update code as to add avaScript array variable, since then I am getting null value for form data.
var AdditionalTenentList = {
StudentUWLID: []
};
$('#CreateStudentRentingApplicationForm').submit(function (e) {
e.preventDefault();
var AdditionalTenentJsonList = JSON.stringify(AdditionalTenentList);
alert(AdditionalTenentJsonList);
var formURL = $(this).attr("action");
$.ajax({
url: formURL,
type: "POST",
data: { ApplicationModelData: $(this).serialize(), TenentJSONList: AdditionalTenentJsonList },
}).done(function (data, textStatus, jqXHR) {
//// my other code here.....
}
</script>
In another function thats how I am pushing value to array
AdditionalTenentList.StudentUWLID.push(StudentUWLID);
[Authorize]
[HttpPost]
public ActionResult ApplyForAccommodation(AccommodationApplicationViewModel ApplicationModelData, string TenentJSONList)
{
return null;
}
with the following code I get header response as
$.ajax({
url: formURL,
type: "POST",
dataType:"JSON",
data: JSON.stringify({ TenentJSONList: AdditionalTenentList }),
}).done(function (data, textStatus, jqXHR) {
..........
public ActionResult ApplyForAccommodation(string [] TenentJSONList)
{
var a = "d";
return null;
}
i have a requirement in which when i click on a element of a list , the element gets shown as a selected option in the select box
i need to use native select box only , not to mention the elements in the list are present in the select dropdown
<button class="quick">QuickLink</button>
<div class="list">
<ul class="apps">
<li>CAPM</li>
<li>GCS</li>
<li>GRS</li>
</ul>
</div>
<select class="xyz">
<option>CAPM</option>
<option>GRS</option>
<option>BDS</option>
<option>CCAS</option>
<option>WEDAT</option>
<option>SDP</option>
</select>
jsfiddle link --> http://ift.tt/1JJS2mI
I am receiving below html from vbscript page by ajax call.
<html>
<body>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="100%" valign="top">
<div id="xyz"></div>
<input name="a1" type="hidden" value="">
<input name="a2" type="hidden" value="586546d5">
<input name="a3" type="hidden" value="13025">
<br clear="all">
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Is it possible to get value of input tag where name="a2" in ajax. // i.e we want value 586546d5 in the variable.
My problem is:
I have a page with a table is auto generated with ajax-jquery
My table is 3 <td> 1: name 2-3: checkbox for parameters
I set event on all input:checkbox ("change") event.
The problem appears when i try to get check state of checkbox different than i click.
code:
$(document).ready(function() {
$("#permessiAttributiDiv").on("change", "input:checkbox", function() {
var IDPermesso = $(this).attr("id").substring(1);
var selezionatoSpuntato = (this.checked);
var altro = $(this).parent().find("input:checkbox").checked;
var scheda = $("#selectTipo").val();
});
)};
I also try to get check state by id but i always doesn't work......
I see if the checkbox is write in html static code all works ok but if i generate it with jquery i can't access to input with any selector.....
Can anyone help me?
Thanks
I need to get the index of the element with class .active but seem unable to. Here is a fiddle demonstrating it (I've commented the line I'm interested in). If you press the pager-numbers it should display the correct index of the one marked red.
I have tried the following:
console.log($('.clickable').index('.active'));
console.log($('.pager').index('.active'));
console.log($('div.pager span.clickable').index('.active'));
console.log($('.active').index());
console.log($('.active').closest('.pager').find('.clickable').index('.active'));
console.log($('.clickable').index($('.clickable').filter('.active')));
console.log($('span.clickable').index('.active'));
console.log($('span.active').index());
console.log($('div.pager span.active').index());
This is how it appears in the HTML:
<div class="pager">
<span class="page-number clickable">...</span>
<span class="page-number clickable">2</span>
<span class="page-number clickable active">3</span>
<span class="page-number clickable">4</span>
<span class="page-number clickable">...</span>
</div>
At this moment I'm just spamming different variations I've found on google/SO.. why won't anything work?
I'm developing a banner responsive website, however I don't know the height, when the page loads the content below the banner loads first than the banner. How do I load height of banner first?
By "banner" I mean the big image in the background. My site: http://ift.tt/1M8TjFI
This is the problem: http://ift.tt/1E61BWK
html code
<figure class="hero-banner">
<img class="hero-banner__image" src="assets/img/banners/home.jpg" alt="Homem saltando entre montanhas rochosas, com um ceú azul sem nuvens" width="1920" height="700">
<figcaption class="hero-banner__description">
<div class="container">
<h2>Melhore seus resultados<br>Amplie horizontes</h2>
<h1>Sistemas de gestão empresarial</h1>
</div>
</figcaption>
</figure>
css code
.hero-banner {
&__image {
position: relative;
width: 100%;
height: auto;
margin: 0 auto;
}
&__description {
position: absolute;
top: 50px;
z-index: 1;
width: 100%;
}
}
a widget of 45 pixels width and float values from 0.0 to 3.0 , to move the arrow 1 pixel to the right on 0.1 so that it looks on the start of the widget and at 3.0 the arrow should be at the end of the widget. the widget is meter.
I am using firebug to inspect the xpath, one block of firebug shows the element your finding is in window or iframe and so on. I am facing similar kind of problem where it shows me 2 options 1: Top window 2: iframe#mainframe now the problem is,when i inspect the element it shows in iframe#mainFrame, i tried switching the driver control from main window to iframe and detect the element using webdriver but it didn't work for me,I wrote the following set of code:
driver.switchTo().frame("mainFrame");
driver.findElement(By.xpath("//div[@class='div_img']/img[@src='http://ser/themes/20/3/Flor/CF.jpg']")).click();
Note: when i checked the iframe in the html code,it doesn't contain another document inside it, It only contains id and other style and all and src tag.
Kindly suggest if there is some other way through which i can detect the element.
before implementing history.pushState my site I wonder if there is any way to change or to include data generated URLs as targets for social networks such as fb, these metatags are essential for sharing content:
<meta property="og:title" content="My website"/>
<meta property="og:image" content="http://ift.tt/1Dg70PW"/>
<meta property="og:site_name" content="Website"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/" />
My website load content via AJAX and do not really know what would be a viable solution for sharing ajax generated content in social networks.
In addition I have plugins facebook comments and likes on my website without a URL do not work, always count the likes of index.php
Another solution I think is to make a copy of each content loaded by Ajax in new HTML pages and are these that are used to share content, but do not know if this will be good. Is it bad for SEO do this? ¿Penalize me for duplicate content?You could generate a sitemap?
Can I help you could decide?
I am working on animating ui->li which is generated using ngRepeat
I a working example in jquery here :
<div class="accordion-wrapper">
<ul class="accordion-root">
<li class="accordion-key">
<div class="accordion-group-header">item 1</div>
<ul class="accordion-group">
<li class="accordion-key">
<div class="accordion-group-header">sub item 1</div>
<ul class="accordion-group">
<li>tertiary item 1</li>
<li>tertiary item 2</li>
<li>tertiary item 3</li>
<li>tertiary item 4</li>
<li>tertiary item 5</li>
<li>tertiary item 6</li>
</ul>
</li>
<li>sub item 2</li>
<li>sub item 3</li>
<li>sub item 4</li>
<li>sub item 5</li>
</ul>
</li>
<li>item 2</li>
<li>item 3</li>
</ul>
</div>
<script src="http://ift.tt/1Gufy1b"></script>
<script type="text/javascript">
$(function() {
// initialize accordion by hiding all branches
$('.accordion-wrapper .accordion-group').hide()
/* ** Work-around for <UL> and <LI> elements not having full-width hit-areas for hover and click actions **
wrap all text items inside accordion with highlight and backlight to enable full-width item selection
.highlight is placed above the text item in the DOM and .backlight is placed below the text item
.highlight accepts all hover and click actions and turns the item's .backlight ON or OFF. */
$('.accordion-wrapper li:not(.accordion-key), .accordion-group-header')
.prepend('<div class="accordion-item-highlight"></div>')
.append('<div class="accordion-item-backlight"></div>')
/* item DOM:
<li>
<div class="accordion-item-highlight"></div>
item text
<div class="accordion-item-backlight"></div>
</li> */
$('.accordion-group-header .accordion-item-highlight').on('click', function(e) {
if(this == e.target) {
$(this).closest('.accordion-key').children('.accordion-group').toggle('fast')
}
})
})
</script>
And I am trying to do same using angular js
angular example is here which is not working:
<accordion-group group=tree domains=nets.data.domains></accordion-group>
<script src="http://ift.tt/1KZVmfn"></script>
<script type="text/javascript">
angular.module('accordion', ['ngAnimate'])
.controller('main', ['$scope', function($scope){
$scope.nets = {
"data": {
"symbols": {},
"domains": {
"Root": [
"GR_5",
"SIM069081008:Root",
"SIM069081001:Root",
"SIM069081012:Root"
],
"GR_5": [
"SIM069081001:GR_5",
"SIM069081004:GR_5"
],
"MyNetwork": ["Root"]
},
homeGroup: "MyNetwork"
}
}
var treeRootName = $scope.nets.data.domains[$scope.nets.data.homeGroup][0]
$scope.tree = $scope.nets.data.domains[treeRootName]
// if array item is a node, print it out using template else build out it's children into the next layer by passing $scope.domains.<domain-name> as the source for the next level of accordion-group
}])
.directive('accordionGroup', function() {
return {
restrict: 'E',
replace: true,
scope: { group: '=', domains: '=' },
template: ' <ul class="repeat" ng-class="repeat" ng-animate="{enter: \'repeat-enter\',leave: \'repeat-leave\',move: \'repeat-move\'}"> \
<accordion-key class="accordion-key" ng-repeat="key in group" key=key domains=domains ng-click="toggle($event, key)"></accordion-key> \
</ul>',
link: function(scope, element, attrs) {
scope.group = scope.group.map(function(key) {return {name: key} })
angular.forEach(scope.group, function(key) {
if(key.name.indexOf('SIM') == -1) {
console.log('setting collapse', key)
key.collapsed = true
console.log('collapse set complete', key)
}
})
scope.toggle = function($event, key) {
$event.stopPropagation()
key.collapsed = !key.collapsed
}
}
}
})
.directive('accordionKey', function($compile, $rootScope) {
return {
restrict: 'E',
replace: true,
scope: {key: '=', domains: '='},
template: '<li >{{key.name}}</li>',
link: function(scope, element, attrs) {
if(scope.key.name.indexOf('SIM') == -1) {
// console.log(scope.key.name, scope.key.collapsed)
$compile('<accordion-group class="accordion-group" group=domains[key.name] domains=domains ng-show=!key.collapsed></accordion-group>')(scope, function(cloned, scope) {
element.append(cloned)
})
}
}
}
})
</script>
code plnkr
I am not able to apply ngAnimate for UL/LI
I have an MVC application using a Kendo grid as follows:
var products = [{
ProductID: 1,
FullName: "Chai",
IsHeadmaster: "T"
}];
$("#teachers").kendoGrid({
dataSource: {
type: "json",
transport: {
read: function (e) {
// on success
e.success(products);
// on failure
//e.error("XHR response", "status code", "error message");
},
update: {
type: "POST",
url: "/Home/UpdateTeachers",
dataType: "json",
contentType: "application/json"
},
parameterMap: function(data, operation) {
if (operation === "update" || operation === "create") {
return JSON.stringify({product: data});
}
return data;
}
},
batch: true,
schema: {
model: {
id: "TeacherId",
fields: {
TeacherId: { type: "number" },
FullName: { type: "string" },
IsHeadmaster: { type: "boolean" }
}
}
}
},
toolbar: ["create", "save"],
columns: [
{ field: "FullName", title: "Teacher" },
{ field: "IsHeadmaster", title: "Is a Headmaster?", width: "120px" },
{ command: ["destroy"], title: " ", width: "85px" }],
editable: true
});
And my controller as:
public JsonResult UpdateTeachers(string models)
{
// do update here
}
The grid loads and displays perfectly, however when i try to make an edit and update i get the following error:
Unhandled exception at line 6684, column 17 in http://localhost:5227/kendo/js/kendo.web.js
0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'call'
I'm using JQuery 1.8.2.
Any ideas/help would be greatly appreciated?
In my JavaScript function I give all input-, textarea- and select-fields the actual value as an initial_value:
$('input, textarea, select').each(function (i) {
$(this).data('initial_value', $(this).val());
});
So I can check by keyup if there are any changes in a field:
$("body").on("keyup", 'input, textarea, select', function() {
if ($(this).val() != $(this).data('initial_value')) {
handleFormChanged();
changeMessage();
}
});
But also I want to check by keyup if the changes were deleted out of the fields. My idea was to check with an else if if the value in all fields is equal to the initial_value in all fields. It is important to know if really the value in ALL fields is equal to the initial_value. But it doesn´t work. Any better ideas? Thanks a lot!
I want to split the text entered by user in input text box and append into tspan of svg text
Example:
<input type="text" autofocus/>
Text entered would be for example: "I have some text that wraps onto three lines in this container"
I want to get my jquery/javascript to parse those lines and turn it into this:
<text text-anchor="start" y="152">
<tspan x="212" dy="-15">I have some text that</tspan>
<tspan x="212" dy="20">wraps onto three </tspan>
<tspan x="212" dy="22">lines in this container</tspan>
</text>
Note: Text would be split based on width minus 5px of svg shape to keep text inside borders
So far I tried this:
var output;
window.onchange = onchange;
function onchange(e)
{
output = e.target.value;
var width = e.target.value.length;
var element = document.getElementById("text");
var height = element.clientHeight;
console.log("Width of text:" + width);
console.log("Height of text:" + height);
console.log("Text entered: " + output);
var words = output.split(/[ ,]+/);
console.log(words );
e.target.value = '';
}
var el = document.getElementById("rect"); // or other selector like querySelector()
var rect = el.getBoundingClientRect(); // get the bounding rectangle
console.log("Width of rect: " + rect.width);
console.log("Height of rect: " + rect.height);
$("input[type='text']").bind('keydown', function () {
$(this).attr("size", Math.max(5, $(this).val().length));
});
I try to add a ScrollFlow plugin from http://ift.tt/1P3j1cZ to my wordpress theme but I can not get it to work.
I've linked the plugin through wp_enqueue_script and added the classes scrollingflow and -opacity to the <article> tag but nothing happens with the element.
In the footer i added;
<script>
(function($){
new ScrollFlow();
})(jQuery);
</script>
Does anyone know what I'm doing wrong?
Please help me to resolve this issue. Below is what I required
Your help is much appreciated
I have a iFrame and there is is a div with several stuff in it and i want to delete that via JavaScript, is that possible and how could i do that? I don't want to not just display it (display: none via CSS) but to remove it from the Website.
I have basic knowledge of JavaScript but didn't have any experience working with an iFrame. Hope you guys can help me.
Best adrinho
I'm trying to format any number like 123.40 in jQuery using
`decimals.toFixed(4);` // round
That is giving to me a result like 123.4000, but I want only 123.40 and if the value is 123.4786 then it should show 123.4786.
I want to use min value 2 and max value 4 for decimal formatting like we are doing in JSP fmt.tld tag file can any one suggest how I can achieve this.
So i'm quite new to Js/Jquery. My knowledge is quite basic.
I have a home page banner which needs to slide left or right when clicking previous or next. I have spent some time checking google but i really don't know where to start.
<div id="slider" class="flexslider">
<ul class="slides">
<li><img alt="Banner 1" src="images/banner1.jpg"/></li>
<li><img alt="Banner 1" src="images/banner2.jpg"/></li>
</ul>
</div>
<div class="banner-overlay">
<div class="banner-nav">
<img alt="Previous" src="/images/slide-prev.jpg"/>
<img alt="Next" src="/images/slide-next.jpg"/>
</div>
</div>
Thanks very much.
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.
The form is available when the user clicks a modal. When I click the submit button in the modal, it button does not work.
foreach ($posts as $post) { echo '
<td>
<button type="button" class="btn btn-success" data-toggle="modal" data-target="#$id_user">Validasi</button>
</td>
</tr>
</tbody>
';
}
Here is the modal:
echo '
<div id="$id_user" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content" id="registerContent">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div class="modal-text-header text-center">Validasi</div>
</div>
<div class="modal-body">
<div class="container-fluid">'; echo '
<form class="form col-md-12 center-block" action="http://localhost/MMM/admin/validasi/'.$id_user.'" method="POST" enctype=\ "multipart/form-data\">
<div class="form-group">
<input class="form-control input" placeholder="Dana awal (RP.1.000.000,-)" type="text" name="dana">
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn btn-block" name="submit" value="Submit">
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="col-md-12">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
</div>
</div>
</div>' ;
I use Remodal ( http://ift.tt/1ImlYRr ) to make some modals, normally I use only the alert modal but now I want to use a confirmation modal.
I have made a delete button with a confirmation modal, I have the following code:
$('#delete_button').click(function() {
$('[data-remodal-id = modal-delete]').remodal().open();
$(document).on('confirmation', '#modal-delete', function () {
alert('Confirmation button is clicked');
});
$(document).on('cancellation', '#modal-delete', function () {
alert('Cancel button is clicked');
});
});
<div class="remodal" data-remodal-id="modal-delete">
<div class="h1_modal">Delete confirmation</div>
<div class="p_modal">Are you sure?</div>
<button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
<button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>
The modal is opening when I click on the button with the ID #delete_button but when I choose Cancel or OK, I don't see any alert.
How can I get this working?
Kind regards,
Arie
I am trying to add zoom effect to my images using jquery JQZoom plugin.
This is how my HTML looks like:
<div class="pb-left-column">
<!-- product img-->
<div id="image-block" class="clearfix is_caroucel">
<span id="view_full_size">
<a class="jqzoom" title="" rel="gal1" href="img/products/1/1-tm_thickbox_default.jpg">
<img src="img/products/1/1-tm_large_default.jpg" title="" alt="">
</a>
</span>
</div> <!-- end image-block -->
<!-- thumbnails -->
<div id="views_block" class="clearfix">
<a id="view_scroll_left" class="" title="Other views" href="javascript:{}">Previous</a>
<div id="thumbs_list">
<ul id="thumbs_list_frame">
<li id="thumbnail_1">
<a rel="{ gallery: 'gal1',
smallimage: 'img/products/1/1-tm_large_default.jpg',
largeimage: 'img/products/1/1-tm_thickbox_default.jpg'}"
title="">
<img class="img-responsive" id="thumb_1" src="img/products/1/1-tm_cart_default.jpg" alt="" title="" height="80" width="80">
</a>
</li>
.....
.....
.....
</ul>
</div> <!-- end thumbs_list -->
<a id="view_scroll_right" title="Other views" href="javascript:{}">
Next
</a>
</div> <!-- end views-block -->
<!-- end thumbnails -->
</div>
MY Jquery:
$(document).ready(function() {
$('.jqzoom').jqzoom({
zoomType: 'innerzoom',
zoomWidth: 458,
zoomHeight: 458,
xOffset: 21,
yOffset: 0,
title: false
});
});
My problem is when I using this code, image zoom is not working correctly. Its working but not zooming.
This is a Fiddle with existing code.
Can anybody tell me what is the wrong with this?
Thank you.