[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 502
  • Last Modified:

jQuery selector syntax not correct?

$('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
Tom Knowlton
Asked:
Tom Knowlton
  • 6
  • 6
  • 2
2 Solutions
 
Gurvinder Pal SinghCommented:
try something like this

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

0
 
Gurvinder Pal SinghCommented:
were you calling that jquery code in document.ready?
0
 
Tom KnowltonWeb developerAuthor Commented:
>>>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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
Gurvinder Pal SinghCommented:
it will modify only that table, whose id contains 'ShoppingShippingMethods1'
0
 
Tom KnowltonWeb developerAuthor Commented:
It's not working, sorry
0
 
leakim971PluritechnicianCommented:
what about : $('table[id*="ShoppingShippingMethods1"]').css("background", "blue");
test page : http://jsfiddle.net/2m74p/1/
0
 
Gurvinder Pal SinghCommented:
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
 
leakim971PluritechnicianCommented:
yes it work with "background-color"
http://jsfiddle.net/2m74p/2/
0
 
Gurvinder Pal SinghCommented:
0
 
Tom KnowltonWeb developerAuthor Commented:
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
 
Tom KnowltonWeb developerAuthor Commented:
thx


more questions coming soon, keep your eyes peeled.
0
 
Gurvinder Pal SinghCommented:
As the great one says: just bring it!!! :)
0
 
Tom KnowltonWeb developerAuthor Commented:
Oh, it is so broughten!!
0
 
Tom KnowltonWeb developerAuthor Commented:
brung...bringed....
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 6
  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now