Prevent a link from loading the clicked link in the modal window - javascript

I have a list of links which when clicked should open a modal window with some information. I am using e.preventDefault(); to prevent the default action of the browser and then add my own custom code to load my own data in the modal. The content loads just fine but after a few seconds the whole website whose link I clicked get loaded inside the modal.
It only happens with links from a specific website.
The links from that website should be the first one that I click. Clicking on other links first resolves this issue.
Here is my code:
$('a.modal-link').on('click', openModal);
function openModal(evt) {
evt.preventDefault();
var link = $(this).attr("href");
var text = $(this).text();
safeModal(link, text);
};
function safeModal(linkUrl, linkText) {
var link = linkUrl;
var page = window.location.href.split('?')[0];
var text = linkText;
var ajaxURL = "http://example.com/script.php";
$.ajax({
type: "POST"
, url: ajaxURL
, data: {
link: link
, page: page
}
, success: function (markup) {
$(".feed-modal .modal-body").html(markup);
}
})
};
I can also provide the link to the actual website, so you can see the issue yourself (I may not have explained it properly).
UPDATE: I am adding the link. Try clicking on the first headline and you will see the issue. After that, reload the webpage and then click on the sixth link. Now, close the modal and click on the first link again. Everything should work perfectly this time.
UPDATE: The syntax error doesn't exist. I made it in the question by mistake. :)

This code has a syntax error (delete })):
success: function (markup) {
$(".feed-modal .modal-body").html(markup);
}) //delete this
}
The whole function should be:
function safeModal(linkUrl, linkText) {
var link = linkUrl;
var page = window.location.href.split('?')[0];
var text = linkText;
var ajaxURL = "http://example.com/script.php";
$.ajax({
type: "POST"
, url: ajaxURL
, data: {
link: link
, page: page
}
, success: function (markup) {
$(".feed-modal .modal-body").html(markup);
//}) without this
}
})
};
Working DEMO

Related

Issue with ajax success function

