CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Michi Bee
Michi Bee

Reputation: 21

Converting inline Javascript to an onclick event

I'll be blunt. Most of my skill is in pure HTML and CSS. I'm trying more and more to expand into JavaScript and JQuery and have some experience, enough to understand many simple tutorials and implement them with my own changes, but not enough to do much on my own without a cheatsheet or a similar example to work from. Anyway:

I wanted to try THIS tutorial I found to use Ajax to replace the contents of a div, but the implementation requires poor markup (inline JS). He doesn't suggest a way to utilize an onclick event instead, and I would much prefer that to inline JS.

This is "Ajax Engine" he provides, which I choose to import/link because I feel it's silly to dump all that in the HTML:

<script type="text/javascript">
// Version 1.1 of May 16, 2013
function RequestContent(url,id) {
var http;
if (window.XMLHttpRequest) {
   try { http = new XMLHttpRequest(); }
   catch(e) {}
   } 
else if (window.ActiveXObject) {
   try { http = new ActiveXObject("Msxml2.XMLHTTP"); }
   catch(e) {
      try { http = new ActiveXObject("Microsoft.XMLHTTP"); } 
      catch(e) {}
      }
   }
if(! http) {
   alert('\n\nSorry, unable to open a connection to the server.');
   return false;
   }
http.onreadystatechange = function() { PublishContent(http,id); };
http.open('GET',url,true);
http.send('');
}

function PublishContent(content,id) {
try {
   if (content.readyState == 4) {
      if(content.status == 200) { document.getElementById(id).innerHTML=content.responseText; }
      else { alert('\n\nContent request error, status code:\n'+content.status+' '+content.statusText); }
      }
   }
catch(error) { alert('Error: '+error.name+' -- '+error.message); }
}
</script>

In order to use the function RequestContent, he only offers the option to plop inline JS like so:

<ul>
<li>
<a href="javascript:RequestContent('/library/ajaxcontent1.html','fill-me3')">
Click here</a> to fill the div below with the Master Form .PHP logo.
</li>
<li>
<a href="javascript:RequestContent('/library/ajaxcontent2.html','fill-me3')">
Click here</a> to fill the div below with the Master Form V4 logo.
</li>
<li>
<a href="javascript:RequestContent('/library/ajaxcontent3.html','fill-me3')">
Click here</a> to fill the div below with the Most Popular logo.
</li>
</ul>

I understand how the inline JS works, I'm just not sure how to write it in a way to allow for an onclick event.

How would I go about converting the inline JS? I really appreciate the help.

Upvotes: 1

Views: 1388

Answers (5)

xkcd149
xkcd149

Reputation: 841

Using a data attribute to hold the value would allow you to add more links without having to write more javascript.

HTML

<ul>
  <li>
    <a href="#" class="someLink" data-request-content="ajaxcontent1">
Click here</a> to fill the div below with the Master Form .PHP logo.
  </li>
  <li>
    <a href="#" class="someLink" data-request-content="ajaxcontent2">
Click here</a> to fill the div below with the Master Form V4 logo.
  </li>
  <li>
    <a href="#" class="someLink" data-request-content="ajaxcontent3">
Click here</a> to fill the div below with the Most Popular logo.
  </li>
</ul>

Javascript

$('.someLink').on('click', function(e) {
  var content = $(e.currentTarget).data('request-content');
  RequestContent('/library/' + content + '.html', 'fill-me3');
});

Upvotes: 0

Katana314
Katana314

Reputation: 8610

Only use an <a> element when you intend to navigate, either this frame or another one, to a destination page. Use any other element for javascript events, and add CSS to make it look clickable if you like. (Note that there are ways to shorten the below script using JQuery or other JS toolkits)

function NavigateTo(dest) {
  // ...
}

var navTos = document.querySelectorAll('.navTo');
for (var i = 0; i < navTos.length; i++) {
  navTos[i].addEventListener('click', function(evt) {
    NavigateTo(evt.target.dataset.navPage);
  });
}
.link {
  color: blue;
  cursor: pointer;
}
.link:hover {
  text-decoration: underline;
}
<span class="link navTo" data-nav-page="place.htm">Go here</span>

Upvotes: 0

DinoMyte
DinoMyte

Reputation: 8868

Here's a more generic and simple way to call the function using jquery. You should add the link and other attribute as part of the anchor tag. 

<ul>
<li>
<a href="#" link='/library/ajaxcontent1.html' class='fill-me3'>
Click here</a> to fill the div below with the Most Popular logo.
</li>
<li>
<a href="#" link='/library/ajaxcontent2.html' class='fill-me3'>
Click here</a> to fill the div below with the Most Popular logo.
</li>
<li>
<a href="#" link='/library/ajaxcontent3.html' class='fill-me3'>
Click here</a> to fill the div below with the Most Popular logo.
</li>
</ul>
<script>
$(document).ready(function(){
$('a').click(function()
{
  RequestContent($(this).attr("link"),$(this).attr("class"));
});
});

function RequestContent(url,cls)
{
  alert(url);
  alert(cls);
}
</script>

Example : https://jsfiddle.net/DinoMyte/Lkb0s60n/1/

Upvotes: 0

joe_young
joe_young

Reputation: 4125

To use the onclick event in external javascript, your elements will need to have IDs:

<ul>
  <li>
    <a id="one">
Click here</a> to fill the div below with the Master Form .PHP logo.
  </li>
  <li>
    <a id="two">
Click here</a> to fill the div below with the Master Form V4 logo.
  </li>
  <li>
    <a id="three">
Click here</a> to fill the div below with the Most Popular logo.
  </li>
</ul>

And in your external javascript you will use Document.getElementById() and the .onclick property:

document.getElementById("one").onclick = function() {
    RequestContent('/library/ajaxcontent1.html','fill-me3');
}
document.getElementById("two").onclick = function() {
    RequestContent('/library/ajaxcontent2.html','fill-me3');
}
document.getElementById("three").onclick = function() {
    RequestContent('/library/ajaxcontent3.html','fill-me3');
}

Upvotes: 0

Seth Flowers
Seth Flowers

Reputation: 9190

Just change href to onclick, and get rid of javascript:.

<ul>
  <li>
    <a onclick="RequestContent('/library/ajaxcontent1.html','fill-me3')">
Click here</a> to fill the div below with the Master Form .PHP logo.
  </li>
  <li>
    <a onclick="RequestContent('/library/ajaxcontent2.html','fill-me3')">
Click here</a> to fill the div below with the Master Form V4 logo.
  </li>
  <li>
    <a onclick="RequestContent('/library/ajaxcontent3.html','fill-me3')">
Click here</a> to fill the div below with the Most Popular logo.
  </li>
</ul>

Upvotes: 1

Related Questions