implementing a simple jquery function to the django admin site - javascript

Greetings
I have extended my admin add screen (tabularinline) by using the http://www.djangosnippets.org/snippets/1594/
Now I have a field in my model:
start = models.CharField(max_length=5)
this is intended as a special time format, it will be in a HH:MM format such as 16:30 . Now I want to implement a way that site auto assigns ":" between those numbers and for that I have found this jquery application: http://digitalbush.com/projects/masked-input-plugin/
When I check my admin add panel by firebug, I see that the field that I want to implement this masking function is:
<input id="id_outage_set-0-start" class="vTextField" type="text" maxlength="5" name="outage_set-0-start"/>
where "id_outage_set-0-start" is increased each time I add new.
Now I am looking for a way to implement these 2 together, I am a jquery newbie thus really lost at it.
Regards

This should apply the mask plugin to all inputs with an id that begins with id_outage_set. Is that what you are after?
jQuery(function($){
$("input[id*='id_outage_set']").mask("99/99/9999",{placeholder:" "});
});

A good approach would be to define your own Widget, whose HTML rendering applies the JQuery mask.
Stuart Langridge gives some infos on how to change a field widget in the Admin interface : http://www.kryogenix.org/days/2008/03/28/overriding-a-single-field-in-the-django-admin-using-newforms-admin
That would be a good idea to package this into a small django app.

Related

Xpages getting filtered data in a view without a search box

