Solved

jQuery selector syntax not correct?

Posted on 2011-09-21
14
486 Views
Last Modified: 2012-05-12
$('table[id*="ShoppingShippingMethods1"]').css("background-color", "blue");

Does not seem to be doing anything.

NOTE:  I routinely do something nonsensical like change the border color or background color in order to test my jQuery selectors.  Is there a better way to tell if my selector syntax is working and is correct?




Here is the markup:

 <div class="shipselwrapperclass">
    <div id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_ShippingSelection">
	
<div style="width: 300px;" id="item">
<div>
		<table cellspacing="0" rules="all" border="1" id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping" style="height:20px;width:300px;border-collapse:collapse;">
			<tr>
				<th align="left" scope="col">Select Shipping Method</th><th align="right" scope="col">Amount</th><th align="right" scope="col">&nbsp;</th>

			</tr><tr onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$0')">
				<td>
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl02_lblDisplay">USPS Media Mail</span>
</td><td align="right" style="width:0px;">
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl02_lblAmount">$5.95</span>
</td><td align="right" style="width:0px;"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$0')"></a></td>
			</tr><tr onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$1')">
				<td>
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl03_lblDisplay">USPS Express MAil</span>
</td><td align="right" style="width:0px;">

<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl03_lblAmount">$8.45</span>
</td><td align="right" style="width:0px;"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$1')"></a></td>
			</tr><tr onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$2')">
				<td>
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl04_lblDisplay">FedEx Second Day Air</span>
</td><td align="right" style="width:0px;">
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl04_lblAmount">$12.00</span>
</td><td align="right" style="width:0px;"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$2')"></a></td>
			</tr><tr onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$3')">
				<td>

<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl05_lblDisplay">FedEx Overnight</span>
</td><td align="right" style="width:0px;">
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl05_lblAmount">$20.00</span>
</td><td align="right" style="width:0px;"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$3')"></a></td>
			</tr><tr onclick="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$4')">
				<td>
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl06_lblDisplay">Pick-up Instore</span>
</td><td align="right" style="width:0px;">
<span id="ctl00_ContentPlaceHolder1_ShoppingShippingMethods1_gvShipping_ctl06_lblAmount">$0.00</span>
</td><td align="right" style="width:0px;"><a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$ShoppingShippingMethods1$gvShipping','Select$4')"></a></td>
			</tr>

		</table>
	</div>
</div>

Open in new window

0
Comment
Question by:knowlton
  • 6
  • 6
  • 2
14 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36575335
try something like this

$('table).each(function(){
  var id = $(this).attr("id");
  if (id.indexOf("ShoppingShippingMethods1") != -1)
  {
     $(this).css("background-color",  "blue");
  }
});

0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36575340
were you calling that jquery code in document.ready?
0
 
LVL 5

Author Comment

by:knowlton
ID: 36575372
>>>were you calling that jquery code in document.ready?

Yes.



Not sure about this:

$('table).each(function(){
  var id = $(this).attr("id");
  if (id.indexOf("ShoppingShippingMethods1") != -1)
  {
     $(this).css("background-color",  "blue");
  }
});



I may have more than one table on the page, but only one particular table I want to modify.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36575399
it will modify only that table, whose id contains 'ShoppingShippingMethods1'
0
 
LVL 5

Author Comment

by:knowlton
ID: 36575405
It's not working, sorry
0
 
LVL 82

Expert Comment

by:leakim971
ID: 36575427
what about : $('table[id*="ShoppingShippingMethods1"]').css("background", "blue");
test page : http://jsfiddle.net/2m74p/1/
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36575449
this code works

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script src="jquery-1.4.2.min.js"></script>
	<script>
		$(document).ready(function(){
			$('table').each(function(){
			  var id = $(this).attr("id");
			  if (id.indexOf("change") != -1)
			  {
				 $(this).css("background-color",  "blue");
			  }
			});
		});
	</script>
</HEAD>

<BODY>
<table id="one_change1">
    <tr>
        <td>1</td>
        <td>One</td>
        <td>yes</td>
    </tr>
    <tr>
        <td>1</td>
        <td>One</td>
        <td>yes</td>
    </tr>
</table>


<table id="one_Change1">
    <tr>
        <td>1</td>
        <td>One</td>
        <td>yes</td>
    </tr>
    <tr>
        <td>1</td>
        <td>One</td>
        <td>yes</td>
    </tr>
</table>

</BODY>
</HTML>

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 82

Accepted Solution

by:
leakim971 earned 250 total points
ID: 36575469
yes it work with "background-color"
http://jsfiddle.net/2m74p/2/
0
 
LVL 40

Assisted Solution

by:gurvinder372
gurvinder372 earned 250 total points
ID: 36575507
0
 
LVL 5

Author Comment

by:knowlton
ID: 36575776
Finally got this working:

  $('table[id*="ShoppingShippingMethods1"]').css("background-color", "blue");


does jQuery sometimes have trouble running?  It seemed to take a few refreshes and then it began working.
0
 
LVL 5

Author Closing Comment

by:knowlton
ID: 36575791
thx


more questions coming soon, keep your eyes peeled.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 36578760
As the great one says: just bring it!!! :)
0
 
LVL 5

Author Comment

by:knowlton
ID: 36580944
Oh, it is so broughten!!
0
 
LVL 5

Author Comment

by:knowlton
ID: 36580947
brung...bringed....
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
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…

863 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

24 Experts available now in Live!

Get 1:1 Help Now