I am attempting to render the HTML in a tooltip, but unfortunately its not working at all.
This is how it has been programmed:
<div class="someField"></div>
<script>
$(function () {
$('.someField').append('(Example)');
$("body").tooltip({html:true,selector: '[data-toggle=tooltip]'});
});
</script>
I have set data-html="true" in the link and furthermore enabled html in the tooltip parameter.
Whats wrong with my code?
UPDATE:
Bootstrap v2.3.1 is used for this project (old framework).
Try this:
$("body").tooltip({ html: true, selector: '[data-toggle="tooltip"]' });
WORKING DEMO
Related
I´m trying to use a date picker widget from a model form in the template. I´ve seen several posts but couldn´t get it working correctly.
The one I´m trying now is: Answered question
Form.py
My form code looks like
class FormularioTareas(forms.ModelForm):
class Meta:
model = Tareas
widgets = {'fecha_limite': forms.DateInput(attrs={'class': 'datepicker'})}
fields = ["destinatario", "titulo", "tarea", "resuelto", "fecha_limite"]
Template
In the template I add this script:
/* Include the jquery Ui here */
<script>
$(function() {
$( ".datepicker" ).datepicker({
changeMonth: true,
changeYear: true,
yearRange: "1900:2012",
});
});
</script>
And have this form call in the html
<div style="background: white;">{{ tareas_form.fecha_limite }}</div>
Jquery
I load Jquery as follows and have no problems detected in the browsers console.
<script src="{% static 'js/jquery-3.2.1.min.js' %}"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
What I get
I found out that the picker is working, but the main text box diplays options down when focused so I didn´t see it. The text box is still behaving as a date picker and as a text box. How can I prevent this?
Any clues welcome. Thanks!
I used autocomplete="off" on the form so the usual text input dropdown options don´t show.
I'm currently working on a rendering in Sitecore 7.2 (MVC) that will show a jwPlayer given a link to a video (either in the Media Library or from an external source, like YouTube). When I add the rendering (with a valid data source) through Presentation Details in the Content Editor everything looks fine, and works perfectly. The trouble that I'm running into right now, though, is that when I try to do the same thing from the Page Editor (with the exact same rendering and data source), nothing is showing up in that placeholder at all.
The part of the rendering that deals with the video is as follows:
#if (Model.VideoLink != null && Model.Image != null)
{
var vidid = Guid.NewGuid().ToString();
<div class="article-video-module">
<p class="video-placeholder-text">#Html.Raw(Model.Heading)</p>
<div id="#vidid">Loading the player...</div>
<script type="text/javascript">
jwplayer("#vidid").setup({
file: "#Model.VideoLink.Url",
image: "#Model.Image.Src",
width: "100%",
aspectratio: "16:9",
sharing: {
link: "#Model.VideoLink.Url"
},
primary: 'flash'
});
jwplayer('videodiv-#vidid').onPlay(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').hide();
});
jwplayer('videodiv-#vidid').onPause(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').show();
});
</script>
</div>
#Editable(a => Model.Description)
}
Other things that might help:
When I comment out everything in the <script> tag above the rendering shows up perfectly.
A reference to jwplayer.js is found on the page (that was my first thought)
Console errors in Javascript:
No suitable players found and fallback enabled on jwplayer.js
Uncaught TypeError: undefined is not a function on jwplayer("#vidid").setup({ and on jwplayer('videodiv-#vidid').onPlay(function () { from above.
How can I get jwPlayer and Page Editor to work nicely with each other?
The issue is that when you add a component through Page Editor, the script is fired before the div <div id="#vidid"> element is added to DOM. Don't ask me why...
The solution is really simple: wrap your javascript code with if condition, checking if the div is already there:
<script type="text/javascript">
if (document.getElementById("#vidid")) {
jwplayer("#vidid").setup({
file: "#Model.VideoLink.Url",
image: "#Model.Image.Src",
width: "100%",
aspectratio: "16:9",
sharing: {
link: "#Model.VideoLink.Url"
},
primary: 'flash'
});
jwplayer('videodiv-#vidid').onPlay(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').hide();
});
jwplayer('videodiv-#vidid').onPause(function () {
$(this.container).closest('.fullbleed-video-module').find('.video-placeholder-text').show();
});
}
</script>
There is also another issue with your code - Guid can start with number, and this is not a valid id for html elements. You should change your code to:
var vidid = "jwp-" + Guid.NewGuid().ToString();
I wouldn't rule out a conflict with the version of JQuery that the Page Editor uses - this usually messes stuff up. There's a good post here on to overcome the issues.
http://jrodsmitty.github.io/blog/2014/11/12/resolving-jquery-conflicts-in-page-editor/
I have some troubles to make Reveal work properly from a dynamic link.
This is working fine if the link is loaded with the page. If the link is appended later on, it won't work:
<div id="deleteConfirm" class="reveal-modal" data-reveal>
Delete Confirm Modal
</div>
<a data-modal="deleteConfirm">Test</a>
JS:
$('body').on('click','a[data-modal]',function(){
$(document).foundation();
$('#deleteConfirm').foundation('reveal', 'open');
});
You need to use reflow. I assume that you are loading some html using ajax which includes a reveal link
If you have div#ajax-content you can use the following javascript
$(document).on('replace', '#ajax-content', function (e, new_path, original_path) {
$(document).foundation('reveal', 'reflow');
});
I'm getting a strange error when I'm trying to save some data.
Uncaught Error: Cannot perform operations on a Metamorph that is not in the DOM.
I've noticed something weird in the actual DOM
<h1>Posts page</h1>
<script id="metamorph-2-start" type="text/x-placeholder"></script>
<script id="metamorph-2-start" type="text/x-placeholder"></script>
<p>...</p>
...
<button data-ember-action="5" class="btn btn-warning">Cancel</button>
<script id="metamorph-2-end" type="text/x-placeholder"></script>
<table class="table table-striped table-hover>
There are two of the same metamorph tags and only one end tag. I've also tried not using the partial (ie having the code sit in the dom). While the duplicate metamorph start tag disappears, when trying to save, the metamorph tag its trying to reference doesn't exist.
Here is a JSBin of my code. the JSBin works, which is promising. The only difference between the jsbin and my code is that I'm using Ember App Kit. My guess is I'm doing something wrong with the ES6 setup. I've posted my controller code here
var IndexController = Ember.ArrayController.extend({
addingNew: false,
actions: {
createAccount: function() {
var account = this.store.createRecord('account', {
name: 'howdy',
});
account.save();
},
showNew: function() {
this.set('addingNew', true);
},
cancelNew: function() {
this.set('name', '');
this.set('addingNew', false);
}
}
});
export default IndexController;
What am I doing wrong to get this error?
I've run into this before when I have html comments enclosing ember tags. Something like:
<!-- {{#if something}}X{{else}}Y{{/if}} -->
I am new to Ember and most likely I am missing something very simple.
Anyway, this is my questions:
I try to add an empty input box to an HTML page the following way ...
...
var view = Ember.View.create({
templateName: 'say-hello',
});
view.append();
...
<script type="text/x-handlebars" data-template-name="say-hello">
{{view App.TextField}}
</script>
However I don't get the input box.
Feedback is appreciated.
Thanks
Ember.TextField instead of App.TextField