0

You know those webcams you can control over the internet? When you push the button to go left, it moves to the left.. but nothing else happens on the page.. Thats what I need to create.

I have a page that allows me to control lights in my house. When I click the button, I now have it load the php script (that controls the light) in a separate frame.. but I want to get rid of this. So basically I want to create a link that will call the php in the background, but that link won't do anything to the page its on.

Any ideas?

3
  • 1
    use ajax to make the call and add the onclick="return false";
    – Tarek
    Nov 11, 2012 at 16:00
  • you could use $.ajax() function of jQuery
    – Nelson
    Nov 11, 2012 at 16:00
  • Have you found your own solution? If yes, it's nice to post an answer and mark it as correct
    – Sheena
    Nov 15, 2012 at 11:26

9 Answers 9

1

Use a return false; in the click event:

<a href="#" onclick="return false;">Not Follow the Link</a> 

Explanation

The return value of an event handler determines whether or not the default browser behaviour should take place as well. In the case of clicking on links, this would be following the link, but the difference is most noticeable in form submit handlers, where you can cancel a form submission if the user has made a mistake entering the information.

The modern way of achieving this effect is to call event.preventDefault(), and this is specified in the DOM 2 Events specification.

1
  • 1
    he could just use js:void, lol but +1 anyway, i already posted void answer :P ... is stalking you ... LoL
    – SpYk3HH
    Nov 11, 2012 at 16:11
0

You will need to use ajax to achieve such a behavior.

Links that don't do anything are basically HTML links where you bind the onclick event to a JavaScript function which returns false. This makes the links "do nothing" but still executes the JavaScript which tells the camera to go left/right.

0

HTML 5 let's you officially use anchor elements without a href attribute. But I would just bind a Javascript event listener to whatever element your already have. I'd even add these kind of interactive elements themselves to the DOM with Javascript, since they don't serve any purpose if a user has JS disabled.

0
<a href="#" onclick="function()">...</a> 

will give you text that looks like a link.

If it's not really a link you may wish to consider a different kind of styling to emphasize the point and so that other underlined links show as links and this shows as something else. All depends on your needs and the situation.

0

I like jquery...

You will notice that the onclick function returns false. This is to stop the link from working...

<a onclick="do_it(this)" ...

then in your js

function do_it(anchor)
{
jQuery.ajax(
    {
            url     : anchor.get_attribute('href'),
            data    : {whatever},
            type    : 'POST',
            success : function(data)
            {
                alert('woo');
            }
    }
)
return false;
}

Pretty much what I'm doing here is:

So when the anchor is clicked jquery POSTs to the anchor's url. You can include data if you need to. This happens asynchronously so nothing happens on your page until jQuery gets response html(or whatever). If you want to do anything with the response you can get hold of it in the success function.

When the function returns it returns false, thus preventing the anchor from doing it's usual thing.

0

you talking about the javascript, create a onlick event / function and implement AJAX in specific DIV area

please check this out: http://www.w3schools.com/ajax/ajax_examples.asp

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
//You need `ajax_info.txt` file with some content
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>
0

You can use the following jquery solution:

HTML:

<a href="your_page.php" id="link1">Move lights to left</a>

JQUERY:

<script type="text/javascript">
   $(document).ready(function() {
      $('#link1').click(function(e) {
         e.preventDefault();
         $.ajax( $(this).attr('href') );
      });
   });
</script>
0

Can't believe no one has posted this yet. just use javascript void:

<a href="javascript:void(0)" onclick="doWhateverFunction(this)">some click function</a>

Its one of the oldest tricks in the book!

0

You need Ajax to retrieve datas from PHP without loading another page.

To "disable" the link:

<a href="javascript: myFunction(); return false;">Link</a>

Or:

<a href="#" onclick="myFunction(); return false;">Link</a>

Or just write a normal link and use jQuery (or another library) to add the event:

$('a').click(function(event) {
    // the code with ajax
    event.preventDefault();
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.