Question

External Jquery Plugin Issue

Forms

Updated July 22, 2016

asked on July 22, 2016

I am trying to implement FancyInput to multi line fields but with no luck so far. I have added External CSS and JS and they seem to be at the right place in final html but it just doesn't seem to work. This is what i am doing.

$(document).ready(function () { 

  
$('head').append('<link rel="stylesheet" href="http://yaireo.github.io/fancyInput/styles.css" type="text/css" />');
$('head').append('<link rel="stylesheet" href="http://yaireo.github.io/fancyInput/fancyInput.css" type="text/css" />');
  
var script = document.createElement('script'); 
script.src = "http://yaireo.github.io/fancyInput/fancyInput.js";
document.getElementsByTagName('head')[0].appendChild(script);  

  
$('.feedback-text').fancyInput();
  
  
})

Please let me know how i could make it work.

Thanks in Advance

Junaid Inam

0 0

Answer

SELECTED ANSWER

replied on July 22, 2016 • Show version history

Hmm, I see what you mean. Problem seems to be the <link> elements and not the <script> element. I can get it to work without issue by keeping the script part in the HTML, but moving the <link> parts back into the javascript like you had originally. So HTML:

<script src="http://yaireo.github.io/fancyInput/fancyInput.js"></script>

and Javascript:

$(document).ready(function () { 
  
  $('head').append('<link rel="stylesheet" href="http://yaireo.github.io/fancyInput/styles.css" type="text/css" />');
  $('head').append('<link rel="stylesheet" href="http://yaireo.github.io/fancyInput/fancyInput.css" type="text/css" />');

  $('.feedback-text textarea').fancyInput();
  
});

1 0

Replies

replied on July 22, 2016

Why don't you try just adding a custom HTML section to your form with this:

<link rel="stylesheet" href="http://yaireo.github.io/fancyInput/styles.css" type="text/css">
<link rel="stylesheet" href="http://yaireo.github.io/fancyInput/fancyInput.css" type="text/css">
<script src="http://yaireo.github.io/fancyInput/fancyInput.js"></script>

And then shorten your JavaScript to this:

$(document).ready(function(){
  $('.feedback-text textarea').fancyInput();
});

1 0

replied on July 22, 2016

Thanks that's a great idea. It does make it work but i think there is some kind of conflict happens in the editor when i add links and script to Custom HTML. It distorts the editor in chrome.

Final preview is also not proper.

Does it work perfectly for you?

0 0

SELECTED ANSWER

replied on July 22, 2016 • Show version history

<script src="http://yaireo.github.io/fancyInput/fancyInput.js"></script>

and Javascript:

$(document).ready(function () { 
  
  $('head').append('<link rel="stylesheet" href="http://yaireo.github.io/fancyInput/styles.css" type="text/css" />');
  $('head').append('<link rel="stylesheet" href="http://yaireo.github.io/fancyInput/fancyInput.css" type="text/css" />');

  $('.feedback-text textarea').fancyInput();
  
});

1 0

replied on July 22, 2016 • Show version history

The reason for this may be some sort of order of operations; when trying to implement FancyInput in a test HTML document outside of Forms, I had to put it beneath another external JavaScript reference to jQuery. With Forms it might be that the jQuery reference is not finished parsing enough for the script to be recognized; by putting the FancyInput JavaScript reference in the <head> element, I was getting console errors that "fancyInput()" was not a defined function.

Regarding the <link> elements to load the stylesheets, that is definitely an order of operations thing, as otherwise what is happening is:

In the <head> element, the "fancyInput()" call is made for designated elements.
The script referenced in the custom HTML field provides the definition for this function, and assigns a series of CSS rules.
After the page finishes loading, (too late!) the CSS rules become available.

In general, this is why it is good practice to leave all <link> elements in the <head> element instead of the <body> element. If instead of using JavaScript to manually insert <link> elements into the header to call these files, you could instead use the CSS @import rule in the custom CSS area:

@import url("http://yaireo.github.io/fancyInput/styles.css");
@import url("http://yaireo.github.io/fancyInput/fancyInput.css");

Edit: I've never before seen URLs in the code environment on Answers try to add anchor tags before...

2 0

You are not allowed to follow up in this post.

Question

Question

External Jquery Plugin Issue

Answer

Replies

Sign in to reply to this post.