Develop Reference

show hide field depend on select value sharepoint online

I have a list of 2 columns, the first one is "City" which is choice type.the second column is "Other" which is a single line of text.
when the user chooses "other " in City I want "OtherCity "column appears, if he chooses another choice, I want to hide.
I write the code using simple javascript, I do not want to use any library just simple code in javascript.
<script type="text/javascript">
function mySelectfunction(){
getValue = document.getElementById("City").value;
if(getValue == "other"){
document.getElementById("OtherCity").style.display ="none";
}else{
document.getElementById("OtherCity").style.display ="block";
}
}
</script>
but it does not work. can you help make it work?
*another question: if the second column which I want to hide type is "lookup " will the code be different?

My test code for your reference,and Choice and lookup column do not need to change the code.
Add a script editor in NewForm,and insert the code into it(replace the column name).
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<script src="https://xxxx.sharepoint.com/sites/dev/SiteAssets/sputility.js">
</script>
<script>
$(document).ready(function () {
// Get a single select dropdown field
var relacionField = SPUtility.GetSPField('CityLookUp');
// create a function to show or hide Rates based on Rate value
var showOrHideField = function() {
var relacionFieldValue = relacionField.GetValue();
// Hide the Rates field if the selected value is Especial
if(relacionFieldValue === 'other') {
SPUtility.ShowSPField('Other')
}
else {
SPUtility.HideSPField('Other')
}
};
// run at startup (for edit form)
showOrHideField();
// make sure if the user changes the value we handle it
$(relacionField.Dropdown).on('change', showOrHideField);
});
</script>
You can download sputility.js here: https://archive.codeplex.com/?p=sputility
Updated:
Did the code above report any error?
JavaScript code:
ExecuteOrDelayUntilScriptLoaded(show,"sp.js");
function show () {
//Get the select element corresponding to column
var selectElement=document.getElementById('CityLookUp').parentNode.parentNode.childNodes[3].childNodes[3].childNodes[0];//chnage coulmn name
//get tr the hidden column located
var trElement=document.getElementById('Other').parentNode.parentNode;//change column name
//hide tr when we get into page,if the default value is 'other' ,do not need this
trElement.style.display='none';
//select change event
selectElement.onchange = function () {
var index = selectElement.selectedIndex;
//get option value
var value = selectElement.options[index].text;
if(value==='other'){
//show tr element
trElement.style.display='';
}else{
//hide tr element
trElement.style.display='none';
}
}
}
The code idea is to find the corresponding select element and decide whether to hide the tr element where column other is located according to the value of option.
Tip: Our page dom structure may be different, so you may need to modify the code according to your page dom structure. You could view your page dom structure by Developer tool.
Test result:

How to update the row indexes of a dynamic table when a row is deleted? [duplicate]

I'm working on making a dynamic HTML table using jQuery. In a table, my user has two interactions:
Append a row
Remove a specific row
The problem with numbering the rows is that if a user removes a specific row, all of the rows following that row need to be renumbered. I would have to select all rows following the removed row and subtract their number by 1.
Is there a better way to go about this?
EDIT: Here's a JSFiddle demonstrating the problem: http://jsfiddle.net/LNXae/2/
I'm aware that an ordered-list would automatically renumber my rows, but I'd rather use a table since the example I'm giving now is pretty boiled-down.

http://jsfiddle.net/mblase75/LNXae/1/
First, wrap the counter number in a <span> with a class for easy finding later:
$new_row.children('td').prepend('Row #<span class="num">' + ($new_row.index() + 1) + "</span>");
Then update all these spans with an .each loop after you remove the desired row. The first argument passed into .each's callback function is a zero-based index number, and the second is the HTML element:
var $row = $(this).closest('tr'),
$table = $row.closest('table');
$row.remove();
$table.find('tr').each(function(i, v) {
$(v).find('span.num').text(i + 1);
});

