Did you know how to create dropdown with tooltip in sharepoint form?
Could you please suggest me best way to accomplish this functionality.
Thanks.
We can use jQuery code to achieve it, add the code below into a script editor web part in the new/edit form page.
<script src="//code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
var fieldname="PC Model Required Field";// modify the fieldname
$("select[title='"+fieldname+"'] option").each(function(){
$(this).attr("title",$(this).val());
});
});
</script>
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 using the following command to generate forms with WTForms:
{{ wtf.quick_form(form)}}
I have a number of required fields, however I do not want to use the HTML5 required tag attributes because it results in an ugly style and user experience.
How can I remove the required attributes from my tags on the DOM?
Maybe you can use JQuery ?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function(){
$("form").each(function(){
$(this).find(':input').each(function(){
this.removeAttr('required');
});
});
});
</script>
I'm implementing Ace text editor into a form partial that I'm using for all my settings. The form id is something like "edit_setting_#{#setting.id}". I've got the text editor substituting for the field and it works perfectly when I hard-code the form id. How do I set it dynamically?
<script>
$(document).ready(function(){
var editor = ace.edit('editor');
editor.setTheme('ace/theme/twilight');
$('#setting_value').hide();
$("#edit_setting_16").submit(function(){
$('#setting_value').val(editor.getSession().getValue());
});
});
</script>
I was over-complicating it.
<script>
$(document).ready(function(){
var editor = ace.edit('editor');
editor.setTheme('ace/theme/twilight');
$('#setting_value').hide();
$("#edit_setting_<%= #setting.id %>").submit(function(){
$('#setting_value').val(editor.getSession().getValue());
});
});
</script>
One of my child template is rendering in all routes/links when I click on the browser back/forward button. My route is defined as :
this.resource('analytics', {path: '/analytics'}, function(){
this.resource('analyticsRuns', {path: ':exerciseRunId/analyticsRuns'},function(){
this.resource('analyticsRun',{path: ':runId'});
});
});
and my templates are as follows :
<script type="text/x-handlebars" data-template-name="analytics">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="analytics/index">
some content in analytics index
</script>
<script type="text/x-handlebars" data-template-name="analyticsRuns">
{{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="analyticsRuns/index">
some content in analytics runs index
</script>
<script type="text/x-handlebars" data-template-name="analyticsRun">
some content in analytics run index
</script>
My templates are more complex than these but I wanted to give you a gist of what issue I am facing. So when I go from analytics to analyticsRuns and to browser back , then there are no issues, but when I go from analytics -> analyticsRuns -> analyticsRun and then go back to analytics using browser back button, the analyticsRuns template shows up after the analytics template is rendered. Now if I do forward, the analyticsRuns template seems to be appended in all the other routes. I am not sure if I am defining my handlebars wrong which is causing this issue, or maybe the problem lies somewhere else. But if you have any suggestion on how to avoid this issue then I would appreciate it a lot.
In my app setup, "analytics" is not actually a parent resource. Analytics just provides a filter value to "analyticsRuns" by which the master/parent data is loaded.
Thanks,
Dee
I don't know if this will be help to others, but in my case the problem was due to bad HTML markup(I was missing a closing div in one of the templates).
What is the appropriate way to include a Google AdSense banner in an Ember (Handlebars) template?
Say I have a template for a view that looks like this:
<script type="text/x-handlebars" data-template-name="myPageWithBanner">
<div id="mainContent">
Lorem ipsum main content
</div>
<div id="banner">
//Normally I would insert a script tag here, but that is not possible
</div>
</script>
Do I need to do this from code using pre-compiled templates, or is there a way I am not aware of?
I don't have a Google AdSense account, so I can't test this. But there are several major problems here:
You can't include a <script> tag inside a Handlebars template, not even if you use CDATA.
Google AdSense requires the AdSense JavaScript to appear verbatim in your page, or it's a TOS violation.
According to this StackOverflow answer, AdSense on AJAX sites is poorly supported at the moment.
The Google AdSense crawler won't be able to see any content on your page, so I doubt that ad-targeting is going to work. But see below for some things which might help crawlers.
But I'm going to assume, for the sake of simplicity, that you can discuss TOS issues directly with Google, and I'll just try to solve the technical problems. First, based on this StackOverflow answer, here's one possible solution that allows you to serve up Google's script verbatim:
<script type="text/x-handlebars">
<h1>Ember AdSense</h1>
{{outlet}}
<div id="ads"></div>
</script>
<script type="text/x-handlebars" data-template-name="index">
<p>Hello, world!</p>
</script>
<div id="ads-load" style="display: none">
<!--
Apparently this needs to appear verbatim, exactly as Google gave it to
you, or it's a TOS violation.
-->
<script type="text/javascript"><!--
google_ad_client = "ca-pub-XXXXXXXXXX";
/* Test Ad */
google_ad_slot = "XXXXXX";
google_ad_width = 250;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
Then when our main template loads, we use jQuery to move the ads into our application template:
window.App = Ember.Application.create();
// Explicitly declare the view class for our application view.
App.ApplicationView = Ember.View.extend({
// Called once the view is rendered.
didInsertElement: function () {
$('#ads-load').appendTo("#ads").css("display", "block");
}
});
As for allowing the Google crawler to see you content, Google has official advice for AJAX applications, but I don't know whether that works with the AdSense crawler. Alternatively, if you're using pushState to update your displayed URLs, then you need to make sure that each of those URLs can be rendered by your server when requested by a crawler. (The Discourse forum software does exactly this.)
Please let me know if it gets you any closer.