• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 88
  • Last Modified:

Displaying a simple HTML page from input embedded into a URL (part III)

hi,

I need to adapt the following script to allow any custom list of URLs + display text to show:

https://www.experts-exchange.com/questions/29086239/Displaying-a-simple-HTML-page-from-input-embedded-into-a-URL-part-II.html

Example:

Input URL:

mypage.html/links==Click for apples##https://www.google.com/search?q=apples@@Or for oranges##https://www.bing.com/search?q=oranges

Displayed output:

Click for apples
Or for oranges

Thanks
0
xenium
Asked:
xenium
  • 3
  • 3
2 Solutions
 
xeniumAuthor Commented:
In the above example the delimiters are @@ between URLs and ## between display text and URL, though other delimiters could be used.
0
 
Julian HansenCommented:
I would use URL Encoding to build your URL's rather than using double character delimiters.

I have chosen the following
?links=Label%20With%20Encoded%20Spaces
| (%7C) separates LABEL from URL
, (%2C) separates different link groups
= is encoded to %3D
? is encoded to %3F
Space is encoded as %20

Resulting URL
?links=Click%20for%20apples%7Chttps://www.google.com/search%3Fq%3Dapples%2COr%20for%20oranges%7Chttps://www.bing.com/search%3Fq%3Doranges

Open in new window

Code to handle this URL
<script>
$(function() {
  if (window.location.search.indexOf('=') > -1) {
    var search = decodeURIComponent(window.location.search.split('=')[1]).split(',');
	
    var list = $('#links');
    for(var i = 0; i < search.length;i++) {
	  var bits = search[i].split('|');
	  console.log(bits);
      var link = document.createElement('a');
      link.href = bits[1];
      link.target = '_blank';
      list.append($('<li>', {class: 'list-group-item'}).append($(link).html(bits[0])));
    }
  }
});
</script>

Open in new window


Example url http://www.marcorpsa.com/ee/t3003a.html?links=Click%20for%20apples%7Chttps://www.google.com/search%3Fq%3Dapples%2COr%20for%20oranges%7Chttps://www.bing.com/search%3Fq%3Doranges
0
 
ste5anSenior DeveloperCommented:
URL's of what schema? Cause your input "URL"'s are none. At least I don't recognize the protocol.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Julian HansenCommented:
Let's say your search string contains ',' that are not meant to be delimiters - then you can use something else.

Here is an example that uses !! instead of a comma for the group delimiter
URL
?links=Click%20for%20apples%7Chttps://www.google.com/search%3Fq%3Dapples!!Or%20for%20oranges%7Chttps://www.bing.com/search%3Fq%3Doranges

Open in new window

Updated code
<script>
$(function() {
  if (window.location.search.indexOf('=') > -1) {
    var search = decodeURIComponent(window.location.search.split('=')[1]).split('!!');

    var list = $('#links');
    for(var i = 0; i < search.length;i++) {
	  var bits = search[i].split('|');
      var link = document.createElement('a');
      link.href = bits[1];
      link.target = '_blank';
      list.append($('<li>', {class: 'list-group-item'}).append($(link).html(bits[0])));
    }
  }
});
</script>

Open in new window

Working sample here  http://www.marcorpsa.com/ee/t3003b.html?links=Click%20for%20apples%7Chttps://www.google.com/search%3Fq%3Dapples!!Or%20for%20oranges%7Chttps://www.bing.com/search%3Fq%3Doranges
0
 
xeniumAuthor Commented:
Great thanks a lot.
0
 
xeniumAuthor Commented:
Any idea why the page works on my local pc but not if i copy it to my server (bluehost)?
0
 
Julian HansenCommented:
It shouldn't matter where it is - the code runs in the browser?

Any errors in the console
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

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