Get jquery Map from input attributes - javascript

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();

Related

jQuery do not accept new fields in HTML

I try to create a generator for lucky numbers. I did it with C# and now with JavaScript and jQuery. You can see this here. When I add new field - JQ do not see it. Just try to click on numbers in "Your field". I have as standard 7 fields and they work fine but when I add new line script do not recognise it like something useful. Could you give me some advice?
change below js code. check this working plunker
Your code:
$('.spielzahlen').on('click', function() {
var list = []
tablereset()
var item = $(this).text().split(', ')
item.forEach(function(index) {
if (index != "")
list.push(index)
})
console.log($(this).text())
list_temp = list
$(this).empty()
$('#temp').val(list)
var tds = document.getElementsByTagName("td")
list.forEach(function(index) {
var idt = index - 1
tds[idt].className = 'checked'
})
changeLen(list_temp.length)
})
Change it with below code , there is only change in initialization other code are same :
$(document).on('click','.spielzahlen', function() {
var list = []
tablereset()
var item = $(this).text().split(', ')
item.forEach(function(index) {
if (index != "")
list.push(index)
})
console.log($(this).text())
list_temp = list
$(this).empty()
$('#temp').val(list)
var tds = document.getElementsByTagName("td")
list.forEach(function(index) {
var idt = index - 1
tds[idt].className = 'checked'
})
changeLen(list_temp.length)
})

JQuery using object literal can't using $(this) always undefine on onclick

