Im trying to use guppy wyswyg javascript plugin for mathematical expressions rendering. I went to its basic example at its webpage https://guppy.js.org/site/examples/basic/, but i cant deploy it at my local xampp proyect.
According to the example, i already set these dependencies (different paths in my proyect):
<link rel="stylesheet" href="localhost/lib/build/guppy-default.min.css">
<script type="text/javascript" src="../../../build/guppy.min.js"></script>
And then this:
Guppy.init(
{
"path":"http://localhost/lib/guppy",
"symbols":"http://localhost/lib/guppy/sym/symbols.json"
}
);
Finally this:
<input type="text" id="myinputtypeelementid" placeholder="Type math here" >
var g1 = new Guppy("myinputtypeelementid");
I just can see this:
Does anybody know what else i need to do?
Issue solved:
It just needed use a <div> tag with the right id instead o a <input> tag. Now it works ! I reply myself in case anybody gets benefit of this issue i faced.
Related
I found the Awesomplete JavaScript/jQuery plug-In here. It's a combobox/drop-down list widget that displays a list of case-less matches while the user types characters into a input text element. The provided link shows the section of the widget's web-page that shows how multiple entries can be entered into the input element, which is exactly what I need. A live-demo in this section shows that the widget works.
Unfortunately, the examples shown at the Awesomplete web-page don't provide a complete example of how to properly use the widget, so I cobbled the following together in order to begin integrating it into my own web-page, but my attempt gets an error when the script tries to create the Awesomplete object, saying:
awesomplete.html: 61 Uncaught ReferenceError: Awesomplete is not defined
at awesomplete.html: 61
(anonymous) # awesomplete.html: 61
Here is my code:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Awesomplete: Multiple values</title>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script src="awesomplete.js" async></script>
<link rel="stylesheet" href="awesomplete.css" />
<style>
.visually-hidden { display: none; }
</style>
</head>
<body translate="no" >
<h2>Awesomplete: Multiple values</h2>
<label for="browserInput">browser List: </label>
<input type="text" id="browserInput"
style="width: 245px;"
maxlength="100"
autocomplete="off"
autofocus
required
placeholder="Enter browser name(s)."
title="Enter the name of one or more browsers
or press space to see all choices."
multiple
data-multiple
data-list="#browsersList"
data-minchars="1"
data-maxitems="100"
data-autofirst
aria-expanded="false"
aria-owns="awesomplete_list_2"
role="combobox" />
<ul id="browsersList" hidden>
<li>Zebra</li>
<li>Safari</li>
<li>Opera</li>
<li>Microsoft Internet Explorer</li>
<li>Microsoft Edge</li>
<li>Google Chrome</li>
<li>Firefox</li>
</ul>
<ul id="awesomplete_list_2" hidden
role="listbox"
aria-label="Results List">
</ul>
<span class="visually-hidden"
role="status"
aria-live="assertive"
aria-atomic="true">
Type one or more characters for results.
</span>
<script>
// Show label and insert label into the input:
// ***** The error occurs when the next line executes ***** //
new Awesomplete( 'input[data-multiple]',
{
filter: function( text, input ) {
return Awesomplete.FILTER_CONTAINS(
text, input.match( /[^,]*$/ )[ 0 ] );
},
item: function( text, input ) {
return Awesomplete.ITEM(
text, input.match( /[^,]*$/ )[ 0 ] );
},
replace: function( suggestion ) {
var before = this.input.value
.match( /^.+,\s*|/ )[ 0 ];
this.input.value = before + suggestion.label + ", ";
}
} );
</script>
</body>
</html>
I downloaded the files needed for the <script src="awesomplete.js" async></script> and <link rel="stylesheet" href="awesomplete.css" /> lines to my computer before trying to run my web-page. You may do the same using this link to show the top section of the Awesomplete web-page and then clicking on the Download button.
In my initial test web-page using this widget, I used class="awesomplete" setting in the input element as suggested near the top of the Awesomplete web-page, and it worked, but it only let me enter one value. However, I need to enter multiple matches, but simply adding the multiple and data-multiple attributes to the input element isn't enough to make it work. I then added the script that crates the Awesomplete object and took the class out of the input element, but that's when I started getting the error I showed, above.
Incidentally, having the class in the element didn't work.
After the above works, I'm wondering if the Awesomplete settings in the input element will be used when the Awesomplete object is created in the script or do I need to take then out of the input element and instead explicitly put them in the Awesomplete new call.
Thanks
While putting the above web-page content into codepen.io I found that the javascript file can be found using the codepen's setting js search tool, but the corresponding css file can't when using the css search tool. However, using the URL for the js file, I was able to find the css file. When both of these URLs are added to codepen, my test version worked and did allow multiple choices to be selected in the input element. Finally, was able to copy the script and link statements into my local version of the test web-page, and it also worked. Note, the script statement uses the min.js version, not the full version. I don't know if this is a factor, but for my production site, I want the min.js version anyway.
Here are to two lines needed to make the code I posted here work:
<script src="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/awesomplete/1.1.5/awesomplete.css">
Hope this helps others, too.
I read on the GitHub page about it and successfully tried removing async in line 7.
I have a dropdown menu and want to write data to a field when clicked. I have tested it with regular tags but I am having trouble with the syntax when I am testing a tag from a PLC that is named 'mytag' with these '' around it .
In the HTML document, I have to tell the program that the particular tag is both read and write by doing this:
<!-- AWP_In_Variable Name="webdata".'mytag' -->
'"webdata".mytag' is a tricky name, so I made an alias named 'mytag':
<!-- AWP_In_Variable Name="webdata" -->
<!-- AWP_In_Variable Name='Fortype' Use='"webdata".mytag' -->
Here is an example for a typical application of the tag where it works using it:
:=mytag:
<form method="post">
<input name='mytag' type="text" size=2 />
<button type="submit">Save</button>
</form>
The code for setting values by click works with regular tags like this:
$("#id_from_dropdown_menu").click(function() {
$("#myval").html("10");
});
But the code does not work when I try to use 'mytag', I think it is because of the '' signs.
$("#id_from_dropdown_menu").click(function() {
$("#mytag").html("10");
});
ANY TIPS?
NO worries! Figured it out. Leave post of you get similar problems :)
How can I get Vim to correctly syntax-highlight in a situation such as this (used, e.g. with Knockout templates):
<script type="text/html" id="my-template">
<!-- This should be rendered as HTML -->
<div>Some template</div>
</script>
<script>
//This should be rendered as Javascript
var x = function() { return 3; }
</script>
The solution given here involves editing Vim's internal syntax file, which seems wrong, and it specifically looks for "text/javascript" which is no longer needed in <script> tags.
I assume the solution is some sort of syntax plugin I can keep in my .vim directory but am not familiar enough with Vim's syntax internals to figure it out.
(Note that this question and answer don't apply as I'm not using Ruby on Rails.)
Maybe this will help you: https://coderwall.com/p/vgk5-q/make-vim-play-nice-with-html-templates-inside-script-tags.
In case the link above is broken one day - put the following code into ~/.vim/after/syntax/html.vim:
unlet b:current_syntax
syn include #HTML $VIMRUNTIME/syntax/html.vim
syn region htmlTemplate start=+<script [^>]*type *=[^>]*text/template[^>]*>+
\ end=+</script>+me=s-1 keepend
\ contains=#HTML,htmlScriptTag,#htmlPreproc
Somebody should write a plugin for that! ;)
First copy the vim's internal html syntax file to $HOME/.vim/syntax/html.vim so that you only change the behaviour for yourself not globally.
Then find the line starting syn region javaScript and replace it with two lines
syn region script_notype start=+<script>+ keepend end=+</script>+me=s-1 contains=#htmlJavaScript,htmlCssStyleComment,htmlScriptTag,#htmlPreproc
syn region script_jstype start=+<script[^>]*type="text/javascript"[^>]*>+ keepend end=+</script>+me=s-1 contains=#htmlJavaScript,htmlCssStyleComment,htmlScriptTag,#htmlPreproc
The first line is for plain <script> tab, the second for <script type="text/javascript">.
However, this won't cover a situation with <script> tag without type attribute having other attributes. This case should get javascript syntax but won't. I guess this is a minor problem.
I have a file upload field,that is,<s:file> </s:file>. And I have a button "clear". On clicking this button, the field which has some file link should become empty.Could anyone help me with this?
My code:
<s:file id="filetestplanid2" name="testPlanDto.testFile" label="test"
tooltipIconPath="../../KY/images/common/buttons/uploadBtn.png"
title="Browse" tooltip="Browse..." cssClass="file" />
My javascript:
$('#filetestplanid2').val(null);
$('#filetestplanid2').val("");
I tried these but no luck.
Also tried:
var file = $("#filetestplanid2"); file.replaceWith(file = file.clone(true));
$('#filetestplanid2').html( $('#filetestplanid2').html() );
Assuming
<input type="button" onclick="clearFileElement('filetestplanid2');" />
Vanilla JS
function clearFileElement(fileId){
document.getElementById(fileId).value = '';
};
Demo: http://jsfiddle.net/2nxGr/
Can't make it works with jQuery but basically you have to substitute it with a clone of itself (with all the properties, gained using clone(true)).
Just stick to the plain JS version, it works like a charm.
EDIT
I've found now a very smart solution that works on every browser: https://stackoverflow.com/a/13351234/1654265
You can make it empty using Jquery too, just like this:
$("#filetestplanid2")[0].value = ""
or
$("#filetestplanid2").get(0).value = ""
I'm trying to run a piece of JavaScript code on completion of a song in the <cfmediaplayer> tag but whenever i put "playNext()" into the onComplete attribute it provides me with an error telling me it must be a proper name, but that is the proper name? Anybody know where i might be going wrong?
<script type="text/javascript">
function playNext(){
<cfoutput>
var #ToScript(URL.current, "trackNo")#;
</cfoutput>
trackNo++;
$("#" + trackNo).click();
}
</script>
<div style="margin: 0 auto; width: 500px;">
<cfoutput query="getmusic" maxrows="1">
<cfmediaplayer name="musicPlayer" source="/artists/music/#music_location#" autoplay="yes" height="500" width="500" title="#artist_name# - #music_name#" onComplete="playNext"></cfmediaplayer>
</cfoutput>
</div>
This is my code, however i just noticed (using the Web Developer toolbar) that it is saying playNext is undefined, yet clearly i DO have it defined there as displayed. I'm wondering what I may have done wrong, as far as i'm aware my JavaScript looks OK but i'm a novice when it comes to JS so i've probably made a simple mistake.
use onComplete="playNext" not "playNext()"
Try calling "playNext()" in the onComplete attribute as playNext with no quotations or brackets. If that does not work use playNext(). Let me know if that helps.
I could be wrong but I think it has to do with a CFIDE mapping.
The CFIDE/Scripts folder is needed for a lot of the client side controls ColdFusion creates.
Some CFForm elements like the date picker, multiple file upload, cfajaxproxy, cfmediaplayer, etc require these scripts to be mapped or copied to the site.
Here is a SO question that may help.
Workaround for CFIDE Not Web Accessible for AJAX and Flash Built-Ins
Here is a general google search on the subject.
Try a simple script to mute the player you get any 'Coldfusion is undefined' errors. something like
<script language ="javascript">
ColdFusion.Mediaplayer.setMute('musicPlayer', true);
</script>