Как предотвратить перезагрузку страницы после перехода по гиперссылке, но перенаправить на эту страницу и отработать написанный там нужный код?

Мой вопрос может показаться запутанным, но на самом деле это не так. Позвольте мне прояснить вам вещи. Сценарий: у меня есть следующий HTML-код:

/*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>

Теперь при нажатии на эту гиперссылку я показываю всплывающее окно (здесь я использовал всплывающее окно jQUery Colorbox. Это нормально, даже если вы не знакомы с этой библиотекой.) В этом всплывающем окне есть две кнопки Да и Нет. На самом деле это не кнопки, это гиперссылки, но они отображаются как кнопки с использованием CSS. Теперь моя проблема заключается в том, что когда пользователь нажимает на гиперссылку 'Yes', страница перенаправляется на значение атрибута href, и страница перезагружается.

На самом деле я хочу перейти на страницу, указанную в атрибуте href, но страница не должна перезагружаться или обновляться. Как этого добиться? Ниже приведен код jQuery для всплывающего окна с цветовой палитрой, а также для кнопок Да и Нет, присутствующих в этом всплывающем окне. Я пробовал это много, но это не сработало для меня. Страница перенаправляется и перезагружается.

Мой код выглядит следующим образом:

$(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();
    });
  });
});

php html jquery page-refresh anchor
person PHPLover    schedule 25.03.2014    source источник
comment
добавьте e.preventDefault() в качестве первой строки в $('.fixed').click(function(e){   -  person Bryan    schedule 25.03.2014
comment
Что именно ты пытаешься сделать? этот бит сбивает с толку... страница перенаправляется на значение атрибута href, и страница перезагружается. На самом деле я хочу перейти на страницу, указанную в атрибуте href, но страница не должна перезагружаться или обновляться. Как этого добиться?   -  person Bryan    schedule 25.03.2014
comment
@Bryan: я хочу выполнить код со страницы, указанной в атрибуте href, но страница не должна загружаться. Я хочу предотвратить нормальное поведение тега привязки для него. Я пробовал e.preventDefault(), но это не сработало.   -  person PHPLover    schedule 25.03.2014
comment
как не получилось? Вам нужно будет сделать вызов ajax, чтобы запустить страницу без ее загрузки. api.jquery.com/jQuery.post   -  person Bryan    schedule 25.03.2014

Ответы (2)


arrow_upward
1
arrow_downward

Поэтому вам нужно загрузить страницу по URL-адресу, но не перейти к ней.

Вы можете использовать .load() .

Итак, в вашем случае допустим, что ваш класс div для поп-контейнера - .popup, а div, в который вы хотите загрузить содержимое URL-адресов, имеет идентификатор, скажем, #container.

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

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

});

Несколько вещей, которые нужно иметь в виду,

  1. Это в основном не будет работать для URL-адресов, указывающих на любой другой домен. (такая же политика происхождения)
  2. Любой контент, загруженный с помощью этой функции (.load()), должен быть вставлен в контейнер, и все входящие сценарии, если таковые имеются, должны быть выполнены.
person Mohd Abdul Mujib    schedule 05.01.2016

arrow_upward
0
arrow_downward

Вы можете сделать это с помощью history.js. Вот пример;

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;
});

Вы можете увидеть код здесь: код jsfiddle

Вы можете увидеть демо здесь: демонстрация jsfiddle

Примечание. URL-адреса в примере не найдены. Вам нужно обновить его в соответствии с вашими потребностями. Это просто загружает содержимое в href без обновления страницы.

person Hüseyin BABAL    schedule 25.03.2014