Search value in div - javascript

I've got a little function which allows to search values through rows, but there is a problem with it - search function is not working properly.
Please take a look at the fiddle here http://jsfiddle.net/4f3WF/
Try to set text in input to "798" for example.
In the end this function must be able to search through entire row, not just only first or last ms-column div. I just don't get what's wrong.

Just try with:
e.find('.multiple-selector-table .ms-search-label .ms-search').on("keyup", function() {
var value = $(this).val();
e.find('.multiple-selector-table-row').hide();
e.find('.ms-column:contains("' + value + '")').parents('.multiple-selector-table-row').show();
});
Updated fiddle
In the first step, we hide all rows. Next we search for cells that contain value passed in input and show their parent rows.

Related

Counting elements once after page load

I am currently passing one value from search.php to filtering.php. I am using $_GET to accomplish that. In the filtering.php page I have a table that auto filters based on a word typed in the input text box. I am passing the value in the URL like: http://holaweblearning.co.nf/php_learning/filtering.php?key=Dragoo. The value from the URL is taken and placed in the input text box and results are displayed. I am able to run a function that counts the filtered results based on a word. The issue: the result count is off, it initially shows the correct value but after clicking on a result it adds 1? DEMO
$(document).ready(function($) {
//Trigger key up on search box to show results for word
$('input#filter').trigger('keyup');
//Counts Results
function result_count(){
var text = $('.footable tbody tr:not(.footable-filtered)').length;
$('h5#result_count').text('Number of Results: '+text);
}
result_count();
//Run on page load
window.setInterval(result_count, 100);
});
When you click on a result, a new row was added like the following and since this type of row is NOT BEING EXCLUDED from the count, your count will go up by one.
<tr class="footable-row-detail"><td class="footable-row-detail-cell" colspan="3"><div class="footable-row-detail-inner"><div class="footable-row-detail-row"><div class="footable-row-detail-name">Job Title:</div><div class="footable-row-detail-value">Traffic Court Referee</div></div><div class="footable-row-detail-row"><div class="footable-row-detail-name">DOB:</div><div class="footable-row-detail-value">22 Jun 1972</div></div></div></td></tr>
Probably your function should be:
function result_count(){
var text = $('.footable tbody tr:not(.footable-filtered,.footable-row-detail)').length;
$('h5#result_count').text('Number of Results: '+text);
}
So that it does not count this row.

HTML: Get value from input with no ID

Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.
So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.
I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.
jQuery I was trying to use:
$('#tbl').on('click','.xx',function() {
$(this).siblings().each(
function(){
if ($(this).find('input').length){
$(this).text($(this).find('input').val());
}
else {
var t = $(this).text();
$(this).text('').append($('<input />',{'value' : t}).val(t));
}
});
});
Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?
Update:
HTML:
sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")
For Each w In workItems
sb.AppendLine("<tr>")
sb.AppendLine("<td>" & w.area & "</td>")
sb.AppendLine("<td>" & w.details & "</td>")
sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
sb.AppendLine("</tr>")
Next
sb.AppendLine("</table>")
There are a couple of ways to do this, including changing your VB code to add extra data to the html, but I will answer this from a pure javascript/JQuery solution.
First of all you need to handle the click event for each edit button, after that you find the matching row, and then you can get the first to td elements of that row...
$(".edit").click(function(e){
e.preventDefault();//prevent the link from navigating the page
var button = $(this);//get the button element
var row = button.closest("tr");//get the row that the button belongs to
var cellArea = row.find("td:eq(0)");//get the first cell (area)
var cellDetails = row.find("td:eq(1)");//get the second cell (details)
//now you can change these to your inputs and process who you want
//something like this...
ConvertToInput(cellArea, "area");
ConvertToInput(cellDetails, "details");
});
function ConvertToInput(element, newId){
var input = $("<input/>");//create a new input element
input.attr("id", newId);//set an id so we can find it
var val = element.html();//get the current value of the cell
input.val(val);//set the input value to match the existing cell
element.html(input);//change the cell content to the new input element
}
Here is a working example
From that you can then do the saving that you say you have already implemented, using the ID values of each field to get the values to save.
Instead of using a For Each ... in ... Next loop, use a a For loop with a counter. give each button and each row an ID with the current counter value at the end. You can then use Jquery to make each row editable separately, because each row has a row number now.

jQuery loop giving all <select> options instead of option:selected