my problem after write as object literal as Jquery guide i can't using $(this) to access self on onlick="". please help correct my mistake.
my html
<a
data-id="<?=$product_id?>"
class="compare product-<?=$product_id?>"
onclick="(function(){compareInit.comGet();})()"
></a>
my js
var compareInit = {
/* Store Item Compare */
comGet: function() {
var e = $(this);
var item_id = e.data('id');
var item_image = e.find(".compare-hidden-image").val();
var item_name = e.find(".compare-hidden-name").val();
var count_item = $(".compare-item").length;
var item_dialog = $(".compare-tray-dialog");
var compare_button = $(".compare-tray-item");
item_dialog.show();
if (count_item > 1) {
} else {
$(".product-"+ item_id).css("color", "red").attr('onclick','');
}
if (count_item === 0) {
compare_button.removeClass('activate').addClass('deactivate');
} else {
compare_button.removeClass('deactivate').addClass('activate');
}
$('.compare-remove').on("click", function() {
var rem_id = $(this).data('id');
$("." + rem_id).remove();
$(".product-" + rem_id).css("color", "#fff").attr('onclick','(function(){compareInit.comGet();})()');
compare_button.removeClass('activate').addClass('deactivate');
});
}
};
Thank in advance.
You can pass the this identifier from the onclick event and then access it under a name other than this such as elem as a parameter of your function.
var compareInit = {
/* Store Item Compare */
comGet: function(elem) {
console.log("working");
var e = $(elem);
var item_id = e.data('id');
var item_image = e.find(".compare-hidden-image").val();
var item_name = e.find(".compare-hidden-name").val();
var count_item = $(".compare-item").length;
var item_dialog = $(".compare-tray-dialog");
var compare_button = $(".compare-tray-item");
item_dialog.show();
if (count_item > 1) {} else {
$(".product-" + item_id).css("color", "red").attr('onclick', '');
}
if (count_item === 0) {
compare_button.removeClass('activate').addClass('deactivate');
} else {
compare_button.removeClass('deactivate').addClass('activate');
}
$('.compare-remove').on("click", function() {
var rem_id = $(this).data('id');
$("." + rem_id).remove();
$(".product-" + rem_id).css("color", "#fff").attr('onclick', '(function(){compareInit.comGet();})()');
compare_button.removeClass('activate').addClass('deactivate');
});
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a data-id="3636" class="compare product-3636" onclick="compareInit.comGet(this)">Testing</a>
You need to pass-on the your required DOM element's this reference as follows:
onclick="(function(){compareInit.comGet();})()"; here you are invoking an anonymous function without passing anything to it. So there inside it this reference means that anonymous function itself. To achieve your goal you need to pass DOM reference as follows:
var compareInit = {
/* Store Item Compare */
comGet: function(thisRef) {
alert($(thisRef).text());
}
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="mydiv" onclick="(function(thisRef){compareInit.comGet(thisRef);})(this)">Click Me!</div>
Try this: apply the this inside the onclick function .If you apply this in object function its get the data from that object only
var compareInit ={
comGet : function(that){
console.log(that.innerHTML)
}
}
<a onclick="compareInit.comGet(this)">hello</a>
Alternate:
If get the this from whole object try with return like below .its like a jquery object $(element).html()
var compareInit = function(that){
return {
comGet : function(){
console.log(that.innerHTML)
}
}
}
<a onclick="compareInit(this).comGet()">hello</a>

How to display all values using JS?

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);

how do you convert the selected list to a custom list in javascript?

I have two select boxes on html. Based on selected items, I need to convert the selected items to list
like this:
c("item1", "item2", "item3")
jsfiddle example
$("#submitbutton").on("click", function(){
var jsonData=JSON.parse( "[{\"id\":1,\"desc\":\"Date\"},{\"id\":2,\"desc\":\"CPU\"}]"
);
var $select = $('#yaxis');
$(jsonData).each(function (index, o) {
var $option = $("<option/>").attr("value", o.desc).text(o.desc);
$select.append($option);
});
var $select1 = $('#xaxis');
$(jsonData).each(function (index, o) {
var $option1 = $("<option/>").attr("value", o.desc).text(o.desc);
$select1.append($option1);
});
})
$("#selectitems").on("click", function(){
var names=$("#xaxis").val();
var names1=$("#yaxis").val();
var param=names+","+names1;
console.log(param);
})
submitbutton builds the selected boxes and selectitem needs to return selected items. For example, in the jsfiddle example, if I select CPU and Date, my param list should be like this:
console.log(param)
c("CPU","Date")
I tried something like this:
$("#selectitems").on("click", function(){
var names=$("#xaxis").val();
var names1=$("#yaxis").val();
var param=names+","+names1;
param="c("+param+")";
param=param.split(",");
console.log(param);
})
console.log(param), shows like this:
["c(DateTime", "CPU)"]
I need param output to be like this:
c("DateTime", "CPU")
updated update jsfiddle example
I think you want your click handler to be something more like this:
$("#selectitems").on("click", function(){
var values = [];
$("#xaxis option:selected, #yaxis option:selected").each(function() {
values.push('"' + $(this).text() + '"');
});
param="c(" + values.join(",") + ")";
console.log(param);
})
updated jsfiddle
Rather than try to construct a list of arguments why not use apply()?
e.g.
$("#selectitems").on("click", function(){
var selected = $("#xaxis option:selected, #yaxis option:selected").map(function() {
return $(this).text();
});
c.apply(null,selected);
});
Here is a fiddle demonstrating this: http://jsfiddle.net/84zugx8p/11/

Array problems with Jquery

I have a Jquery code that is following:
var selectedQuestions = $("#SelectedQuestions");
var selectedCustomQuestions = $("#SelectedCustomQuestions");
var currentIds = new Array();
var currentText = new Array();
$("#CustomPickedTable td[data-question-id]").each(function () {
var clickedId = $(this).attr("data-question-id");
currentIds.push(clickedId);
$('#CustomPickedTable tr').each(function () {
var ClickedText= $(this).find("td[data-attr-id]:first").html();
currentText.push(ClickedText);
});
});
selectedCustomQuestions.val(currentText.join("|"));
selectedQuestions.val(currentIds.join(","));
$("form").submit();
}
I have two types of TD in my table that is following:
<td data-question-id="7">test</td>
and
<td data-attr-id="5">test</td>
I want to be able to sort em into different hiddenfields these are my hiddenfields:
#Html.HiddenFor(model => model.SelectedCustomQuestions, new { #id = "SelectedCustomQuestions" })
#Html.HiddenFor(model => model.SelectedQuestions, new { #id = "SelectedQuestions" })
my Jquery code works when it comes to fill my array with CurrentIds but with currentText I get problems, if I have two <td data-attr-id="5">test</td> in my table they get duplicated in my array list and my array lenght is 7-10 which is weird. The CurrentText should only have 2 length and its not. How can I fix this?
Example on the problem.
I have this following inside my table:
<td data-attr-id="5">aaaa</td>
<td data-attr-id="5">ddd</td>
<td data-question-id="5">test</td>
<td data-question-id="15">test</td>
and this is what happens when i debug my jquery code
Thanks in advance!
Just try this one with slight modification.
var selectedQuestions = $("#SelectedQuestions");
var selectedCustomQuestions = $("#SelectedCustomQuestions");
var currentIds = new Array();
var currentText = new Array();
$("#CustomPickedTable td[data-question-id]").each(function () {
var clickedId = $(this).attr("data-question-id");
currentIds.push(clickedId);
});
$('#CustomPickedTable td[data-attr-id]').each(function () {
var ClickedText = $(this).html();
currentText.push(ClickedText);
});
selectedCustomQuestions.val(currentText.join("|"));
selectedQuestions.val(currentIds.join(","));
You seem to be using "td[data-attr-id]:first" in your find selector, but you are "using data-attri-id" in your html, notice the added i.
edit :
You might also wanna use
var currentIds = [];
var currentText = [];
instead of :
var currentIds = new Array();
var currentText = new Array();
see:
What does [] mean in JavaScript?

Categories