Solved

join this

Posted on 2013-01-05
14
183 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 7
  • 7
14 Comments
 
LVL 82

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 82

Expert Comment

by:leakim971
ID: 38747300
to pull it to what/where/in?
0
[Live Webinar] The Cloud Skills Gap

As Cloud technologies come of age, business leaders grapple with the impact it has on their team's skills and the gap associated with the use of a cloud platform.

Join experts from 451 Research and Concerto Cloud Services on July 27th where we will examine fact and fiction.

 

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 82

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 82

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 82

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 82

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 82

Accepted Solution

by:
leakim971 earned 500 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

Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

Question has a verified solution.

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

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…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

632 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