CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mark Hart
Mark Hart

Reputation: 354

javascript error reading from popup

I have this segment of code that keeps throwing an error onclick. I have searched but have found nothing close to this type of code causing this error. Mostly it was issue in ajax calls. This is not an ajax call. Dev tools is telling me that it is happening on this line of code

<html>

I feel that is not really telling the whole story. error is - 

Uncaught SyntaxError: Unexpected token }

Here is the code:

<a href="javascript:void(0);"
        data-toggle="popover"
        data-container="body" 
        data-placement="right"  
        data-trigger="focus" 
        data-content="<i class='fa fa-envelope-o fa-lg'></i> <a href='#contact' id='share-email' onclick='scrollElement('#contact')'>[email protected]</a><br>
            <i class='fa fa-phone fa-lg'></i> 405.456.9447<br>
            <i class='fa fa-globe fa-lg'></i><a href='#footer' onclick='scrollElement('#footer')'> Warr Acres, Oklahoma</a><br>
            <i class='fa fa-twitter-square fa-lg'></i><a href='http://www.twitter.com/h3webelements' target='_blank'> @H3WebElements</a><br>
            <i class='fa fa-facebook-official fa-lg'></i><a href='https://www.facebook.com/H3WebElements' target='_blank'> H3 Web Elements</a></br>"
        data-html="true">
        <i class="fa fa-user fa-3x"></i></a>

Javascript:

function scrollElement (target) {
     $('html, body').animate({
          scrollTop: $(target).offset().top
      }, 1500);

 }

Please note that the scrollElement function works fine on other aspects of the page- such as the navbar. I believe that the issue is in the data-content section of the link I am using as a popup on a fixed position element. I am forced to use single ' quotes. I have tried to escape the \' and used \" but that just ended up breaking everything. This should function as to scroll to the element as my navbar does already, right now it just takes it directly to the selected element.

Thanks

Upvotes: 0

Views: 96

Answers (1)

Kenney
Kenney

Reputation: 9093

The problem is indeed in the repeating single quotes:

onclick='scrollElement('#contact')'

Since this code is in an attribute value we can use HTML entities to escape the quotes:

onclick=&quot;scrollElement('#contact')&quot;

Here's a working snippet. Note that only the email link in the popover has been corrected:

jQuery(function($){
   $( 'a' ).popover();
})

function scrollElement(target) {
  console.log("scrollElement", target);
     $('html, body').animate({
          scrollTop: $(target).offset().top
      }, 1500);

 }
#contact { position: relative;top:1000px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>

<a href="javascript:void(0);"
        data-toggle="popover"
        data-container="body" 
        data-placement="right"  
        data-trigger="focus" 
        data-content="<i class='fa fa-envelope-o fa-lg'></i> <a href='#contact' id='share-email' onclick=&quot;scrollElement('#contact')&quot;>[email protected]</a><br>
            <i class='fa fa-phone fa-lg'></i> 405.456.9447<br>
            <i class='fa fa-globe fa-lg'></i><a href='#footer' onclick='scrollElement('#footer')'> Warr Acres, Oklahoma</a><br>
            <i class='fa fa-twitter-square fa-lg'></i><a href='http://www.twitter.com/h3webelements' target='_blank'> @H3WebElements</a><br>
            <i class='fa fa-facebook-official fa-lg'></i><a href='https://www.facebook.com/H3WebElements' target='_blank'> H3 Web Elements</a></br>"
        data-html="true">
        <i class="fa fa-user fa-3x"></i></a>

<div id='contact'>Test!</div>

Upvotes: 2

Related Questions