[Webinar] Streamline your web hosting managementRegister Today

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

Jquery not working in Safari

Hi,

I have a jquery function that works in FF, IE and Chrome but wont work in safari

<script type="text/javascript">
$(document).ready(function(){
    $('#<!--$ tdcDateID-->').click(function(){
        $(this).next().toggle();
                 
        $(this).html($(this).text() == 'Less' ?'More' : 'Less');
        $('#<!--$ tdcLocationID -->').toggle();
        
    });
})
</script>


                         <a id="<!--$ tdcDateID-->">More</a>
                               <div style="width:80px;" id="<!--$tdcDateID-->" class="moredates data-collapsed="true">  

Some info....
</div>

Thanks for the help!

Open in new window

0
smfmetro10
Asked:
smfmetro10
  • 5
  • 4
1 Solution
 
leakim971PluritechnicianCommented:
set a test page here as SIMPLE as you can : http://jsfiddle.net/
0
 
Dave BaldwinFixer of ProblemsCommented:
Your identifier in this statement...

<a id="<!--$ tdcDateID-->">More</a>

is formatted as an HTML comment.  I'm surprised your code works in any browser.  In particular because I think javascript expects a letter as the first character.  What happens if you use just...

<a id="tdcDateID">More</a>
0
 
Dave BaldwinFixer of ProblemsCommented:
In the Firefox Error Console, I get

[19:07:56.625] Error: Syntax error, unrecognized expression: #<!--$ tdcDateID--> @ http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js:4

and it doesn't work.  If I put 'tdcDateID' in for the 'id', it does work, both in Firefox on my PC and Safari on my MacBook Pro.
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
smfmetro10Author Commented:
<!--$ tdcDateID--> is an Idoc script variable.
0
 
smfmetro10Author Commented:
I set up a test fiddle... Don't know if it will help as there are a lot of Idoc script variables in the function.  Viewing the source on safari confirms that the variables are being picked up though.

http://jsfiddle.net/smfmetro/DR5mq/
0
 
Dave BaldwinFixer of ProblemsCommented:
It doesn't help because the "Idoc script variables" are not valid by themselves in javascript.  If you could give us an example from the 'View Source" that is not working then we might be able to figure it out.
0
 
smfmetro10Author Commented:
OK- thanks for the help!

This is straight out of the view source of safari:

<script type="text/javascript">
     $(document).ready(function(){
    $('#CON_ID_004633_1').click(function(){
   $(this).html($(this).text() == '[-]' ?'[+]' : '[-]');
        $('#CON_ID_004633_B').toggle();
         $('#CON_ID_004633_A').toggle(); 
    });
})
</script>
<a id="CON_ID_004633_1">[+]</a><span style="color:#959595;">&nbsp;&nbsp;&nbsp;&nbsp;Sep 5</span>
                               <div style="width:80px;" id="CON_ID_004633_A" class="moredates" data-collapsed="true">   
						<span style="color:#959595;">Oct 5</span>
						<br />
						<span style="color:#959595;">Dec 5</span>
						<br />
				</div>

   <div style="width:135px;" id="CON_ID_004633_B" class="moredates" data-collapsed="true"> 
					
						<span style="color:#959595;">CA - San Francisco</span><br />
						<span style="color:#959595;">OR - Portland</span><br />
			</div>

Open in new window

0
 
Dave BaldwinFixer of ProblemsCommented:
This is the demo page I made from your code and it works in Firefox on my PC and Safari on my MacBook Pro.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Untitled</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#CON_ID_004633_1').click(function(){
			$(this).html($(this).text() == '[-]' ?'[+]' : '[-]');
			$('#CON_ID_004633_B').toggle();
			$('#CON_ID_004633_A').toggle(); 
			});
	})
</script>
</head>
<body>
<a id="CON_ID_004633_1">[+]</a><span style="color:#959595;">&nbsp;&nbsp;&nbsp;&nbsp;Sep 5</span>
                               <div style="width:80px;" id="CON_ID_004633_A" class="moredates" data-collapsed="true">   
						<span style="color:#959595;">Oct 5</span>
						<br />
						<span style="color:#959595;">Dec 5</span>
						<br />
				</div>

   <div style="width:135px;" id="CON_ID_004633_B" class="moredates" data-collapsed="true"> 
					
						<span style="color:#959595;">CA - San Francisco</span><br />
						<span style="color:#959595;">OR - Portland</span><br />
			</div>
                                            

Thanks for the help!
                                  
</body>
</html>

Open in new window

0
 
smfmetro10Author Commented:
Yeah I hear ya. Works for me too. Safari must be getting tangled up somewhere else in the code... OK -  thanks!
0
 
Dave BaldwinFixer of ProblemsCommented:
You're welcome, glad to help.
0

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now