After the user has appended a row, or deleted one, you just need to iterate over the "number" cells. If we assume that you have a <td> element, we:
1) give them a nice ID, e.g. row_0, row_1, etc...
2) write a function to iterate over them:
function updateRows(){
$('[id*="row_"]').each(function(index){
$(this).html(index + 1); // add +1 to prevent 0 index.
};
};

I have written a jquery plugin which does exactly this, and you shouldnt need to "number" the rows per-se. All you need to do when deleting a row is to pass the index of the row being deleted.
eg, if you have a delete button in a row:
<table>
<tr>
<td> <input type="button" class="delete" value="delete this row" /></td>
</tr>
</table>
The jQuery might look like
$('.delete').click(function(){
var index = $(this).parents('tr').index();
// tell your plugin to delete row "index"
});
The method from my plugin which does this looks something like:
removeRow: function (index) {
return this.each(function () {
var $this = $(this);
var $tbody = $('tbody', $this);
var $tr = $('tr', $tbody).eq(index);
$this.trigger('rowRemoved', [$tr]);
$tr.remove();
});
}

Click button to Edit Table titles

I have a table with Column title. There is also a edit button. If I click the button, Table title should be a Input field with title name as a value in it. Edit button will turn into Save Button.
I can rename the title and Save the new names. I not good in jquery and what I made creating bunch of input fields and I can't save new names. FIDDLE
Any help will save my day. Thanks in advance.
jQuery:
var textInfo = $('.table th').text();
$("html").on('click', '.btn-danger', function() {
$('.table th').append('<input id="attribute" type="text" class="form-control" value="' + textInfo + '" >');
$('.btn-danger').text('Save');
}) ;

Here is a fiddle that solves your problem.
http://jsfiddle.net/has9L9Lh/54/
It uses a common approach of toggling an element's class (or some other attribute), to determine the state of your program. In this case, it determines whether or not the columns are in edit-mode, and changes the button text and th html accordingly.
$("html").on('click', '.btn-danger', function() {
var editMode = $(this).hasClass('edit-mode'),
columns = $('.table th');
if (!editMode){
$(this).html('Save').addClass('edit-mode');
columns.each(function(){
var txt = $(this).text();
var input = $('<input type="text">');
input.val(txt);
$(this).html(input);
});
} else {
$(this).html('Edit').removeClass('edit-mode');
columns.each(function(){
var newName = $(this).find('input').eq(0).val();
$(this).html(newName);
});
}
}) ;

• you should not use id in the append this will create multiple id of the same name.
• use $(".form-control").length to check if it exist. this will solve multiple input when button is clicked multiple times.
• create a new button to submit your change.
• create another click event for the new button.
• than use it $.val() to get input value than pass that value to the new table title. and you are done.
I hope this will point you to the right direction. :D

Javascript placing table rows between rows with greater and smaller ID

I'm building a system which outputs a list of cars on a screen(in a table element). The page loads the updates automatically with an HTTP call to the server.
Every car has an ID, a status and some irrelevant things.
Now when the user loads the page, the cars without the statuses 'maintenance' and 'wrecked' are shown and every five seconds new JSON data will be loaded from the server. If there comes a car out of the maintenance this one should be added to the table. The table is sorted by the car id and here comes the problem.
I have written a bit of pseudo code to clarify my problem:
if (row_with_greater_id_exits && row_with_lower_id_exists) {
place_row_between_firstRowWithGreaterId_and_FirstRowWithLowerId();
} else if (is_row_with_greater_id) {
jQuery('table#cars tbody').append(generatedHtml);
} else if (is_row_with_lower_id) {
jQuery('table#cars tbody').prepend(generatedHtml);
}
The problem is I don't know how to find the first row with a greater id or the first row with a smaller ID. The ID's are not always succeeding because some cars are wrecked and have the status wrecked.
I hope someone here has had a similar problem and can help me on my way to the solution.
Many thanks in advance!

You need to loop over the rows, and compare the ids. When your new row has and ID less than the current row in the loop, insert the new row before the current row, and break the loop.
rows.each(function(i, el) {
if (+newrow.id < +el.id) {
$(el).before(newrow);
return false;
}
})
if (!newrow.parentNode)
rows.parent().append(newrow);
This code assumes rows is a jQuery object that has a collection of all the rows, and newrow is a DOM element representing the new row.
Also assumes that the IDs are simple numbers. Note that numeric IDs are only valid in HTML5.
Personally, I'd just use the native API for this:
var tbody = document.querySelector("tbody");
tbody.insertBefore(newrow, [].reduce.call(tbody.rows, function(bef, el) {
return bef || +newrow.id > +el.id ? bef : el;
}, null));
No need to test for the isFirstLoad. When the tbody is empty, it'll still work. But you'll need a .reduce() shim for older browsers.

I have this: id="car-1" data-id="1"
I'll assume that data attribute is on the tr elements. Obviously you can adapt the following if it is on a cell within a row.
Loop through the table checking each row's id, and insert the new row immediately before the first row that has an id greater than the new one:
// assume newId is the new ID, somehow set from your JSON
var rowInserted = false;
jQuery('#invoices-outstanding tbody tr').each(function() {
var $row = $(this);
if (+$row.attr("data-id") > newId) {
$row.before(generatedHtml);
rowInserted = true;
// break out of each loop
return false;
}
});
if (!rowInserted)
jQuery('#invoices-outstanding tbody').append(generatedHtml);

Add a second function to this jquery?

The following jQuery function filters my table columns by letter. There is an <a> for each letter. I'm not sure how to add another function though to filter column 1 using a different dropdown on the html side.
JavaScript:
function fil(rexp)
{
$('#tablestyle').dataTable().fnFilter(rexp, 0, true, false);
}
HTML:
<div style="float:left;" class="sortalpha">
ALL
| A
| B
<!-- [...] -->
| Z
</div>
What I have tried to do is copy the top part and change fil to fil2 then copy the HTML part and change those to fil2. Is that the correct way?
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Just to give everyone a bit more info, I am using datatables {www.datatables.net} which is a jquery script that presents tables in a nice looking ui with various differnt functions to it like search, filter records per page etc.
I have implemented this mod that someone has listed here >> http://www.datatables.net/forums/discussion/6641/filtering-with-first-letter/p1
It works fine and when I select each letter it filters column 0 using whatever letter I have clicked on. What I am trying to do is have two different filters, one to filter column 0 which is the name of the person, and also another filter that does exaclty the same thing, but for column 1 which is business name, I just wasnt sure how to add the same piece of code twice?.

I don't really know your context, but I would suggest you try using event handlers instead of JavaScript URLs.
So instead of this:
ALL
You could do this:
$('.sortalpha a').on('click', function() {
fil('');
});
Of course, this would make all links filter on ''. To fix that, you could get the text from the <a> that was clicked and use that to call fil(), like so:
function fil(rexp) {
if (rexp.length > 0) {
rexp = '^' + rexp;
}
//$('#tablestyle').dataTable().fnFilter(rexp, 0, true, false);
alert('Filter on: "' + rexp + '"');
}
$('.sortalpha a').on('click', function(event) {
var letter = $(this).text().toLowerCase();
if (letter === 'all') {
fil('');
} else {
fil(letter);
}
});
Here's a working example: http://jsfiddle.net/uzGat/2/
Edit: I updated the answer to account for capital letter and the ^ in the regular expressions.

if the plugin is well written, it must maintain chainbilty so you can do like:
function fil(rexp)
{
$('#tablestyle').dataTable().fnFilter(rexp, 0, true, false).fnFilter(rexp2, 0, true, false);
}