How to append an html element when using flatpickr - flatpickr
I'm having the weirdest problem and I'm stumped.
I'm using flatpickr as a date picker on my site, and this tool works really well, however I'm thinking I would like to add an additional image on the popup dialog. I'm thinking 'I can do this!' and so off I go.
I found the onOpen() hook and knew it was the perfect function for what I needed to do. Then I wrote some jQuery to reference the correct area on the dialog and then .append(htmlString)
My code for generating the popup and my configuration options are:
$dateRangeInputs.flatpickr({
altInput: true,
mode: 'range',
onOpen: function(selectedDates, dateStr, instance) {
instance.prevMonthNav.append("<img src='/ui/images/icons/arrow-left.svg'>");
}
});
The problem is the 'htmlString' is treated entirely as text, ignoring the html instructions, so I get the following HTML turning up in the dialog.
<svg version="1.1" ...> ... </svg>
<img src='/ui/images/icons/arrow-left.svg'></span>
I've included a picture also, for those of you who prefer visual explanations.
I have checked and rechecked the jQuery append() command, it should be processing the htmlString argument correctly. My only thought is that there is something in the flatpickr library that is only allowing text to be included. I think my best help will come from others who are using flatpickr.
Worked it out!
I needed to wrap the instance property as a jQuery selector, like this:
onOpen: function(selectedDates, dateStr, instance) {
$(instance.prevMonthNav).append("<img src='/ui/images/icons/arrow-left.svg'>");
}
Related
How to use Growl with 'position: sticky' in Primefaces?
I am trying to change the p:growl position of primefaces through the .ui-growl class to use position: sticky. However, since the component is rendered at the end in body, the relative behavior of the position does not work as I would like. Is there any way to use the sticky position for this component? Or some way to get the component to render where it is declared? PrimeFaces 5.1; Mojarra 2.1;
Disclamer: I tried this with the PF 7.0 showcase, but I think the basics also work with the 5.1 version.
You effectively have 4 options. The latter three all need you to inspect the javascript source of the component (which is open, so you can ALWAYS inspect it before asking questions, the java source is irrelevant here) and for the first solution it helps to see how the component works, but inspecting with a browser developer tool is sufficient (that is how I did it).
Basic analysis with or without looking at the source
This is a variant on your "Or some way to get the component to render where it is declared?". Since on the client side, it is all plain html, css and javascript, you can manipulate with al tools available on the client-side.
You can see that the main part of the grow is html technically rendered where it is declared. Check the PrimeFaces showcase and you'll see
<span id="j_idt700:growl" class="ui-growl-pl" data-widget="widget_j_idt700_growl" data-summary="data-summary" data-detail="data-detail" data-severity="all,error" data-redisplay="true"></span>
right inside the form where it also is in the xhtml. The javascript of the component creates the client side dom things, amongst which is the container that you see right before the end of the body (from the showcase)
<div id="j_idt700:growl_container" class="ui-growl ui-widget" style="z-index: 1002;"></div>
This last piece is html is where the individual growls are added to when they need to be rendered and hence the part that makes the component in most normal cases behave correctly but needs to be done differently in your case.
Solution 1, pure client-side component agnostic solution
Effectively this is as simple as moving this piece of html in the dom, see How to move an element into another element?.
In the online showcase I put the following jquery code in the browser developer tool console
$("#j_idt700\\:growl_container").prependTo(".layout-content");
And added the following css
position: sticky;
top: 10px;
float: right; // this is needed in the showcase, might not always be needed
And it worked.
The jquery should be put somewhere in your page where it runs after the component javascript is executed, so best is to do it right before the end of the body.
Keep in mind that the j_idt700 prefix is the dynamic id of the form in the showcase (it does not have a fixed id here), but you can also use different selectors based on the classes or whatever)
Solution 2, changing the source 'locally'
In the javascript source, you can see where the container is technically rendered
render: function() {
//create container
this.jq = $('<div id="' + this.id + '_container" class="ui-growl ui-widget"></div>');
this.jq.appendTo($(document.body));
//render messages
this.show(this.cfg.msgs);
},
Changing the this.jq.appendTo($(document.body)); in some way to have it appended to the current html node ('this'?) will make it work too. Regarding the overriding, you have two options
How do I find and/or override JavaScript in Primefaces component based on widgetVar?
Override a method from a Primefaces specific widget
Solution 3 Changing the source server side
Effectively you do the first part of #2 but patch the source and create a new custom PrimeFaces version
Solution 4 Make this feature avaiable for others too
What can be done here is to create a new attribute on the component and patch the source in some places so it is configurable to have the component behave as it is now or as sticky (they changed the existing 'sticky' attribute to 'keepAlive' in 7.0.x so sticky is avalable again ;-)). Of course this should be submitted as a patch then...
Using Cypress, how would I write a simple test to check that a logo image exists on a page
specifically, I would like to test that the logo appears on the home page of the app. I guess I am not sure what I should use to look for the image.
I tried
it('has a logo', function () {
cy.visit('http://localhost:3000')
cy.get('img').should('contains' , 'My-Logo.png')
})
instead of cy.get I also tried to just use
cy.contains('My-Logo.png')
but it also fails.
I wasn't sure what element I should use or if I should be using get, but it fails. When I look at the source code for the web page, the logo is hidden within the javascript (nodeJS, vueJS,and expressJS application) and I noticed the javascript seems to add a sequence of numbers and letters to the image when I go to the image page even though the image name in the assets folder does not have it on there. My-Logo.d63b7f9.png.
I figured out the solution on my own.
cy.get('form').find('img').should('have.attr', 'src').should('include','My-Logo')
I inspected the element and found the <img src... line was embedded within a <form>. I could do a cy.get('form') and pass, but could not do a cy.get('img') to pass. So then I chained them together and it passed. I am not sure why I cannot just simply add the second should statement, but it failed when I tried to just run:
cy.get('form').find('img').should('include','My-Logo')
I am not entirely sure why, but it needed the first "should" statement. I got around VUE adding the sequence of numbers and letters by just asking for the name of the file without the extension. I hope this maybe helps someone else as the documentation did not seem to cover this.
you can use only one should statement like:
cy.get('form').find('img').should('have.attr', 'src', 'My-Logo')
the third arg of should is the value to match with the element attribute.
TinyMCE and SVG
I'm using the latest/current TinyMCE editor (<script type="text/javascript" src='https://cdn.tinymce.com/4/tinymce.min.js'></script>) and it doesn't seem capable of displaying <svg>. I have some HTML saved in a database which contains some <svg>. When loaded in TinyMCE, it doesn't display. Is this a known issue (I've searched and haven't found much)? Any workarounds?
TinyMCE strips empty and invalid tags. You can solve it by
Adding ' ' to each empty element:
svg.find('*').each(function() {
if (!$(this).html()) {
$(this).text(' ');
}
});
here svg is your jQuery wrapped svg element.
Extending the valid elements according to the svg element reference*
extended_valid_elements: "svg[*],defs[*],pattern[*],desc[*],metadata[*],g[*],mask[*],path[*],line[*],marker[*],rect[*],circle[*],ellipse[*],polygon[*],polyline[*],linearGradient[*],radialGradient[*],stop[*],image[*],view[*],text[*],textPath[*],title[*],tspan[*],glyph[*],symbol[*],switch[*],use[*]"
*Note I added only the elements relevant for my case.
I tried Koen's first suggestion and it worked for existing SVG content (I added this in the setup callback). However it still filtered the SVG tags out when pasting HTML into the source code editor and then confirming the dialog. After digging a bit into TinyMCE's source code to see where those elements are actually removed (it's in the DomParser class) I found an undocumented editor setting for the Schema class that specifies tags that are allowed to be empty without being removed. The only annoying thing is that you can't use it to add to the existing list, you can only override it. So when setting it you have to list the tags it has in there by default as well. Use this in the settings that you provide to TinyMCE when initialising it: // First the list of tags that it normally knows about by default: non_empty_elements: "td,th,iframe,video,audio,object,script,pre,code,area,base,basefont,br,col,frame,hr,img,input,isindex,link,meta,param,embed,source,wbr,track" // Now we add tags related to SVGs that it doesn't normally know about: + "svg,defs,pattern,desc,metadata,g,mask,path,line,marker,rect,circle,ellipse,polygon,polyline,linearGradient,radialGradient,stop,image,view,text,textPath,title,tspan,glyph,symbol,switch,use", This way these SVG tags should never be filtered out because they are empty - as long as they are also valid in general, e.g. by setting the extended_valid_elements as Koen suggested above or by allowing all elements (not recommended as it leaves you vulnerable to XSS attacks): extended_valid_elements: "*[*]" Please note that this worked for my version 4.5.8 of TinyMCE. Since this setting is undocumented it might not work anymore in current or future versions. Also they might've adjusted the default list that I'm overriding here in later versions. Find nonEmptyElementsMap and shortEndedElementsMap in Schema.js in their source code to find the default list in your version (the two lists get combined) and note that in there the tags are separated by spaces but when you supply a list yourself the list is separated by commas (for whatever reason).
Seams to be TinyMCE that removes it because it is an empty tag: http://world.episerver.com/forum/developer-forum/-EPiServer-75-CMS/Thread-Container/2015/1/tinymce-and-svgs/ You might be able to use this inside the init: extended_valid_elements : "svg[*]", It works with other empty tags etc, but have never tried with SVG. From the forum post I linked to: ok,I did some debugging into TinyMCE and the problem seems to be that the svg element is detected as being empty and therefor removed. Unfortunatley there is no config way to change this behavior but there are some workarounds. Always have a name attibute for the svg element: <svg name="something" Always have a data-mce attribute for the svg element: <svg data-mce-something="something" Include some text content within the svg element: <svg> </svg> Using these techniques i could succesfully store inline svg in an xhtml property
I made it work by adding all valid SVG elements to the extended_valid_elements property of the settings object while initializing TinyMCE, no other action was needed For your convenience here's the full list of SVG elements I used a[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],animate[*],animateMotion[*],animateTransform[*],circle[*],clipPath[*],color-profile[*],cursor[*],defs[*],desc[*],ellipse[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDistantLight[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],fePointLight[*],feSpecularLighting[*],feSpotLight[*],feTile[*],feTurbulence[*],filter[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],foreignObject[*],g[*],glyph[*],glyphRef[*],hkern[*],image[*],line[*],linearGradient[*],marker[*],mask[*],metadata[*],missing-glyph[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialGradient[*],rect[*],script[*],set[*],stop[*],style[*],svg[*],switch[*],symbol[*],text[*],textPath[*],title[*],tref[*],tspan[*],use[*],view[*],vkern[*],a[*],animate[*],animateMotion[*],animateTransform[*],circle[*],clipPath[*],defs[*],desc[*],discard[*],ellipse[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDistantLight[*],feDropShadow[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],fePointLight[*],feSpecularLighting[*],feSpotLight[*],feTile[*],feTurbulence[*],filter[*],foreignObject[*],g[*],hatch[*],hatchpath[*],image[*],line[*],linearGradient[*],marker[*],mask[*],metadata[*],mpath[*],path[*],pattern[*],polygon[*],polyline[*],radialGradient[*],rect[*],script[*],set[*],stop[*],style[*],svg[*],switch[*],symbol[*],text[*],textPath[*],title[*],tspan[*],use[*],view[*],g[*],animate[*],animateColor[*],animateMotion[*],animateTransform[*],discard[*],mpath[*],set[*],circle[*],ellipse[*],line[*],polygon[*],polyline[*],rect[*],a[*],defs[*],g[*],marker[*],mask[*],missing-glyph[*],pattern[*],svg[*],switch[*],symbol[*],desc[*],metadata[*],title[*],feBlend[*],feColorMatrix[*],feComponentTransfer[*],feComposite[*],feConvolveMatrix[*],feDiffuseLighting[*],feDisplacementMap[*],feDropShadow[*],feFlood[*],feFuncA[*],feFuncB[*],feFuncG[*],feFuncR[*],feGaussianBlur[*],feImage[*],feMerge[*],feMergeNode[*],feMorphology[*],feOffset[*],feSpecularLighting[*],feTile[*],feTurbulence[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],hkern[*],vkern[*],linearGradient[*],radialGradient[*],stop[*],circle[*],ellipse[*],image[*],line[*],path[*],polygon[*],polyline[*],rect[*],text[*],use[*],use[*],feDistantLight[*],fePointLight[*],feSpotLight[*],clipPath[*],defs[*],hatch[*],linearGradient[*],marker[*],mask[*],metadata[*],pattern[*],radialGradient[*],script[*],style[*],symbol[*],title[*],hatch[*],linearGradient[*],pattern[*],radialGradient[*],solidcolor[*],a[*],circle[*],ellipse[*],foreignObject[*],g[*],image[*],line[*],path[*],polygon[*],polyline[*],rect[*],svg[*],switch[*],symbol[*],text[*],textPath[*],tspan[*],use[*],g[*],circle[*],ellipse[*],line[*],path[*],polygon[*],polyline[*],rect[*],defs[*],g[*],svg[*],symbol[*],use[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],glyph[*],glyphRef[*],textPath[*],text[*],tref[*],tspan[*],altGlyph[*],textPath[*],tref[*],tspan[*],clipPath[*],cursor[*],filter[*],foreignObject[*],hatchpath[*],script[*],style[*],view[*],altGlyph[*],altGlyphDef[*],altGlyphItem[*],animateColor[*],cursor[*],font[*],font-face[*],font-face-format[*],font-face-name[*],font-face-src[*],font-face-uri[*],glyph[*],glyphRef[*],hkern[*],missing-glyph[*],tref[*],vkern[*]
How do I prevent MathJax from showing raw TeX while waiting for rendering to complete?
I have some MathJax on my webpage and would like nothing to appear until the MathJax has finished processing my equations: no raw LaTeX and no loading progress indicator. Is there a way to accomplish this with MathJax configuration settings?
Hey if you still need an answer, try the following.
If you call MathJax.Hub.Config(), pass the parameter preview: "none" to the tex2jax object in the config. Like so:
MathJax.Hub.Config({
tex2jax:
{
preview: "none"
}
});
This will not show any raw tex commands that MathJax will pick up. It will allow to you still display other elements in your markup so your page doesn't look blank as the browser renders it.
Hope this helps.
data-bind is not working in jquery
I must not be using jsfiddle correctly. Because I am having problems with a more complex project I have decided to go back to the intro and see if there is something I missed.
I am using PluralSight videos to get up to speed with knockout.
In the intro demo Steve Michelotti has a fiddle in which he is binding data in jquery prior to adding knockout. I can't seem to get this binding to work. The fiddle is here
http://jsfiddle.net/SapphireGirl/Bdr55/2/
This is a very simple example and I would expect to see the
Hello, bob in the run box but the name is not binding the the text in the view model even in jquery like it is shown in the demo.
He is using jquery 1.7 while I am using jquery 2.0
Why won't my name bind?
Something silly I am sure.
javascript:
$(function(){
var viewModel = {
name: "bob",
changeName: function() {
this.name = "steve";
}
};
ko.applyBindings(viewModel);
});
Thanks in advance
You say In the intro demo Steve Michelotti has a fiddle in which he is binding data in jquery prior to adding knockout. I can't seem to get this binding to work. but in your code sample you're explicitly referencing ko - the Knockout object. The problem is that you want to use both JQuery and Knockout - so far you've chosen 'JQuery 2.0' as the framework for your page, but you haven't loaded Knockout anywhere. Go to the 'External Resources' section on the left, and paste 'http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js' (one of the Knockout CDN urls - from their download page) and press the '+' to add it to your jsfiddle. Press 'Run' and now everything should work.