I have a Jquery for Password-correction and it works fine, if I use the 2 Lines
// $('#minimum span').show();
// $('#minimum').addClass('boldgreen');
But I´ve tryed to put that out in a seperat function, and the return is what I want, if I alert(ret[0]);
But it doesn´t change the css in the html code.
I´ve tryed many ways, but without any result.
Any suggestions?
Thanks in advance.
var cssPassword = function(cssId, cssClass, hideShow, removeAddClass)
{
var IDKlasse = "$('" + cssId + " span')." + hideShow +"();";
var cssKlasse = "$('" + cssId + "')." + removeAddClass + "('" + cssClass + "');";
var cssArray = new Array();
cssArray[0] = IDKlasse;
cssArray[1] = cssKlasse;
return cssArray;
}
function()
...
if(passwordNew.length > 7) {
var ret = cssPassword('#minimum', 'green', 'show', 'addClass');
//eval(ret[0]);
//eval(ret[1]);
strength += 1;
alert(ret[1]);
// $('#minimum span').show();
// $('#minimum').addClass('boldgreen');
}else{
...
Related
I'm new at Javascript and i'm trying to pull data from multiple XML files.
Right now i have maneged to create 5 rows of data, but all rows contains data from the same file.
I have been trying to store the data in another array than the original one, but nothing i have tried seems too work.
My HTML code is here:
<body>
<button type="button" onclick="loadXMLDoc()" >Get my PTO DATA</button>
<br><br>
<table id="demo">
<tbody>
</tbody>
</table>
</body>
And Javascript here:
var arr = ["018338464.xml", "018340087.xml", "018340096.xml", "018340106.xml", "018340153.xml"],
cnt = 0, xmlhttp = new XMLHttpRequest(), method = "GET";
function loadXMLDoc() {
xmlhttp.open(method, arr[cnt], true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === XMLHttpRequest.DONE && xmlhttp.status == 200) {
buildTable();
}
};
xmlhttp.send();
}
function buildTable(file, xmlDoc) {
var i;
var a = 1
var xmlDoc = xmlhttp.responseXML;
var table = "<tr><th>DisplayNumber</th><th>Client</th><th>IpgClientId</th><th>Location</th><th>PracticeArea</th><th>Type</th><th>Application number</th><th>Application date</th><th>Classes</th><th>Class description</th><th>Status</th></tr>";
var x = xmlDoc.getElementsByTagName("Transaction");
for (var d = 0; d < arr.length; d++) {
console.log(`${d}: ${arr[d]}`);
var store = new Array();
for (i = 0; i < x.length; i++) {
table += "<tr><td>" +
x[i].getElementsByTagName("TransactionIdentifier")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("MarkVerbalElementText")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("Identifier")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("RegistrationOfficeCode")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("TransactionCode")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("MarkFeature")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("ApplicationNumber")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("ApplicationDate")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("ClassNumber")[0].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("GoodsServicesDescription")[2].childNodes[0].nodeValue +
"</td><td>" +
x[i].getElementsByTagName("MarkCurrentStatusCode")[0].childNodes[0].nodeValue +
"</td></tr>";
}
store[d] = a;
a++;
}
document.getElementById("demo").innerHTML = table;
}
All feedback are welcome, i'm also open to redo it all if someone has a better solution to my problem
You always load arr[cnt], and cnt is always zero. If you want loadXMLDoc to load the entire set, then you want
function loadXMLDoc() {
arr.forEach( function(name) {
xmlhttp.open(method, name, true);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState === XMLHttpRequest.DONE && xmlhttp.status == 200) {
buildTable();
}
};
xmlhttp.send();
});
}
I am using the Fivestar 2.2 module. Everything works fine, but voting on a touch screen doesn't: It is impossible to give 5 stars on a 5 star widget, even though it works perfectly on the desktop. Unfortunately I'm not allowed to provide a link.
Is there someone who already solved this? Drupal.org is not a help.
/**
* #file
*
* Fivestar JavaScript behaviors integration.
*/
/**
* Create a degradeable star rating interface out of a simple form structure.
*
* Originally based on the Star Rating jQuery plugin by Wil Stuckey:
* http://sandbox.wilstuckey.com/jquery-ratings/
*/
(function($){ // Create local scope.
Drupal.behaviors.fivestar = {
attach: function (context) {
$(context).find('div.fivestar-form-item').once('fivestar', function() {
var $this = $(this);
var $container = $('<div class="fivestar-widget clearfix"></div>');
var $select = $('select', $this);
// Setup the cancel button
var $cancel = $('option[value="0"]', $this);
if ($cancel.length) {
$('<div class="cancel">' + $cancel.text() + '</div>')
.appendTo($container);
}
// Setup the rating buttons
var $options = $('option', $this).not('[value="-"], [value="0"]');
var index = -1;
$options.each(function(i, element) {
var classes = 'star-' + (i+1);
classes += (i + 1) % 2 == 0 ? ' even' : ' odd';
classes += i == 0 ? ' star-first' : '';
classes += i + 1 == $options.length ? ' star-last' : '';
$('<div class="star">' + element.text + '</div>')
.addClass(classes)
.appendTo($container);
if (element.value == $select.val()) {
index = i + 1;
}
});
if (index != -1) {
$container.find('.star').slice(0, index).addClass('on');
}
$container.addClass('fivestar-widget-' + ($options.length));
$container.find('a')
.bind('click', $this, Drupal.behaviors.fivestar.rate)
.bind('mouseover', $this, Drupal.behaviors.fivestar.hover);
$container.bind('mouseover mouseout', $this, Drupal.behaviors.fivestar.hover);
// Attach the new widget and hide the existing widget.
$select.after($container).css('display', 'none');
// Allow other modules to modify the widget.
Drupal.attachBehaviors($this);
});
},
rate: function(event) {
var $this = $(this);
var $widget = event.data;
var value = this.hash.replace('#', '');
$('select', $widget).val(value).change();
var $this_star = (value == 0) ? $this.parent().parent().find('.star') :
$this.closest('.star');
$this_star.prevAll('.star').andSelf().addClass('on');
$this_star.nextAll('.star').removeClass('on');
if(value==0){
$this_star.removeClass('on');
}
event.preventDefault();
},
hover: function(event) {
var $this = $(this);
var $widget = event.data;
var $target = $(event.target);
var $stars = $('.star', $this);
if (event.type == 'mouseover') {
var index = $stars.index($target.parent());
$stars.each(function(i, element) {
if (i <= index) {
$(element).addClass('hover');
} else {
$(element).removeClass('hover');
}
});
} else {
$stars.removeClass('hover');
}
}
};
})(jQuery);
Sorry if it's not what you asked but I'll try to help. Don't use fivestar, I've been in the same situation. I suggest you to try the rate module (https://www.drupal.org/project/rate) which is in my opinion a more complete solution.
I have a responsive website which of course works with mobile devices and you can vote without problem, although I can't assure it was mobile ready.
I need to execute a function inside ng-repeat to convert date. How can i parse a angular result in a function?
Field name in database is dataf
I tried diferent ways but no one works...
<tr ng-repeat="detail in details| filter:search_query">
<td><b>{{detail.nom}}</b></td>
<td>{{detail.descripcio}}</td>
<td>{{datareves(detail.datafet) }} </td>
<td>{{detail.visible}}</td>
and
getInfo();
function getInfo(){
$http.post('empDetails.php').success(function(data){
$scope.details = data;
});
}
$scope.datareves = function(details.datafet) {
var res = dataf.split(" ");
var res2 = res[0].split("-");
var final = res2[2] + "-" + res2[1] + "-" + res2[0];
return (final);
};
Your function should look like this
$scope.datareves = function(dataf) {
var res = dataf.split(" ");
var res2 = res[0].split("-");
var final = res2[2] + "-" + res2[1] + "-" + res2[0];
return (final);
};
notice the change to the first line. The name of the variable you used in the function was not the same as the name being passed into the function.
You can read more about javascript function definitions here https://www.w3schools.com/js/js_function_definition.asp
I have a directive which takes in an array of container objects and $compiles a new container directive for each container and each nested container. It also compiles a resize handle before all containers except the first child. The link function looks like this:
//scope.dock is retrieved from a factory
scope.initContainers = function () {
var prevScope;
for (var i = 0; i < scope.dock.containers.length; i++) {
var newScope = scope.$new(true);
newScope.container = scope.dock.containers[i];
var newElement = '<panel-container class=\"' + scope.dock.containers[i].axis + '" ></panel-container>';
var newTemplate = $compile(newElement)(newScope);
if (i > 0) {
var sizerScope = scope.$new(true);
sizerScope.containerOne = prevScope;
sizerScope.containerTwo = newScope;
var sizerElement = '<resize-handle class=\"' + scope.dock.containers[i].axis + '"></resize-handle>';
var sizerTemplate = $compile(sizerElement)(sizerScope);
element.append(sizerTemplate);
}
element.append(newTemplate);
if (scope.dock.containers[i].containers.length > 0) {
generateContainers(scope.dock.containers[i], newScope, newTemplate);
}
}
return scope;
};
scope.sizeContainers = function () {
scope.$broadcast('size-containers');
};
var generateContainers = function (value, parentScope, parentElement) {
var prevScope;
for (var y = 0; y < value.containers.length; y++) {
var newChildScope = parentScope.$new(true);
newChildScope.container = value.containers[y];
var newChildElement = '<panel-container class=\"' + value.containers[y].axis + '" ></panel-container>';
var newChildTemplate = $compile(newChildElement)(newChildScope);
if (y > 0) {
var sizerScope = parentScope.$new(true);
sizerScope.containerOne = prevScope;
sizerScope.containerTwo = newChildScope;
var sizerElement = '<resize-handle class=\"' + value.containers[y].axis + '"></resize-handle>';
var sizerTemplate = $compile(sizerElement)(sizerScope);
parentElement.append(sizerTemplate);
}
parentElement.append(newChildTemplate);
if(typeof value.containers[y].containers !== 'undefined') {
if (value.containers[y].containers.length > 0) {
generateContainers(value.containers[y], newChildScope, newChildTemplate);
}
}
prevScope = newChildScope;
}
};
scope.initContainers().sizeContainers();
My problem is that the first child layer compiles but the second one does not. It does, however, work when I add scope.$apply to the end of generateContainers. Unfortunately for some reason it is skipping the first child element for each container and throwing a 'digest in progress' error.
Does anyone have any ideas on how to get this to compile?
And could someone explain why scope.$apply() is compiling the second layer only after I explicitly call it, even when $digest is already running?
I fixed this by getting rid of initContainers (since it was exactly the same as generateContainers) and moving that function to the container directive as well. That way the root directive wasn't trying to compile everything.
Using ExtJs4.1 on Sencha Architect.
I have following code in my onDeleteButton code
onDeleteButtonClick: function(button, e, options) {
var active = this.activeRecord;
var myGrid = Ext.getCmp('publisherResultsGridView'),
sm = myGrid.getSelectionModel(),
selection = sm.getSelection(); // gives you a array of records(models)
if (selection.length > 0){
for( var i = 0; i < selection.length; i++) {
this.application.log('OnDeleteItemID is ' + selection);
}
this.remove(selection);
}
Code for Remove Function
remove: function(record) {
var store = Ext.getStore('PublisherProperties');
store.proxy.url = MasterDataManager.globals.url + "Publishers/";
store.remove(record);
store.sync();
When I run it, I could see an array of objects in my log, also I dont get any errors after the remove function is executed. But the store doesnt update, I mean it doesnt remove the selected items.
Can somebody please help me.
Thanks
I solved my problem by making the following changes.
To onDeleteButtonClick
if (selection.length > 0){
for( var i = 0; i < selection.length; i++) {
this.application.log('OnDeleteItemID is ' + selection[i].data.id);
this.remove(selection[i]);
}
}
To Remove function
remove: function(record) {
var store = Ext.getStore('PublisherProperties');
this.application.log('Remove Function is ' + record);
store.proxy.url = MasterDataManager.globals.url + "Publishers/" + record.data.id;
store.load({
scope : this,
callback : function(records, operation, success){
if (records.length > 0){
var store2 = Ext.getStore('PublisherProperties');
store2.proxy.url = MasterDataManager.globals.url + "Publishers/";
store2.remove(records[0]);
store2.sync();
}
}
});
//store.remove(record);
//store.sync();