Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

join this

Posted on 2013-01-05
14
Medium Priority
?
190 Views
Last Modified: 2013-01-05
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
0
Comment
Question by:tonelm54
  • 7
  • 7
14 Comments
 
LVL 83

Expert Comment

by:leakim971
ID: 38747200
do you understand << ID must be unique in a document >> ?
0
 

Author Comment

by:tonelm54
ID: 38747292
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
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38747300
to pull it to what/where/in?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:tonelm54
ID: 38747526
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?
0
 

Author Comment

by:tonelm54
ID: 38747535
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
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38747542
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()
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38747548
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)
0
 

Author Comment

by:tonelm54
ID: 38747581
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
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38747583
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

0
 

Author Comment

by:tonelm54
ID: 38747588
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/
0
 
LVL 83

Expert Comment

by:leakim971
ID: 38747592
0
 

Author Comment

by:tonelm54
ID: 38747599
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
0
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 38747612
yes, we had TransText instead TransTrans
updated : http://jsfiddle.net/bjbLL/2/
0
 

Author Closing Comment

by:tonelm54
ID: 38747617
Thank you soo much for your help
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Hi all! Recently there was EE question and the person wanted to have a multi-column textbox <div> selection, so as a first step to answer I provided a link but that was not complete with JavaScript selection, but had a good style sheet. So as a ques…
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

879 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question