How can I guarantee that the default action for links is always disabled?

Question

I am working on a project in which I use a lot of ajax calls to make the site interaction more elegant. The process I used is a link to a script that performs the corresponding action stored as href in the link tag. Then I use jquery to target this element and disable the default action and make an ajax call.

The problem is that the $(document).ready() function does not execute properly or is delayed during execution before the user can click the links. This causes the page to open through normal browser loading.

I have implemented code that determines whether the code is executed through ajax or through a browser, so all that happens is loading a blank page. In some cases, I can determine the type of execution and respond differently, but in other cases, if it is not executed by ajax, this causes problems.

Is there a way to make sure that the default action for links is disabled at any time, regardless of the page loading progress, or is there a better approach than the one I take?

Answer 1

You can run the code in a global scope, just place the JS code block after the DOM elements (links) that you work with. Thus, you do not rely on an event handler. Placing code before the closing </body> is a good place.

  <a class="my-links" href="/path/to/server-side.***"></a> <script> function myFunc () { $.ajax({ url : $(this).attr('href'),//use the href attribute for the link clicked as the URL for the AJAX request type : 'get', success : function (serverResponse) { alert('Success'); }, error : function () { alert('Error'); } }); //in a jQuery event handler, returning false is the same as calling: event.preventDefault(); event.stopPropagation() return false; } $('.my-links').bind('click', myFunc); </script> </body> 

Answer 2

Why not use some kind of code:

 <a href="javascript:void(0)" onclick="myJsFunc();">Link</a> 

Taken from: What is the "href" value that I should use for JavaScript links, "" or "javascript: void (0)"?

Answer 3

One thing I can think of is setting the href value to a hash. This will cause the click link to do almost nothing. Then you can save the URL in the data attribute.

 <a href="#" data-url="http://..." >go</a> 

 $('a').click( function() { var url = $(this).data('url'); }); 

Answer 4

Try it.

 $('a').click( function(e) { e.preventDefault(); }); 

Answer 5

If you want to prevent the default action from html, then something like this will work:

  <a onclick="some_function(); return false;"></a> 

This does not pollute your C # URL, and you do not need to set the href attribute for the element. This solution essentially matches using event.preventDefault(); in the click event function with jQuery.

Answer 6

The challenge here remains unobtrusive. One way to do this is to use html5 data attributes. You can specify href for links as such:

 <a href="#" data-href="actual/file/path.html"> 

Then in the document.ready document, you can change the contents of the data attributes in the href attribute or just use the click handler instead of the href attribute. That way, if the user clicks the link before your javascript bindings, nothing will happen. To swap all the information for the data-href attributes, the corresponding hrefs just use jquery:

 $(document).ready(function(){ $("a[data-href]").each(function(){ $(this).attr("href",$(this).attr("data-href")); }); });