Inside an iframe I have the following script:
$("a").on("click", function (e) {
e.preventDefault();
if (e.target.href) {
let link = e.target.href;
$.ajax({
url: "/newOrigin",
data: {
"link": link
},
type: "POST",
success: function (response) {
parent.document.getElementById("oframe").srcdoc = response.site;
parent.document.getElementById("oLink").href = link;
},
error: function (error) {
console.log(error);
}
});
}
});
Which does not work. The prevent default doesnt do it's job, meaning the event itself isnt being triggered. I believe the issue is with the second line in the ajax success function, since the code below works perfectly fine (srcdoc changes and console is logged).
$("a").on("click", function (e) {
e.preventDefault();
if (e.target.href) {
let link = e.target.href;
$.ajax({
url: "/newOrigin",
data: {
"link": link
},
type: "POST",
success: function (response) {
parent.document.getElementById("oframe").srcdoc = response.site;
console.log("Hello");
},
error: function (error) {
console.log(error);
}
});
}
});
oLink is the id of an a tag element (hyperlink) and oframe is the id of another iframe inside the parent of the iframe where this code is.
Does anyone know why this is happening?
EDIT: The site has two iframes and each have a title above them(with each title having an href of the page displayed in each iframe). When a link is clicked in the first iframe, an ajax request is sent with the link and the response has the html of that page which is sent to be displayed in the 2nd iframe (1st line in success function). I now want to change the href of the words above the 2nd iframe to be the link of the link clicked in the 1st iframe. So the two titles and two iframes are inside the same parent component (same level) and the script is inside the first iframe.
The html used is base.html + index.html from here (iframes and titles in index.html): https://github.com/MohamedMoustafaNUIG/AnnotatorVM/tree/master/app/templates
EDIT2: Apparently, the success function is isolated from the rest of the code, meaning it doesnt have access to the "link" variable. I solved this by returning the link in the response and accessing it from there. But the event is still not triggering :(

Prevent a click from loading a website and load some other custom content instead?

I am working on a project where a user can click on a link to get some additional information about it. The website uses Bootstrap Framework if that is important., The extra information is stored in a file on the server. Here is the code that calls the function openModal:
$('a.modal-link').on('click', openModal);
This is the JavaScript code for this function:
function openModal() {
var link = $(this).attr("href");
var page = "url-of-current-page";
var text = $(this).text();
$.ajax({
type: "POST",
url: "path/to/getdata.php",
data: {
link: link,
page: page
},
success: function(content) {
$(".modal-body").html(content);
}
})
};
This is supposed to set the HTML of modal-body to the data I received back. But it loads up the actual link inside the modal after showing up my data briefly. How can I prevent that?
Let me know if I need to add more details before downvoting.
As you're clicking an anchor, you probably want to prevent it from redirecting, change the function to
function openModal(e) {
e.preventDefault();
var link = $(this).attr("href");
var page = "url-of-current-page";
var text = $(this).text();
$.ajax({
type: "POST",
url: "path/to/getdata.php",
data: {
link: link,
page: page
},
success: function(content) {
$(".modal-body").html(content);
}
});
}

Load AJAX content in modal and change URL

My current setup is on click a modal popups with data from the ajax action which has been passed an id, I want the URL to change on click.
But I also want it so that if you directly accessed the URL it would load say index with the modal preloaded.
Very much like https://www.myunidays.com/perks/view/shoeaholics/online it loads the URL with the content in a model then if you click/close the modal the URL changes to the index page.
I have seen related questions about changing URL on click but couldn't find anything to do with accessing URL directly (is their a rule I can add to my .htaccess).
(Any code/direction is appreciated)
Create a partial view (so that layout isnt rendered twice) and add the action to controller
public function actionViewmodal($id)
{
return $this->renderPartial('_view', array('model' => $this->findModel($id)));
}
Then within my index I did the following
$(document).ready(function() {
$('a').click(function() {
pageurl = $(this).attr('href');
var Id = jQuery(this).attr('id');
$.ajax({
type: 'POST',
data: {
'modal_id' : Id,
},
url : 'http://localhost:8888/directory/viewmodal?id='+Id,
success: function(response) {
if(response) {
$('.modal_some_wrapper').html(response);
$('#modal_'+Id).modal('show');
$(document).on('hidden.bs.modal', modal_id, function (event) {
$(this).remove();
});
} else {
alert('Error');
}
}
});
//to change the browser URL to the given link location
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
//stop refreshing to the page given in
return false;
});
});
Could someone example how myunidays website works with modal and URL change?

Jquery not responding inside AJAX form results display

I've just started to really work in jquery and AJAX and for the most part I've seem to have the hang of it but this one little bit of code is not working.
I have a page that displays a summary of articles. When you click on the article name a popup window displays and the article information is show along with a X icon in the upper right hand corner that is to close the article window.
I'm handling the form processing via AJAX and it works great. The window pops up, all the proper information is displayed. The issue I am running into is the Close button function.
When you click on the close button, nothing happens. The jquery I have for it doesn't seem to respond. If I just use pure jquery/css the window appears and the close button works. If I handle the form with HTML/PHP it displays the window and the close button works.
Only when I handle the call via AJAX does the close button not respond and I am at a loss why this is.
Here is the simple jquery code for the close button:
$('.newsClose').click(function(){
$('#newsWindow').hide();
});
This is the AJAX call:
$(document).ready(function() {
$('#agentNewsForm').submit(function(e) {
e.preventDefault();
$.ajax({
type : 'POST',
data : $('#agentNewsForm').serialize(),
url : '/search/customer/agentNewsView.inc.php',
beforeSend : function() {
$('#processing').show();
},
error : function() {
$('#processing').hide();
$('#ajaxFormError').show();
},
// success callback
success : function (response) {
$('#processing').hide();
$('#newsWindow').html(response).show();
},
complete : function() {
$('#processing').hide();
},
timeout : 3000,
});
return false;
});
});
I'm sure it's something very simple that I am missing. Any thoughts?
$(document.body).on('click', '.newsClose' ,function(){
$('#newsWindow').hide();
});
See this SO:
Jquery event handler not working on dynamic content
Your code to close the window is only firing on document load, and your close button is inside #newsWindow, you can resolve this in one of two ways ...
$('#newsWindow>.content').html(response).show(); and keep your close button outside of the .content area.
or you can use the on method which will bind your close click on all new dom added to the document.
$(body).on('click', '.newsClose', function(e){ e.preventDefault; $('#newsWindow').hide(); });
Try this:
(function($){
var $newsWindow = $('#newsWindow');
$('body').on('click','.newsClose',function(e){
e.preventDefault();
$newsWindow.hide();
});
$('body').on('submit','#agentNewsForm',function(e){
e.preventDefault();
var $el = $(this);
var $process = $('#processing');
var $error = $('#ajaxFormError');
var _data = $el.serialize();
$.ajax({
type : 'POST',
data : _data,
url : '/search/customer/agentNewsView.inc.php',
beforeSend : function() {
$process.show();
},
error : function() {
$error.show();
},
success : function (response) {
$newsWindow.html(response).show();
},
complete : function() {
$process.hide();
}
});
});
})(jQuery);

Get specific page from URL and get the data with AJAX

window.onload= function(){
var page = window.location.hash;
if(window.location.hash != ""){
page = page.replace('#page:', '');
getdata('src/'.page);
}
}
After the window loads, i want the page to look in the URL, see if there is a # is set, and if so, i want to grab the page and display it inside a DIV. So for example, a link would be link. So when somenone clicks on the link, the page thinks and grabs the data from contact.php, and puts it inside the div. But now, this isn't working. No errors, no warnings, no nothing. Help please? Thanks!
Edit: Getdata:
function getdata(file){
openloading(); // loading message
$('#content').fadeOut('slow', function () { // Content is the div where all the content must be in
$.get(file, function(data) {
$('#content').html(data);
$('#content').fadeIn('slow');
})
})
updateusersonline();
}
And updateusersonline() directly too:
function updateusersonline(){
$.get('src/usersonline.php', function(data3) {
$('#usersonline').html(data3);
})
getdata('src/'.page); should be getdata('src/' + page);

Categories