How to prevent reloading of a page after clicking on a hyperlink but redirect to that page and work out the necessary code written over there?

Question

My question may sound confusing but actually it's not. Let me clear you the things. The scenario is I've following HTML code:

/*This is the hyperlink I've given for example here. Many such hyperlinks may present on a webpage representing different question ids' */
<a delhref="http://localhost/eprime/entprm/web/control/modules/questions/manage_question_issue.php?op=fixed&question_id=21679" title="Fixed" href="#fixedPopContent" class="fixed" data-q_id="21679" id="fix_21679">Fixed</a>

/*Following is the HTML code for jQuery Colorbox pop-up. This code has kept hidden initially.*/
<div class="hidden">
  <div id="fixedPopContent" class="c-popup">
    <h2 class="c-popup-header">Question Issue Fix</h2>
    <div class="c-content">         
      <h3>Is question reported issue fixed?</h3>
      <a href="#"class="c-btn" id="fixedPop_url">Yes</a>
      <a href="#"class="c-btn">No</a> 
    </div>
  </div>
</div>

Now upon clicking on this hyperlink I'm showing a pop-up(I've used jQUery Colorbox pop-up here. It's ok even if you are not familiar with this library.) On this pop-up there are two buttons Yes and No. Actually these are not buttons, these are hyperlinks but showing as a buttons using CSS. Now my issue is when user clicks on hyperlink 'Yes' the page is redirecting to the href attribute value and the page reloads.

Actually I want to get to the page mentioned in href attribute but the page should not get reload or refresh. How to achieve this? Following is the jQuery code for colorbox pop-up as well as for Yes and No buttons present on this pop-up. I've tried this much but it didn't work for me. The page is getting redirected and reloaded.

My code is as follows:

$(document).ready(function()  {
  $(".fixed").click(function(e) { 
    var action_url1 = $(this).attr('delhref');
    var qid = $(this).data('q_id');

    $('#fixedPop_url').attr('href', action_url1);
    $(".fixed").colorbox({inline:true, width:666});

    $("#fixedPop_url").click(function(event) {
       event.preventDefault();
      $("#fix_"+qid).hide();
      $("#notfix_"+qid).show();
    });       

    $(".c-btn").bind('click', function(){
      $.colorbox.close();
    });
  });
});

Answer 1

So you need to load the page at the url but not navigate to it.

You can use .load() .

So in your case, lets say that your pop container div class is .popup, and the div where you want to load the urls content has an id say #container.

$(".popup a").on('click', function(e){
e.preventDefault();
var url = $(this).attr('delhref');

$("#container").load(url);

});

Few things to keep in mind,

1. This will mostly not work for urls pointing to any other domain. (Same Origin Policy)
2. Any content loaded with this function (.load()) shall be inserted within the container and all the incomming scripts if any shall be executed.

Answer 2

You can do that with history.js. Here is an example;

HTML:

<a href="/delete/1">Delete</a>
<a href="/update/2">Update</a>


<div id="content"></div>

JS:

var History = window.History;
if (!History.enabled) {
    return false;
}

History.Adapter.bind(window, 'statechange', function() {
    var State = History.getState();

    $('#content').load(State.url);
});

$('body').on('click', 'a', function(e) {

    var urlPath = $(this).attr('href');
    var Title = $(this).text();
    History.pushState(null, Title, urlPath);
    return false;
});

You can see code here: jsfiddle code

You can see demo here: jsfiddle demo

Note: Urls in example cannot be found. You need to update it according to your needs. This simply, loads content in href without refreshing your page.