There is a table that I need to loop through and get the values from, then store them in an array. Right now this loop is giving me all the values, however when it encounters an HTML < select> element it returns the selected option then it gives me all of the select options. I only want the selected option, not the entire list.
This is much easier to explain by showing you. So here is the fiddle and here is the jQuery code
var saveEdits = [];
$('#save').click(function () {
$('.projects_editable_tbody tr').each(function () {
$('.projects_editable_content_td, option:selected', this).each(function () {
var $input = $("input", this);
if ($input.length) {
saveEdits.push($input.val());
} else saveEdits.push($(this).text());
});
});
$.each(saveEdits, function (index, value) {
console.log(index + ': ' + value);
});
});
As you can see from the fiddle the array is populating almost exactly like I want it to. Any help is appreciated. If you need more info/code just let me know.
It's giving you the text from the td that contains the select, because you've specified .projects_editable_content_td. You need to exclude the .projects_editable_content_td that contain a select. See the code I posted to your question from yesterday.
Perhaps I misunderstood the question, but I tinkered with your code to push the current selected value of each select, instead the select itself. I also edited the content of the select boxes to use "selected" prop.
$('.projects_editable_content_td', this).each(function () {
if(jQuery(this).children().val()) {
saveEdits.push($(this).children().val());
} else {
saveEdits.push(jQuery.trim($(this).text()) );
}
});
You can see in this jsfiddle
http://jsfiddle.net/amenadiel/WNSBk/29/
The first row is edited and it returns a correct array. The second one was left as it was and still has the problem.
In your scenario it would probably be better if you enclosed each line in tags and harvest the data using the serialize() method of the form. For this you would need to make every field an input. For example, you could put a hidden field next to text elements.

How to display the value get from .val()

I have this code here but it doesn't work... I have a text input where user can key in any number. When user click on ADD, it will add a new row to the table. when click on REMOVE, that row will be remove.
I want to keep track of the index and it is working. However I need to keep track of the number the user input as well, then I can remove that row with that number. However, I can't get the textInput to be displayed on the table... not sure what's the right way to display that. Please help.
var index=1;
textInput = $('#outputTextInput').val();
$('#outputAdd').click(function(){
index++;
$('#status_table tr:last').after('<tr id="output_newrow_'+textInput+'"><td>'+index+'</td><td id="type_row_'+index+'">type_row_'+textInput+'</td><td id="num_row_'+index+'">num row '+index+'</td><td><img class="image" src="static/OffLamp-icon.png" style="height:64px; width=64px"/></td></tr>');
});
$('#outputRemove').click(function(){
$('#status_table').find("#output_newrow_'+textInput+'").remove();
});
Replace this:
$('#status_table').find("#output_newrow_'+textInput+'").remove();
With this:
$('#status_table').find("#output_newrow_" + textInput).remove();
and try again!

JS and jQuery - loop through textboxes and store value

Here's the function that checks if the form is complete.
So, what I'm trying to do:
If radio is not selected, throw a message.
If radio is "yes", but text is not entered, throw error.
If radio is "no" but text is entered, make the text empty.
If all is good, add stuff into `allResponses
The form was displayed 5 times, and input was as follows:
Yes a1
No
Yes a3
No
Yes
Now, this input should display an error since in 5th case, "yes" is selected but nothing is entered in the textbox.
However, I get this:
http://i.imgur.com/ya2CUp0.png
Also, the text is not being updated as in 1st and 3rd cases.
I don't know a lot about JS, so please provide me with as explained responses as you can.
EDIT: Complete code: http://pastebin.com/scNSNM2H
Thanks
You have this in a loop:
var exaggerationPart = document.getElementById('exaggeration').value
And then you check to make sure it has a value for each item. But you will get the same value each time.
You are creating multiple inputs with the same id, "exaggeration". This is invalid HTML. Id's must be unique. To correct this, you can increment the id the same as you are doing with other elements (such as, input[name='response"+thisJokeIndex+"']).
var exaggerationPart = document.getElementById('exaggeration' + thisJokeIndex).value
tipTD2.append("<input type='text' name='exaggeration' id='exaggeration" + tipIndex + "' size='70'>")
Working demo: jsfiddle.net/svvge/2
Edit: To clear the value of the text box, you must change the value property of the text box element. Right now you are just changing the value of a variable.
var exaggerationInput = document.getElementById('exaggeration' + thisJokeIndex).value;
var exaggerationPart = exaggerationInput.value;
exaggerationInput.value = '';

Categories