Solved

join this

Posted on 2013-01-05
14
168 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 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
 

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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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)
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…

746 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now