Avatar of tonelm54
tonelm54
 asked on

join this

Ive got some code (previously helped out in EE), which looks for a named div, and then each class inside:-
$("#divTransactions .clsTransactionRow").each( function(_index, _value ) {  

Open in new window


Which works, great, however Im trying to upgrade it already to make the code work better, what Im trying to do is get the values of 3 divs inside each of the returned from the working each command, however I don't know how to comine this and the div value, so like:-
$(this).("#txtTransDate").text()

Open in new window


After reading some code, I thought I could use find instead:-
$(this).find("#txtTransDate").text()

Open in new window


So something like
      $("#divTransactions .clsTransactionRow").each( function(_index, _value ) {
            var varDate = $(this).find("#txtTransDate").text().toLowerCase().indexOf($("#txtTransDate").val().toLowerCase());
      });

Open in new window


Im not sure where to go or serch for to sort my issue :-S
jQuery

Avatar of undefined
Last Comment
tonelm54

8/22/2022 - Mon
leakim971

do you understand << ID must be unique in a document >> ?
tonelm54

ASKER
Sorry, its not an ID, don't know why I put that :-S they are classes.


What Im looking to do is pull the value of the class txtTransDate in each of the returned from the each command, so something like:-
      $("#divTransactions .clsTransactionRow").each( function(_index, _value ) {
            var varDate = $(this).find(".txtTransDate").text().toLowerCase().indexOf($("#txtTransDate").val().toLowerCase());
      }); 

Open in new window



Whats its pulling from is something like:-
<div id="divTransactions">
      <div id="row56" class="clsTransactionRow">
            <div class="txtTransDate">2012-12-24</div>
            <div class="txtTransText">DB Payment</div>
            <div class="txtTransStatus">Cleared</div>
      </div>
      <div id="row57" class="clsTransactionRow">
            <div class="txtTransDate">2012-12-23</div>
            <div class="txtTransText">CC Payment</div>
            <div class="txtTransStatus">Held</div>
      </div>
      <div id="row58" class="clsTransactionRow">
            <div class="txtTransDate">2012-12-22</div>
            <div class="txtTransText">Standing Order</div>
            <div class="txtTransStatus">Disputed</div>
      </div>
<div>

Open in new window


Sorry for my mistake
leakim971

to pull it to what/where/in?
This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
tonelm54

ASKER
What I'm trying to do is filter a list of Divs, from 3 text boxes. So I have 3 text boxes which when the filter is fired it searches the divs for a match and then shows or hides them.

My more complex code is:-
    function filterTransactions() {
      $("#divTransactions .clsTransactionRow").each( function(_index, _value ) {
          if (($(this).(".txtTransDate").text().toLowerCase().indexOf( $("#txtTransDate").val().toLowerCase()) <= 0 )||
                ($(this).(".txtTransTrans").text().toLowerCase().indexOf( $("#txtTransTrans").val().toLowerCase()) <= 0 )||
                ($(this).(".txtTransAmount").text().toLowerCase().indexOf( $("#txtTransAmount").val().toLowerCase()) <= 0 )) {
              $(this).show();
          } else {
              $(this).hide();
          }
      });
    }

Open in new window


So with the 3 textboxes:-
          <input id="txtTransDate" class="clsTransactionSearchTextBox" style="width:50px; font-size:10px;" />
          <input id="txtTransTrans" class="clsTransactionSearchTextBox" style="width:400px; font-size:10px;" />
          <input id="txtTransAmount" class="clsTransactionSearchTextBox" style="width:50px; font-size:10px;" />

Open in new window


And then set the textboxes to fire the filter on keyup:-
	$(document).ready(function () {
                        $('#txtTransDate').keyup(function() { filterTransactions(); });
                        $('#txtTransTrans').keyup(function() { filterTransactions(); });
                        $('#txtTransAmount').keyup(function() { filterTransactions(); });
	});

Open in new window


There is a lot many more lines, however just to debug, Ive put 3 rows in:-
<div id="divTransactions">
      <div id="row56" class="clsTransactionRow">
            <div class="txtTransDate">2012-12-24</div>
            <div class="txtTransText">DB Payment</div>
            <div class="txtTransStatus">Cleared</div>
      </div>
      <div id="row57" class="clsTransactionRow">
            <div class="txtTransDate">2012-12-23</div>
            <div class="txtTransText">CC Payment</div>
            <div class="txtTransStatus">Held</div>
      </div>
      <div id="row58" class="clsTransactionRow">
            <div class="txtTransDate">2012-12-22</div>
            <div class="txtTransText">Standing Order</div>
            <div class="txtTransStatus">Disputed</div>
      </div>
<div>

Open in new window


So, to give you an idea, if I was to enter 'standing' into the textbox #txtTransTrans, I would like #row56 and #row57 to hide, and only #row58 to show. However my code runs, but doesn't hide anything.

Any ideas?
tonelm54

ASKER
I believe my problem is with the line section:-
$(this).(".txtTransDate").text().

Open in new window


But haven't a clue on how to fix it
leakim971

yes, this is an input, you must use .val() instead text() to get the value

You've only one field with txtTransDate ID so you can use :
$("#txtTransDate").val()
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
leakim971

forget my last comment, I was talking aboput the filters, you're already using # for the ID so it's fine,

the answer of your question is :
$(".txtTransDate", this)
tonelm54

ASKER
Ok, I agree and again apologise (very tires trying to sort this out, I will go to bed after this). The textboxes are txt, but I should have put the divs as cls in my comments above.

Ive put the code on jsFiddle to show whats going ok, and hopefully you will see what Im trying to do:-
http://jsfiddle.net/Zq2F9/

Thank you for taking the time to try and help, and to put up with my mistakes
leakim971

check this : http://jsfiddle.net/bjbLL/
    function filterTransactions() {
      $("#divTransactions .clsTransactionRow").hide();
      $("#divTransactions .clsTransactionRow").each( function(_index, _value ) {
        var t1 = ($(".txtTransDate", this).text().toLowerCase().indexOf( $("#txtTransDate").val().toLowerCase()) >= 0 ) && $("#txtTransDate").val()!="";
        var t2 = ($(".txtTransTrans", this).text().toLowerCase().indexOf( $("#txtTransTrans").val().toLowerCase()) >= 0 ) && $("#txtTransTrans").val()!="";
        var t3 = ($(".txtTransAmount", this).text().toLowerCase().indexOf( $("#txtTransAmount").val().toLowerCase()) >= 0 ) && $("#txtTransAmount").val()!="";
        if (t1||t2||t3) $(this).show();
      });
    }

	$(document).ready(function () {
    $('#txtTransDate, #txtTransTrans, #txtTransAmount').keyup(filterTransactions);
	});

Open in new window

I started with Experts Exchange in 2004 and it's been a mainstay of my professional computing life since. It helped me launch a career as a programmer / Oracle data analyst
William Peck
tonelm54

ASKER
Ok, sorry I missed the comment
forget my last comment, I was talking aboput the filters, you're already using # for the ID so it's fine,

the answer of your question is :
$(".txtTransDate", this)

Ive changed jsFiddle, but its still not having it :-(
http://jsfiddle.net/Zq2F9/1/
leakim971

tonelm54

ASKER
http://jsfiddle.net/bjbLL/

With that, if you enter "db" in the search it hides all the rows and doesn't show the DB row
⚡ FREE TRIAL OFFER
Try out a week of full access for free.
Find out why thousands trust the EE community with their toughest problems.
ASKER CERTIFIED SOLUTION
leakim971

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
GET A PERSONALIZED SOLUTION
Ask your own question & get feedback from real experts
Find out why thousands trust the EE community with their toughest problems.
tonelm54

ASKER
Thank you soo much for your help