Мой вопрос может показаться запутанным, но на самом деле это не так. Позвольте мне рассказать вам все. В сценарии есть следующий код 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 для всплывающего окна colorbox, а также кнопки Yes и No, присутствующие в этом всплывающем окне. Я много пробовал, но для меня это не сработало. Страница перенаправляется и перезагружается.
Мой код выглядит следующим образом:
$(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(); }); }); });
Поэтому вам нужно загрузить страницу по URL-адресу, но не переходить к ней.
Вы можете использовать .load() .
Итак, в вашем случае, скажем, что ваш класс div для поп-контейнера – .popup , а div, где вы хотите загрузить содержимое URL-адресов, имеет идентификатор #container .
$(".popup a").on('click', function(e){ e.preventDefault(); var url = $(this).attr('delhref'); $("#container").load(url); });
Мало что нужно иметь в виду,
.load() ), должно быть вставлено в контейнер и все входящие скрипты, если они должны быть выполнены. Вы можете сделать это с помощью 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 code
Здесь вы можете увидеть демо: jsfiddle demo
Примечание: URL-адреса не могут быть найдены. Вам необходимо обновить его в соответствии с вашими потребностями. Это просто загружает контент в href без обновления вашей страницы.