I don't know why I don't get the "X" symbol ...
It should be like this:
How can I find the problem? Maybe an CSS-file is blocking an other CSS-file?
JavaScript-Code
$(function() {
var sampleTags = ['Klavier', 'Blockflöte', 'Schlagzeug', 'Gesang', 'Saxophon', 'Klarinette', 'Keyboard', 'Panflöte', 'Mundharmonika', 'Beatboxing', 'Akkordeon', 'Cello', 'Bratsche', 'Tuba', 'Kontrabass', 'E-Gitarre', 'E-Bass', 'Akustikgitarre'];
$('#singleFieldTags').tagit({
availableTags: sampleTags,
singleField: true,
singleFieldNode: $('#mySingleField'),
beforeTagAdded: function(evt, ui) {
var counter = jQuery.inArray(ui.tagLabel, sampleTags);
if(counter != -1) {
return true;
} else {
$('.tagit-new input').val('');
return false;
}
},
});
});
Susanne, encountered the same issue. After a significant amount of time wasted, I determined that the 'x' icon is present, it's just not rendering on the browser level.
var removeTag = $('<a><span class="text-icon">\xd7</span></a>') // \xd7 is an X
This is line 485 of tag-it.js; when you check the rendering of your page, you'll see this is actually present. I changed it to the following in order to confirm that it was present and just needed to be rendered differently.
var removeTag = $('<a><span>x</span></a>') // \xd7 is an X
It can be styled however, from this point. Hope this helps anyone encountering this issue.
Related
As part of my nightwatch.js testing, I have the following code that will list all the values of an element (in this case, a list of UK towns);
"Page 2 Location SEO Crawl paths are displayed": function (browser) {
browser.elements('xpath', '//a[contains(#href,"location")]', function (results) {
results.value.map(function(element) {
browser.elementIdAttribute(element.ELEMENT, 'innerText', function(res) {
var resme = res.value;
console.log(resme)
});
});
});
},
This correctly list all the element values, as such;
What I'd now like to do is check that Nottingham is listed in the result, and Fail the test if it's not.
I installed the assert npm package to see if that would help, which changed my code to;
"Page 2 Location SEO Crawl paths are displayed": function (browser) {
browser.elements('xpath', '//a[contains(#href,"location")]', function (results) {
results.value.map(function(element) {
browser.elementIdAttribute(element.ELEMENT, 'innerText', function(res) {
var resme = res.value;
console.log(resme);
if (resme.includes("Nottingham")) {
assert.ok(true);
}
else {
assert.ok(false);
}
});
});
});
},
but this didn't work, as I kept getting the following error;
Is using the assert package the best way of testing this, or it there a more straightforward way of asserting that Nottingham is included in this list, and the tests fails if it's not.
I've tried using resme.includes("Nottingham"), but this doesn't fail the test.
Any help would be greatly appreciated.
Thanks.
Looks like the inner-most function (the one that has res as parameter) is called for every item, and resme is the item you are currently iterating, not an array, so the includes function is not working as expected.
I'm not familiar with this library but I guess you have to do something like this:
"Page 2 Location SEO Crawl paths are displayed": function (browser) {
var found = false;
browser.elements('xpath', '//a[contains(#href,"location")]', function (results) {
results.value.map(function(element) {
browser.elementIdAttribute(element.ELEMENT, 'innerText', function(res) {
var resme = res.value;
console.log(resme);
if (resme === "Nottingham") {
found = true;
// Maybe return something like null or 0 to stop iterating (would depend on your library).
}
});
});
});
assert.ok(found)
},
You init a variable "found" with a false value, and when you iterate over every value you set it to true if you find it. Optionally, you should break the iteration at that point. When the whole process is finished, assert that you found the value you wanted.
I have a spark list with a variable row_height (2 custom itemRenderer: Header 30 px, Contact 60 px) that on the only first orientation change after a scroll, change the indexes in view.
I tried to set Header to be 60 px height, and i had no problems with the orientation change.
I'm not setting the verticalScrollPosition anywhere. Adding an event listener on the viewport's list and watching the verticalScrollPosition, it doesn't change on orientation change.
I really don't know how can i fix that.
EDIT:
This is the code relative to the list:
<fx:Script>
protected function creationCompleteHandler(event:FlexEvent):void
{
addressBookViewModel = ViewModelFactory.getInstance().getAddressBookViewModel();
addressBookViewModel.getUserContacts(onDataReceived);
}
protected function pagedContactsList_initializeHandler(event:FlexEvent):void
{
asyncListView.list = pagedContactsList;
}
private function onDataReceived():void
{
pagedContactsList.length = (BusinessContext.getInstance().getTotalContacts() + BusinessContext.getInstance().getTotalLastNames());
loadPagedData();
}
private function createPendingItemFunctionHandler(index:int, ipe:ItemPendingError):Object
{
if(!addressBookViewModel.pageUp)
{
addressBookViewModel.pageUp = true;
addressBookViewModel.currentPage++;
addressBookViewModel.getMoreUserContacts(onMoreDataRecieved, onMoreDataMissing);
}
return loadingDataHeader;
}
private function onMoreDataRecieved():void
{
loadPagedData();
}
private function loadPagedData():void
{
for(var i:int = 0; i < addressBookViewModel.contacts.length; i++)
{
pagedContactsList.setItemAt(addressBookViewModel.contacts.getItemAt(i), pagedContactsList.lastItemInsertedIndex);
pagedContactsList.lastItemInsertedIndex++;
}
addressBookViewModel.pageUp = false;
}
internal var headerItemRender:ClassFactory = new ClassFactory(HeaderItemRenderer);
internal var contactItemRenderer:ClassFactory = new ClassFactory(ContactItemRenderer);
private function rendererFunction(item:Object):ClassFactory
{
return item.hasOwnProperty("isHeader") ? headerItemRender : contactItemRenderer;
}
</fx:Script>
<fx:Declarations>
<custom:PagedArrayList id="pagedContactsList" initialize="pagedContactsList_initializeHandler(event)"/>
</fx:Declarations>
<s:List id="list" width="100%"
height="100%" itemRendererFunction="rendererFunction" change="list1_changeHandler(event)">
<s:AsyncListView id="asyncListView" createPendingItemFunction="createPendingItemFunctionHandler" />
</s:List>
The curious thing is that before and after the orientation change the list.scroller.viewport.verticalScrollPosition has the same value even if the list has scrolled ~ 40 rows. (40 is the page size).
I have many lists in my app, and every list that has const row_height has no issue, but the 2 with a variable row_height have this problem. Maybe it's caused by the AsyncListView.
EDIT 2:
I removed the AsyncListView, binding directly addressBookViewModel.contacts to the list.dataProvider, removing the pagination and the issue is still there.
EDIT 3:
I think that the only thing to do is to put breakpoints everywhere in the Scroller's class.
EDIT 4:
This issue happens only when scrolling to the bottom of the list.
EDIT 5:
Find the issue!
VerticalLayout.as, in updateDisplayListVirtual(row 1797) there's a call to a method (updateLLV) that set up a LinearLayoutVector using a typicalLayoutElement. This is lazily init with the first itemRenderer added to the dataGroup of the list. In my case it's the HeaderItemRenderer (30px).
After the updateLLV, the startIndex (index of the first visible item) is setted by calling the indexOf on the LinearLayoutVector and passing the verticalScrollPosition. (briefly: verticalScrollPosition / typicalLayoutElement.height)
The problem is that nowhere is taken into consideration the variableRowHeight!
Workaround found! Not so elegant, but it works.
stage.eventListener(StageOrientationEvent.ORIENTATION_CHANGING, yourReorientHandler, false, 1)
Setting the priority is really important, otherwise the updateDisplayListVirtual will be called before your handler.
private function reorientHandler(event:StageOrientationEvent):void
{
var IndecesInView:Vector.<int> = list.dataGroup.getItemIndicesInView();
var firstInView:int = IndecesInView[0];
callLater(
function():void
{
if(!list.layout.getScrollPositionDeltaToElement(firstInView+1)) return;
list.scroller.viewport.verticalScrollPosition += list.layout.getScrollPositionDeltaToElement(firstInView+1).y;
});
}
What has happened to the XSLT processing in IE11?
On IE8/9/10, you can use:
if (window.ActiveXObject) {
var xslt = new ActiveXObject("Msxml2.XSLTemplate");
....
}
On Chrome/Firefox/Safari, you can use:
else {
var xsltProcessor = new XSLTProcessor();
}
But on IE11, neither of these are supported. Does anyone know how this can be accomplished?
Try
if (window.ActiveXObject || "ActiveXObject" in window)
This worked for me working with IE11 and allowed me to instantiate ActiveX objects since the standard old check was being bypassed.
This works for me on Chrome/Edge/Firefox/IE11
function loadXMLDoc(filename) {
if (window.ActiveXObject || "ActiveXObject" in window) {
xhttp = new ActiveXObject("Msxml2.XMLHTTP");
} else {
xhttp = new XMLHttpRequest();
}
xhttp.open("GET", filename, false);
xhttp.send("");
return xhttp.responseXML;
}
if (window.ActiveXObject || "ActiveXObject" in window) {
ie();
} else {
xml = loadXMLDoc("input.xml");
xsl = loadXMLDoc("mmlctop2_0.xsl");
if (document.implementation && document.implementation.createDocument) {
xsltProcessor = new XSLTProcessor();
xsltProcessor.importStylesheet(xsl);
resultDocument = xsltProcessor.transformToDocument(xml, document);
var serializer = new XMLSerializer();
var transformed = serializer.serializeToString(resultDocument.documentElement);
alert(transformed);
}
}
// https://msdn.microsoft.com/en-us/library/ms753809(v=vs.85).aspx
function ie() {
var xslt = new ActiveXObject("Msxml2.XSLTemplate.3.0");
var xslDoc = new ActiveXObject("Msxml2.FreeThreadedDOMDocument.3.0");
var xslProc;
xslDoc.async = false;
xslDoc.load("mmlctop2_0.xsl");
if (xslDoc.parseError.errorCode != 0) {
var myErr = xslDoc.parseError;
alert("You have error " + myErr.reason);
} else {
xslt.stylesheet = xslDoc;
var xmlDoc = new ActiveXObject("Msxml2.DOMDocument.3.0");
xmlDoc.async = false;
xmlDoc.load("input.xml");
if (xmlDoc.parseError.errorCode != 0) {
var myErr = xmlDoc.parseError;
alert("You have error " + myErr.reason);
} else {
xslProc = xslt.createProcessor();
xslProc.input = xmlDoc;
xslProc.addParameter("param1", "Hello");
xslProc.transform();
alert(xslProc.output);
}
}
}
You could consider Saxon CE, an XSLT 2.0 processor implemented entirely in JavaScript. This would give you a consistent API across all browsers and would allow you to code using the more powerful XSLT 2.0 language rather than 1.0.
The reason if(window.ActiveXObject) fails in IE11 is because for some reason window.ActiveXObject has become falsy, even though it is still a function. I've taken to being more explicit in my feature detection:
if(window.ActiveXObject !== undefined){
...
}
This approach also covers the case of checking for attributes that are present but not set to a truthy value:
if(document.createElement("span").draggable !== undefined){
...
}
For me running site in a compatibility mode in IE - 11 solved the issue....
Note : This might not be a solution , but I was in a situation where one if my old site was using above mentioned code. But I'm not in a position to Re-code the site
You Can use ("ActiveXObject" in window) which will allow all the IE browsers to come inside the if condition .
Exp :-
if ("ActiveXObject" in window) {
// Internet Explorer For all versions like IE8 , IE9 , IE10 or IE11 etc
}else{
// code for Mozilla, Firefox, Opera, etc.
}
I am not able to properly launch my site at http://www.enbloc.sg
This is because my programmer is not able to figure out a problem. Any help would be much appreciated.
Visitors vote by clicking on one colour on the traffic light. They are supposed to only have one vote.
The site first checks for cookies and then ip address of voter. If the 2 are identical to a previous visitor, then voting is not allowed. If only one of the 2 are repeated, then voting is permitted.
The idea of having a double restriction is to allow different voters behind a fixed IP to vote. E.g. the employees of a company would not be able to vote since they are likely to be accessing the site via a fixed IP address.
However, currently, visitors are able to click on ALL 3 colours to register 3 votes on their first visit to the site. My coder is not able to resolve this issue and has abandoned me.
I would be most grateful if someone can help. I believe the relevant codes are appended below.
Apologies if my posting is wrongly formatted.
Thanks very much,
Lin En
Extracted from http://www.enbloc.sg/js/functions.js
//update dashboard when vote by user
function vote_update(ip_address, issue_num, vote_status){
var vote_cookie = document.getElementById('vote_cookie').value;
if(vote_cookie != '')
{
if(document.getElementById('thanks').style.display == "none")
{
$("#multi_error").fadeIn("slow");
}
else
{
document.getElementById("thanks").style.display = "none";
$("#multi_error").fadeIn("slow");
}
}
else
{
if(ip_address != ' ' && issue_num != ' ')
{
http.open("POST", "update_vote.php"); // true
http.onreadystatechange = update_vote;
http.setRequestHeader("Content-Type", "application/x-www-form- urlencoded;charset=UTF-8");
http.send("ip="+ ip_address +"&issue_num="+ issue_num + "&vote_status=" + vote_status);
}
else
{
alert("Occur Error for IP or ISSUE!");
}
}
}
// ajax response function
function update_vote(){
if (http.readyState == 4)
{
if (http.status == 200)
{
var xmlDoc = http.responseXML;
var listElements = xmlDoc.getElementsByTagName("list");
var result = listElements[0].getElementsByTagName("total") [0].childNodes[0].nodeValue;
if (result == 1)
{
var issue_num = listElements[0].getElementsByTagName("issue")[0].childNodes[0].nodeValue;
var vote = listElements[0].getElementsByTagName("vote") [0].childNodes[0].nodeValue;
$("#thanks").fadeIn("slow");
load(issue_num, vote);
}
else if (result == 'Multi')
{
if(document.getElementById('thanks').style.display == "none")
{
$("#multi_error").fadeIn("slow");
}
else
{
document.getElementById("thanks").style.display = "none";
$("#multi_error").fadeIn("slow");
}
}
else
{
alert("error");
}
}
}
}
These changes will help:
var already_voted = false;
function vote_update(ip_address, issue_num, vote_status)
{
if(alread_voted) return;
already_voted = true;
// rest of the code
}
This will make sure that only one vote can be cast during a single visit. The cookies take care of the rest and are already working fine.
I need to replicate the Google Analytics date picker (plus a few new options). Can anyone tell me how to highlight all the cells on a calendar between two dates. My basic JavaScript is OK but I think I'm getting a bit out of my depth.
I'm using JQuery 1.5.1 and JQuery UI 1.8.14.
In needed to replicate Google Analytics date picker as well. I know you were asking just about highlighting cells, but if someone else would prefer complete solution, you can see my answer from another question: jquery google analytics datepicker
Here's a solution using the built-in 'onSelect' event (jsFiddle):
$(document).ready(function() {
'use strict';
var range = {
'start': null,
'stop': null
};
$('#picker').datepicker({
'onSelect': function(dateText, inst) {
var d, ds, i, sel, $this = $(this);
if (range.start === null || range.stop === null) {
if (range.start === null) {
range.start = new Date(dateText);
} else {
range.stop = new Date(dateText);
}
}
if (range.start !== null && range.stop !== null) {
if ($this.find('td').hasClass('selected')) {
//clear selected range
$this.children().removeClass('selected');
range.start = new Date(dateText);
range.stop = null;
//call internal method '_updateDatepicker'.
inst.inline = true;
} else {
//prevent internal method '_updateDatepicker' from being called.
inst.inline = false;
if (range.start > range.stop) {
d = range.stop;
range.stop = range.start;
range.start = d;
}
sel = (range.start.toString() === range.stop.toString()) ? 0 : (new Date(range.stop - range.start)).getDate();
for (i = 0; i <= sel; i += 1) {
ds = (range.start.getMonth() + 1).toString() + '/' + (range.start.getDate() + i).toString() + '/' + (range.start.getFullYear()).toString();
d = new Date(ds);
$this.find('td a').filter(function(index) {
return $(this).text() === d.getDate().toString();
}).parents('td').addClass('selected');
}
}
}
}
});
});
I became desperate and came up with a solution on my own. It wasn't pretty but I'll detail it.
I was able to construct a div that had the text boxes, buttons and the datepicker that looked like the Google Analytics control but I couldn't make the datepicker work properly. Eventually, I came up with the idea of creating a toggle variable that kept track of which date you were selecting (start date or end date). Using that variable in a custom onSelect event handler worked well but I still couldn't figure out how to get the cells between dates to highlight.
It took a while, but I slowly came to the realization that I couldn't do it with the datepicker as it existed out of the box. Once I figured that out, I was able to come up with a solution.
My solution was to add a new event call afterSelect. This is code that would run after all the internal adjustments and formatting were complete. I then wrote a function that, given a cell in the datepicker calendar, would return the date that it represented. I identified the calendar date cells by using jQuery to find all the elements that had the "ui-state-default" class. Once I had the date function and a list of all the calendar cells, I just needed to iterate over all of them and, if the date was in the correct range, add a new class to the parent.
It was extremely tedious but I was able to make it work.