0

I have been searching through StackOverflow for a bit and am unable to find a solution for this so any help would be great.

I have the following set up: 

<a data-toggle="modal" data-target=".bs-example-modal-sm" onclick="locDetail('Name','description','imageURL','sitelink','CategoryName' )">Title Here</a>

The html <a></a> above is basically put into a loop where it queries a specific database table and for each record replaces 'name', 'description','imageURL','sitelink','CategoryName' and 'Title Here' with the string being stored in the DB. So the rendered page might have 5 a tags each with different content in the onclick() fields.

To get it out of the way.. I dont have access to serverside code, or the data being sent to me from database... so all changes need to be done on frontend with html, css, and js/jquery. (the system uses special tags we wrap html in to designate it to run the foreach loop)

Here is the locDetail() function so you know what it does :

function locDetail(x,y,img,link,btn) {
    var message = x;
    var name = x;
    var details = y;
    var pagelink = link;
    var image = img;
    var btnName = btn;

    $('#locname').text(message);
    $('#dynamicName').text(name);
    $('#dynamicDetails').text(details);
    $('#dynamicImage').attr('src', image );
    $('#dynamicLink').attr('href', pagelink );
    $('#dynamicLink').text(btnName);
    $('#defaultSidebar').addClass('hidden');
    $('#dynamicSidebar').removeClass('hidden');   
}

And here is the modal that I am injecting/replacing content in:

  <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog"     aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <!-- header modal -->
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        <h3 id="dynamicName" class="modal-title"></h3>
      </div>
      <!-- body modal -->
      <div class="modal-body">
        <div class="row">
          <div class="col-md-12">
            <img id="dynamicImage" class="img-responsive pull-left" src="">            
            <p id="dynamicDetails">
            </p>
            <a id="dynamicLink" href="" class="btn "></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

So each time you click on a different link, it opens the same modal and then swaps out the content on that modal that is tied to that specific a tag.

Here is my issue.... when we do the foreach loop on the a tag, the Description gets replaced with the content stored in the DB for that field.. and most of the time it works, as the description is just plain text. However, there are also rows where the output of that field looks like this:

"The quick brown fox(a mammal similar to a canine), who happened to be name Jim, jumped over the lazy dog. Also, Jim' friend said "Hey" to the cat's pet mouse."

When the string has these special characters it breaks the page/script from working.

Does anyone have any suggestions on how I can deal with special characters being passed from the DB?

MetalStryker
  • 13
  • 4
  • The special characters are coming from the database, correct? You should be able to strip them with a regex. Check out @annakata's answer, it has a good explanation. You could always turn that into a function, and call it where necessary. Or am I not understanding your question correctly? http://stackoverflow.com/questions/4374822/javascript-regexp-remove-all-special-characters – Aaron Sep 23 '16 at 18:52
  • Hey.. Thanks for the reply. :-) – MetalStryker Sep 23 '16 at 19:45
  • I will look through that and see if I can get it to work in this case. Because at the end of everything.. I need all the special characters/formatting to still show when it injects them as text into the modal. Never used RegExpression before so this should be fun. – MetalStryker Sep 23 '16 at 19:53
  • Are the special characters escaped? That's probably what's doing it. I'd look at whatever values you have the 1st time it breaks, check the strings values at that occurrence, and initially escape *just* those special characters. So if you have a " for example, but nothing else, you can test it by simply replacing " with \" ... If it works and you get past that one on the next run, then finish the function so it adds escape before each special character. Also, if it's only " breaking it, change your string wrapper from " to ' and you won't need to escape. But that's only for quotes. – Aaron Sep 23 '16 at 20:01

0 Answers0