In my rails application, i have a form where user has to select some items via checkbox. I want to display the selected items' information in a div.
I am currently using javascript to do that.
So in form, when user clicks in a checkbox, i pass the 'this' obj as parameter to a javascript function which then appends the 'this.value' to the end the div.
However appending the 'this.value' displays only the id of of the selected item. I also want to display the other data of the selected item in the div.
Is that possible in javascript? How do i get other information of the 'this' obj, apart from 'this.value'?
Many thanks for any suggestion provided.
Please find code below-
#in my form:
<input id="id_<%= item.id %>" name="submission[item_ids][]" onclick="addtoselected(this);" value="<%= item.id %>" type="checkbox" />
javascript code:
function addtoselected(obj){
if(obj.checked==true){
var s = '<div>' + obj.value + '</div>';
$j('#selected_recs').append(s);
}
}
If the text you want is in a label, you could loop through all labels and check which one has the id in his for attribute.
Use the contents of this.value to lookup the information you need. You could send it as a parameter to a server-side script to get its information back in JSON format, or if you already have an existing javascript object store, you could look up the item's information from there.
Related
I'm new to AJAX and a lot of JS, but I need to replace some old angular functionality on our Laravel site.
We simply have a page with a static/sticky header search bar, but no submit button. It needs to do a live filter upon search input. i.e. if I type sofa, it should hide anything from the page without the word sofa.
The Laravel blade/HTML is built with foreach loops from controller data, but more importantly, the data is stored in a JSON object called orderFormData, shown below.
I need a simple and effective live search filter to hide anything that doesn't match between the JSON and the search bar. The page is built with multiple HTML tables so I don't want to filter by the table and I think that's too complicated and convoluted. It should suffice to do it by JSON, possibly with AJAX. However, I'm a total novice here and I'm desperate for a solution.
Here's the search html:
<div class="md-input-wrapper search-form">
<form class="uk-search" id="searchProducts">
<input type="text" class="md-input label-fixed" name="srch-term" id="srch-term" autofocus placeholder="Search Products"/>
<span class="md-input-bar"></span>
</form>
</div>
Here's the JSON object and some JS that I was playing with, but it doesn't work:
<script type = "text/javascript">
var orderFormData = <?php echo json_encode ($tempdata);?>;
$(document).ready(function(){
$('#srch-term').on('keyup',function(){
var searchTerm = $(this).val().toLowerCase();
$('.uk-table tbody tr').each(function(){
var lineStr = $(this).text().toLowerCase();
if(lineStr.indexOf(searchTerm) === -1){
$(this).hide();
}else{
$(this).show();
}
});
});
});
</script>
This is just a pure JS idea, but I'm interested in AJAX as well if it will work better for this scenario. How can I properly filter items on the page by tying the search bar and JSON object?
You don't need of Ajax to do a search function with hide and show, this is simply manipulating DOM, instead ajax can calls the json from the php and with jquery you can simple loop your td on keypress and use :contains of jquery, onkeypress you call a function and in this function you do show and hide if contains "search" show otherwise hide.
Here a simple example in one of my old project #tabellaWebLog was the id of the table ricercaUser was the id of the input search and trTabellaWebLog was the id of the row where i wanted the search instead .ricUser was the class of the table column to loop the search inside the table...Bye
user = $('#ricercaUser').val();
$('#tabellaWebLog').find("#TrTabellaWebLogRiga:not(:contains('"+ user +"'))").hide();
$(".ricUser:contains('" + user + "')").parent().show();
$(".ricUser:not(:contains('" + user + "'))").parent().hide();
How to find text value from requested formm?
dr["Boxno"] = Request.Form["Ddlbox_1"];
dr["Boxno"] = Request.Form["Ddlbox_" + i];
In server side you can access only name and value attribute of input element not text within it.
Assuming you are using web forms there is no need to access Request.Form to retrieve the value of the dropdowns.
If you have multiple dropdowns and you want to iterate through the dropdowns you can use FindControl to find each dropdown by it's name (e.g. FindControl("Ddlbox_" + i))
FindControl will return an object of type objectwhich you can then cast to DropDownListin order to access the selected value via ddl.SelectedValue or the text via ddl.SelectedItem.Text (ddl is the variable of your dropdown list).
Please note: if the dropdowns are created for example in a repeater control, you'll need to iterate each item of the repeater and apply the FindControl method to each row.
I have no idea how can I solve my problem. I have Django template with two models. I put these models in inlineformset_factory.
Example
DhcpConfigFormSet = inlineformset_factory(Dhcp, IPRange, extra=1)
and I displayed this form in template like this pictures
form http://sphotos-h.ak.fbcdn.net/hphotos-ak-prn1/601592_10151469446139596_1335258068_n.jpg
I want implement event, when I click on plus stick (marked field on pictures), show one more row (ip initial field, ip final field and delete check box).
I tried to do it on this way :
$(document).ready(function() {
$(".plusthick-left").click( function() {
var tr= $(".sort-table").find("tbody tr:last").length;
$(".sort-table").find("tbody tr:last").after($(".sort- table").find("tbody tr:last").clone())
});
but I have problem, because I just made copy of last row and took same attributes values?
My question is : How can I make new row, and set all attributes with values of last row increased by one.
For example:
<input type="text" id="id_ip_initial_0_ip_range">
This is field that generated form in template, and I want make field with id value like this:
<input type="text" id="id_ip_initial_1_ip_range">
How can I do it? :)
Forgive me if this is already 'somewhere' on StackOverflow, but I don't 100% know exactly what it would come under...
I'm trying to retrieve information from a WebService, store this in an array, and then for each <select> within my ASP.Net Datalist, populate it with the array AND have binding attached to an OnChange event.
In other words, I have an array which contains "Yes, No, Maybe"
I've an ASP.Net Datalist with ten items, therefore I'd have 10 <Select>s each one having "Yes, No, Maybe" as a selectable item.
When the user changes one of those <Select>s, an event is fired for me to write back to the database.
I know I can use the [ID=^ but don't know how to:
a) Get the page to populate the <Select> as it's created with the array
b) Assign a Change function per <Select> so I can write back (the writing back I can do easy, it's just binding the event).
Any thoughts on this?
I have built a simple example that demonstrates, I think, what you are attempting to accomplish. I don't have an ASP.Net server for building examples, so I have instead used Yahoo's YQL to simulate the remote datasource you would be getting from your server.
Example page => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-multiple-selects-from-datasource.html
Example steps:
query datasource to get array of select questions
build HTML of selects
append HTML to page
attach change event listener to selects
on select value change submit value
Example jQuery:
// get list of questions
$.ajax({
url: url,
dataType: "jsonp",
success: function(data) {
// build string of HTML of selects to append to page
var selectHtml = "";
$(data.query.results.p).each(function(index, element) {
selectHtml += '<select class="auto" name="question'+index+'"><option value="Yes">Yes</option><option value="No">No</option><option value="Maybe">Maybe</option></select> '+element+'<br/>';
});
// append HTML to page
$(document.body).append(selectHtml);
// bind change event to submit data
$("select.auto").change(function() {
var name = $(this).attr("name");
var val = $(this).val();
// replace the following with real submit code
$(document.body).append("<p>Submitting "+name+" with value of "+val+"</p>");
});
}
});
Example datasource => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-multiple-selects-from-datasource-datasource.html
Example loaded:
Example select value changed:
I am new to Javascript, JSON and jQuery. So please be easy on me. I have a JSP page that contain a drop down list. The contents of the drop down list are populated when the page is loaded. I wrote a Servlet that return the contain of the drop down list in the form of Map, and convert it to JSON string and sent back to the jsp via response.getWriter().write(json); However I am having trouble to getting the result back from the jsp side, and populate the contain of the drop down list from the result. Here are my codes
customer.jsp
$(document).ready(function() {
getCustomerOption('customer'); //try to pre-populate the customer drop down list
});
function getCustomerOption(ddId) {
var dd = $('#' + ddId);
$.getJSON("http://localhost:8080/WebApps/DDListJASON", function(opts) {
$('>option', dd).remove(); // Remove all the previous option of the drop down
if (opts) {
$.each(opts, function(key, value) {
dd.append($('<option/>').val(key).text(value));
}
}
});
}
down where the drop down list is generated
<select id="customer" name="customer">
<option></option>
</select>
The result is nothing get populated into the list. So sad
I think you are invoking the wrong function in document ready
Shouldn't it be
getInitialOption('customer');
instead of
getCustomerOption('customer');
You may add additional <option> elements to a <select> with the code:
$("#selectID").append("<option>" + text + "</option>");
see: JQuery Docs
I don't understand $(''), but I'm not sure that's the problem either, hard to tell exactly.
I do know it will be quicker if you do create the list of options in-memory and then do one append with .html(options) rather than append them one at a time. That may make it easier to understand also, to build the html up one line at a time and then append it.