How to display all values using JS? - javascript

I'm using the WP Job Manager and I customized it using JS. Instead of the input box, I made it as a dropdown.
Now, I want to display all vacancies under of all departments when the user visits the web page.
Here's the link: http://bit.ly/1PsOR18
Here's the snippet:
(function($) {
"use strict"
$(function() {
var $job_types_select = $('<select class="job_types_select"></select>');
var $job_types_ul = $('form.job_filters ul.job_types');
var $job_type_hidden = $('<input type="hidden" name="filter_job_type[]"/>');
$job_types_ul.find('li').each(function() {
var $li = $(this);
var label_text = $li.find('label').text();
var value = $li.find('input:checkbox').val();
var $option = $('<option></option>');
$option.text(label_text);
$option.attr({value: value});
$job_types_select.append($option);
});
$job_types_select.change(function() {
var value = $(this).val();
$('input:hidden[name="filter_job_type[]"]').val(value);
var target = $( this ).closest( 'div.job_listings' );
target.triggerHandler( 'update_results', [ 1, false ] );
});
$job_types_ul.after($job_type_hidden);
$job_types_ul.replaceWith($job_types_select);
);
})(jQuery);

Related

Passing appended text box values back to Google App Script Side

I have figured out how to append text boxes and set class as autocomplete therefore setting default values as the dynamic list generated in an avaliableTag function on the google app script side. I need to get each appended text box value back to the google app script side so the end user can submit the data and a new row of data will be appended to the google sheet. Here is my html code
<label for="units" style="font-size:125%;"><b>Number of items on Ticket</b></label>
<input type="text" name="units" id="units">
<!-- specified units by user-->
<button id = 'numitems' onclick = "getUnits()">Add items </button>
<!-- button that runs function to append appropriate # of boxes -->
</div>
<button id = 'submit' type = 'submit'name = "action">Submit </button>
Here is my google script code (left out doGet and HTML Service) these functions are what the user will submit to google sheet and the function that generates autocomplete options. Still need to get userInfo.MEDS
function userClicked(userInfo){
var ss = SpreadsheetApp.openByUrl('someURL');
var ws= ss.getSheetByName('Sheet1')
var user = Session.getActiveUser();
var timestamp = Utilities.formatDate(new Date(), 'CST', 'MM/dd/yyyy HH:mm:ss')
Logger.log(userInfo)
ws.appendRow([user,userInfo.id,userInfo.ticket,userInfo.items,userInfo.MEDS,timestamp]);
}
function getAvailableTags() {
var ss = SpreadsheetApp.openById("someId");
var s = ss.getSheetByName("someSheet");
var data= s.getRange("A2:A").getValues();
var headers = 1;
var tagColumn = 0;
var availableTags = [];
for (var row=headers; row < data.length; row++) {
availableTags.push(data[row][tagColumn]);
}
return( availableTags );
}
and finally here is the js/jquery side
var x=1
function appendRow()
{
var d = document.getElementById('left-col');
d.innerHTML += "<input type='text'class = 'autocomplete' id='tst"+ x++ +"'><br >";
}
function getUnits() {
var units = $("#units").val();
x=1
for (var count = 1; count < units; count++) {
$("<input type='text'class = 'autocomplete' id='tst"+ x++ +"'><br >").appendTo("#left-col");
}
var mednum = 0
$("#left-col").append("<input type='text'class = 'autocomplete' id='tst"+ x++ +"'>")
;
}
$(function() {
google.script.run.withSuccessHandler(buildTagList)
.getAvailableTags();
});
function buildTagList(availableTags) {
$( ".autocomplete" ).autocomplete({
source: availableTags
});
}
$('#submit').on('click', function (){
$('.autocomplete').each(function() {
var med = $(this).val();
console.log(med);
});
});
window.onload=function(){
document.getElementById('submit').addEventListener('click',buttonClick);
function buttonClick() {
var userInfo = {};
userInfo.Id = document.getElementById('ptid').value
userInfo.ticket = document.getElementById('ticket').value
userInfo.items = document.getElementById('items').value
}}
I need something that will take value of each appended box and let me store it in the userInfo object so it can be passed back to the gs side
You can use google.script.run to run a function in code.gs side and send the form object [1]. Also, you should prevent the default behavior for when the form is submitted:
function buttonClick() {
var userInfo = {};
userInfo.Id = document.getElementById('ptid').value
userInfo.ticket = document.getElementById('ticket').value
userInfo.items = document.getElementById('items').value
google.script.run.userClicked(userInfo)
}
$("#formID").submit(function(e){
e.preventDefault();
});
[1] https://developers.google.com/apps-script/guides/html/communication#forms

Update Text Box On change Javascript

Im trying to update a text box when a selection changes.
Here is the code.
<script type="text/javascript">
$("#name").change(function () {
var selectedValue = $(this).val();
var result = string.substring(string.lastIndexOf(":") + 1);
document.getElementById('newname').value = result ;
});
</script>
Being an extream noob to this i dont understand why this is not working?
The #name is the dropdown list "selection" and the newname is the text box i want to update.
In the var result, string.substring, do you mean selectedValue.substring ?
<script type="text/javascript">
$("#name").change(function () {
var selectedValue = $(this).val();
var result = selectedValue.substring(selectedValue.lastIndexOf(":") + 1);
document.getElementById('newname').value = result ;
});
</script>

Get jquery Map from input attributes

i have a set of inputFields looking like :
<g:textField name="adrstrasse" data-id="adressen[${i}].strasse" class="newaddr" id="daten_vornametarea" value="${adresse.strasse}"/>
<g:textField name="adrort" data-id="adressen[${i}].ort" class="newaddr" id="daten_vornametarea" value="${adresse.telefon}"/>
<g:textField name="adrtelefon" data-id="adressen[${i}].telefon" class="newaddr" id="daten_vornametarea" value="${adresse.telefon}"/>
and i want to return those as a stringified map,
doing so :
var addrmap = $('.newaddr').map(function() {
var $item = $(this);
return {
name: $item.data('id'),
value: $item.val()
};
}).get();
var neu = JSON.stringify(addrmap);
alert(neu);
I´m getting a map looking like :
[{"name":"adressen[0].strasse","value":"Hanswarft1"},{"name":"adressen[0].ort","value":"Hallig Hooge"},{"name":"adressen[0].telefon","value":"12345678"}]
But I want it to look like :
[{"adressen[0].strasse":"Hanswarft1"},{"adressen[0].ort":"Hallig Hooge"},{"adressen[0].telefon":"12345678"}]
When I try something like this, ofcourse i get syntax errors
var addrmap = $('.newaddr').map(function() {
var $item = $(this);
return {
$item.data('id'):
$item.val(),
};
}).get();
var neu = JSON.stringify(addrmap);
alert(neu);
How do I return the map with data-id as parameter and value as value ?
thanks in advance
That might do the job:
var addrmap = $('.newaddr').map(function () {
var $item = $(this);
var obj = {};
obj[$item.data('id')] = $item.val();
return obj;
}).get();

How can i add a title for jquery UI dialog box?

How to add a title for the JqueryUI dialog box for this case. This dialog box opens as per the model name in ruby on rails.
Example of the html page:
<%= link_to pro_generic_lookup_data_path("Enr::Rds::Section2009", format: :js), data: {remote: true} %>
Here, the pro_generic_lookup_data is have the option of uidialog box. So, it would open depend upon the model name("Enr::Rds::Section2009").
JavaScript
var generic_lookup_Enr_Rds_Section2009_selected = function(id, to_s) {
var section_value = $(".cross-reference-section-value");
var section_id = $(".cross-reference-section-value-id");
var section_clear_img = $(".cross-reference-section-clear-img");
section_id.val(id);
section_value.text(to_s);
section_value.css('display', 'inline');
section_clear_img.css('display', 'inline');
$(section_clear_img).on('click', function() {
section_value.text('')
section_id.val('')
section_clear_img.css('display', 'none');
});
var question_link = $('#question_picker').attr('href');
question_link = question_link.replace(/\?+$/, '');
question_link = question_link + '?columns[enr_rds_section_id]=' + id;
$('#question_picker').attr('href', question_link);
$("#modal_popup").dialog("destroy");
};
I have three fields like this same. So, I need to give a separate titles for all the three fields. Thanks!
Other than some basic formatting and using chained selectors where applicable, the code is fine.
var generic_lookup_Enr_Rds_Section2009_selected = function(id, to_s) {
var $section_value = $(".cross-reference-section-value");
var $section_id = $(".cross-reference-section-value-id");
var $section_clear_img = $(".cross-reference-section-clear-img");
$section_id.val(id);
$section_value.text(to_s).css('display', 'inline');
$section_clear_img.css('display', 'inline').on('click', function() {
$section_value.text('')
$section_id.val('')
$section_clear_img.css('display', 'none');
});
var question_link = $('#question_picker').attr('href');
question_link = question_link.replace(/\?+$/, '');
question_link = question_link + '?columns[enr_rds_section_id]=' + id;
$('#question_picker').prop('href', question_link);
$("#modal_popup").dialog("destroy");
};

How to submit all grid values to the server at once with jQuery Datatables?

I looking to save all data from my grid to a server. I'm using jquery Datatables plugin.
function fnSave() {
var aTrs = oTable.fnGetNodes();
var aReturn = new Array();
for(var i=0;i<aTrs.length;i++) {
var aData=oTable.fnGetData(i);
aReturn.push( aData );
}
console.log(aReturn);
}
As return I get :
"<input name="regimentNameAgents" value="" id="regimentNameAgents" type="text">"
...
I would like to only return grid values (and not HTML).
By using this function, my value is always: value="", even if I add text in the input, why?
Is there a better way to extract all grid data ?
The data that's stored in the JDataTable isn't what's currently in the DOM, it's what you set it with originally. So when you update an input, the DOM element is updated, but there's no hook to update the data held in the jdatatable. I'd build the grid something more like this:
var grid = new Array();
$("table tr").each(function() {
var nextRow = new Array();
grid.push(nextRow);
$("td", this).each(function() {
var nextValue = $("input", this).val();
nextRow.push(nextValue);
});
});
The grid variable should then be storing your full table of data. I'm making a few assumptions about how you've structured your table there, since it wasn't posted, but I'm guessing that's fairly close to what you've got.
By using Datatables fnGetNodes, here is the solution :
function fnSave() {
var aTrs = oTable.fnGetNodes();
var aReturn = new Array();
$(aTrs).each(function() {
var nextRow = new Array();
aReturn.push( nextRow );
$("td", this).each(function() {
var nextValue = $("input", this).val();
nextRow.push(nextValue);
});
});
console.log(aReturn);
}

Categories