I'm new to Xpages and i'm currently learning how to work with it, I'm using the newest version of domino database and domino designer.
I have created a view which has column (can't post a picture)
[Name][Date from][Date to][Value][Name of the driver]
[#####][02/01/2015][NULL][######][#######]
[#####][02/01/2015][NULL][######][#######]
[#####][02/01/2015][05/05/2015][######][#######]
Everything works.
But now what i want is every time i open this view i want it to show data that has a NULL value in Date to. That would mean that the third row won't be shown in the view. The reason is that when i work that each document that has a NULL value in Date to has to be edited and must be given a value by end of the day, and removed from the first view.
How can i do that, can you give me an example or a guide where i can find a solution. I searched everywhere and can't find anything.
Could you change the view Selection formula to exclude all documents that have a Date To set e.g. append & DateTo = "" or & #Text(DateTo) = "" to your formula? It will probably be something like: SELECT Form="DriverForm". Sorry, I can't remember whether the #Text part is required, but you could try both and see which works.
Could you base your XPage on a Full Text Search? There is an "IS PRESENT" option to look for non blank fields. I assume you can negate that as well. Some good searching information on this blog post: http://lostinxpages.com/2014/05/15/exporting-to-excel-using-queries-in-xpages/

Datetime picker with default initial value (basic Html & Javascript only)

I want to have a datetime picker with default value (Date.now) but I am restricted javascript only (no jquery).
I managed to pull it off with a hack, is there a better way to do this?
HTML
<input type="text" id="inputDate">
Javascript
var dateField = document.getElementById("inputDate");
var date = new Date();
dateField.setAttribute("type", "datetime-local");
dateField.setAttribute("value", date.toISOString().slice(0, 19));
I wonder if this works in all browsers, only tried it in Chrome.
Here you have a link that may be helpful for you. It shows you the browsers that accept the inputs with type "date".
http://caniuse.com/#feat=input-datetime
In order to make it more "crossbrowser", you should consider to use jQuery-UI datepicker (http://jqueryui.com/datepicker/). It is really easy to use.
The new input types to HTML5 are new, which makes them very restrictive and hard to use. They are hard to manipulate, style and customize.
I would use an html simple textbox with a "man-made" down arrow that you can click and populate your calendar (or whatever you would like to show). This can all be done with simple javascript and textBox.
I have a calendar datepicker pure javascript which I use over and over again because I can make it do whatever I would like it to do.

How to use Django-ratings with bootstrap-rating-input

Here goes another star rating question. I want to use bootstrap-rating-input to input rating value (1 to 5) and have django-ratings save the rating to the database. Although I'm a little green with javascript, I really want users to be able to vote using star rating instead of a number input form. Could you show me how to hook up these two apps to make them play nice with each other?
What does the view and templates look like?
And how do I configure the javascript to make the whole thing work?
Thanks!
OK, boostrap-rating-input is not specifically for django, meaning you will have to do some work to get it going.
I suggest you create a widget for it based on the django-bootstrap-datetime-picker which has implemented a similar bootstrap input field to work nicely with django.
Once that is done, you will be able to add a ratinginput widget to your form which will automatically return a number when the form is submitted, as for django ratings, as long as you have a rating = RatingField(range=5) field in your models you can override it with a rating = ratingWidget() and everything else should take care of itself.
I might try implement the widget later today.
Add this in your head part for test:
<script src="https://raw.githubusercontent.com/javiertoledo/bootstrap-rating-input/master/src/bootstrap-rating-input.js"></script>
now add this code where you want to give a rating
<input class="my_class rating" data-clearable=""
data-max="5" data-min="1" id="some_id"
name="your_awesome_parameter" value=""
type="number"
onchange="console.log($('input.my_class').rating().val())"/>
and simply you get the no. of rating in console now make a ajax call and add it to your DB .
Note: In case when you try static ratings for user view use code like that
max.times do |i|
%i{class: "glyphicon glyphicon-star#{'-empty' if i>val}"}
remember download bootstrap-rating-input.js file after success

Splitting one text-field into two with Javascript, validate it, then merge it back again

A client is asking that a textfield containing phone-number data be split into two -- one for country code, the other for the rest of the number.
Alas, this field is pretty hard-coded into the system and all data collected thus far has been as one consolidated field (and thus saved as one column in the database).
I'm thus thinking the best answer might be to do the following:
Using Javascript, replace the single text field with two text fields.
These then become merged back into the original text field when the user clicks the submit button.
Bonus marks if there's a way to separate that field back into two again when it's read from the database (I.e., when an administrator views the entry). Note that the data format must be consistent -- I don't want to mix the existing string data with, say, a bunch of JSON strings.
Is this the best way to go about this? Are there any foreseeable problems (beyond the user not having JavaScript enabled) with this approach? Is there a jQuery plugin that's designed to do stuff like this?
I also need to validate it as a valid phone number at some point, but I can figure that out myself.
Rather than splitting the text field into two, you may use the masked input JQuery plug-in
http://digitalbush.com/projects/masked-input-plugin/
$(document).ready(function(){
$("#phone").mask("(999)999999");
});
Sample JS : http://jsfiddle.net/vGeMV/3/
Edit:
For point 3 : If you want to really split the number into two and display it, you may split it from the right (usually 7 digits) rather than left so that even if country code is present or not, you will get the correct split.
If you dont want to use a plugin you can always check out this snippet I made on jsFiddle
If you want to make sure it works in the JS just change the display:'none' to display:'block'
here is my JavaScript
$(function() {
$('#phone').css({ display:'none' });
$('#phone').after(') <input type="text" name="phoneMainNumber" id="phoneMainNumber" />').after('(<input type="text" value="555" name="phoneAreaCode" id="phoneAreaCode" style="width:30px;" />');
bindChange();
});
function bindChange() {
$('#phone').val('('+$('#phoneAreaCode').val()+') ');
$('#phoneMainNumber, #phoneAreaCode').keyup(function() {
$('#phone').val('('+$('#phoneAreaCode').val()+') '+$('#phoneMainNumber').val());
});
}

How to hide a field in SharePoint Display Form based on the field name (jQuery)?

I have a SharePoint list with the following single line of text fields: Title, Year and Type or Location. I want to be able to hide the Type or Location table row in the default display form. I know that I should create a JavaScript script and put it in Content Editor web part inside DispForm.aspx.
I am not fluent with jQuery syntax, thus I need help with the code, i.e. I don't know how to reference the table row which contains Type or Location field and its value. Here's what I've done so far, but it doesn't work:
jQuery(document).ready(function($) {
$("input[title='Type or Location']").closest("tr").hide();
});
I know that the "input[title='Type or Location']" part is incorrect; at least I think it's that. Could anyone help me out? Thank you.
Try:
jQuery(document).ready(function($) {
$("h3.ms-standardheader:contains('Type or Location')").closest("tr").hide();
});
I am not sure why you want to use jQuery for that. In SharePoint, you can choose to make a field required, optional or hidden. In most cases, just switching to hidden will address your issue.
For the record, I would also try to avoid as much as possible the use of jQuery(document).ready, it might conflict with the SharePoint out of the box onload event. In your case it is not needed.
Update: here is a way to do this with jQuery:
$("td.ms-formlabel:contains('Type or Location')").parent().hide();
Try it this way:
jQuery(document).ready(function($) {
$("input[title='Type'],input[title='Location']").closest("tr").hide();
});
It depends what type of column Type ior Location is. If it's a Single line of text, then you're close. You should use a DOM inspector like IE's Developer Tools or Firebug to see what the actual title of the input element is.
If the column is a different type, then it's likely not an input element. Using the DOM inspector again, you can look at what elements make up the field control and decide on your selector from that.
Finally, remember that hiding things in script is not secure. A savvy user can turn off the script or otherwise change the script so that they can edit it. It all depends on your requirements.
// UPDATE //
Ah, you said DispForm. As was pointed out in another answer, there aren't any input elements in a DispForm. You need to correct your selector.
If its just the Default Display Form, How about just creating a view and making it default?
The syntax should be like this:
$("input[title='Type']").closest("tr").hide();
$("input[title='Location']").closest("tr").hide();
It will work.

Categories

Resources