Update contents of bootstrap popover afer a successful ajax call - javascript

When I click at a target div I want a popover to be displayed (I may show a loading label as the content) and at the same time an ajax get request is sent to server to fetch the data. Once the data is back, I want to update this already open popover.
Here is my code:
$(document).on('click', '.row-client', function (e) {
var id = $(this).attr('id');
var str = id.split('-');
var component = str[0];
var clientId= str[1];
$.ajax({
url: '../Clients/Index',
type: 'GET',
data: { clientId: clientId },
dataType: 'html',
success: function (data) {
$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: data
});
},
error: function (xhr, status, error) {
alert(xhr.responseText);
}
});
});
Problems I encounter with is:
Popover is not displayed automatically at first the click or when the data is loaded. I need to keep clicking. Once the data is back and loaded, the popover is displayed at the 'next' click. Why is this so?
Is there any way I can keep the popover open and update the content automatically after I got the data?
Upon the next click to raise the popover, I want the content to be blank (it is not now). What's preventing it?


The call to $().popover does not make the popover appear. It only adds popover behavior to the DOM element. What makes it appear later is the click, depending on the "trigger" you configure for the popover.
Try invoking $('.popper').popover() as soon as the document is ready.
And to change the contents of the popover, while it is shown, try the following:
$('.popper').attr("data-content","new content");
$('.popper').data('bs.popover').show();

Related

Control whether a link is clickable or not

I want to control whether a link is clickable or an error should be displayed (Based on result of an ajax call).
<a class="lnkCustomer" href="http://localhost/viewcustomer" target="_blank" data-customerno="237">View</a>
I get to the point where I am able to set the link as "allowed to be clicked":
// Authorized
anchor.data("authorized", true);
However when I run this code, the link still does not open. Ideally once the ajax call is complete, it should invoke the click event. I believe the issue is in this line.
// Trigger Anchor
anchor.click();
This is the entire code:
<script type="text/javascript">
$(".lnkCustomer").click(function(e)
{
var customerNo = $(this).data('customerno');
var anchor = $(this);
// Check for authorized
if (anchor.data("authorized"))
{
return true;
}
$.ajax(
{
url: 'http://localhost/checkcustomer',
type: 'POST',
dataType: 'json',
data: { customerNo: customerNo },
cache: false,
success: function (result)
{
if (result.success)
{
// Authorize
anchor.data("authorized", true);
// Trigger Anchor
anchor.click();
}
else
{
// Show a message in a alert or div
alert('Not authorized');
}
}
});
// Default to false (Do not process anchor)
return false;
});
</script>
Notes: I am using class instead of id in the anchor because I have various links that will trigger this event. However as you can see, this should not be an issue since I am always referring to the individual object:
var anchor = $(this);

You cannot open a new tab without popups enabled or the user's click for that event.
You cannot delay it with promises or invoke a trusted click event.
If you want to verify a user can click your link, then do the API request on page load and store the result.
Or make your link into a button with a two click process for checking and then opening.

There is a simple answer : you can't trigger a click if it doesn't come from a trusted event (change, click, dblclick, mouseup, reset, submit).
Here you are trying to trigger a click after an AJAX (asynchronous) request, which is not allowed.
More info here.
As suggested you could replace it by window.open(href, '_blank'); but beware it could also be blocked by the browser parameters.

Unfortunately, as others mentioned, href cannot be delayed. I did find a work-around to suit the particular scenario. I created an intermediary page when user clicks on the href. This page then performs the ajax request (server side), if it is validated it goes on and display the resource. Otherwise it displays an error and stays on the intermediary page.

Anytime you want to override a browsers default action, you need to call .preventDefault() at the top of the event listener.
After that, since you're server side validating the link every time it's clicked, there's really no reason to store it's state client side. Instead of trying to re-click the link, you could just call window.open(), which is what achors do by default.
$('.lnkCustomer').on('click', function(e) {
e.preventDefault(); //makes anchor click do nothing
let href = this.href;
//pretend this is the call back from your ajax call
//$.ajax(
// success: function(result) {
if (result.success) {
window.open(href, '_blank'); //what an anchor click does when not prevented
} else {
alert('Not authorized');
}
});

Try triggering click like this: anchor[0].click(); and see if that works.
For readability, you can save a reference to DOM element of anchor, not just the jQuery object:
var anchor = $(this);
var anchorEl = $(this)[0];
and trigger click using the DOM element:
anchorEl.click();

I think we cannot overwrite the default behavior of the anchor tag but we can work around it. In this solution, I have replaced href with data-link. And mimic the anchor mechanism with window.open.
Code :
<a class="lnkCustomer" data-link="http://localhost/viewcustomer1" data-customerno="111" data-auth>View</a>
<a class="lnkCustomer" data-link="http://localhost/viewcustomer2" data-customerno="237" data-auth>View</a>
<a class="lnkCustomer" data-link="http://localhost/viewcustomer3" data-customerno="237" data-auth>View</a>
<script type="text/javascript">
$(".lnkCustomer").click(function (e) {
var customerNo = $(this).data('customerno');
var linkToGo = $(this).data('link');
var anchor = $(this);
// Check for authorized
if (anchor.data("authorized")) {
var win = window.open(linkToGo, '_blank');
}else{
$.ajax(
{
url: './checkcustomer.php',
type: 'POST',
data: { customerNo: customerNo },
cache: false,
success: function (result) {
if (result == 'authorized') {
anchor.data("authorized", true);
//new code
anchor.attr("href", linkToGo);
anchor.click();
// Dont us this due to popup blocker
//var win = window.open(linkToGo, '_blank');
}
else {
// Show a message in a alert or div
alert('Not authorized');
}
}
});
}
});
</script>
Please note :
New note for security: As you can see we are using quite a visible data-link and anyone with enough effort can visit the link whether it is authorized or not. If the above answer gets you through the popup blocker, the next few things you can do is maybe only fetch accessible links from the start
OR add a "show links" button and then fetch only accessible links to the user. You can do it via ajax. and also you will not need this JS/Jquery code.
OR assign a random number to data-link and then fetch in your PHP code see if it is authorized if it is then only return accessible HTTP link. many ways to improve.
You can use CSS to style the anchor tags, which I have not in the solution
One method I tried was with use of preventDeault, but it do not work

AFAICT you are 90% of the way there, you're just missing a few key details.
Working JSFiddle.
e.preventDefault(): As already mentioned in other answers/comments, you need to prevent the default action which the event triggers, otherwise the browser will just begin the process of navigating to the link while your JS is still running.
anchor.click() will trigger a click on your link, which will ... start the whole process again! You'll get stuck in a recursive loop. The click is done, you now want to navigate. To open a new window in Javascript, use window.open(href, '_blank');
If your link is already authorised, you need to do the same as if the AJAX authorises it the first time around. Instead of return true;, you need to do the same window.open() again.
Also a suggestion - the convention for using GET or POST is:
use POST when changing data, eg creating a user, or making a purchase, logging in - something which should not happen 2x if you hit reload;
use GET when viewing data, no state changes, no harm in reloading;
AFAICT you are simply querying some customer details, so this should be a GET request.
I've modified you code to work with JSONPlaceholder - a dummy REST API which provides JSON data for this kind of situation (where we need to test an AJAX call with a working response), so we can simulate your AJAX call. It only accepts GET requests, so I've changed your POST to GET, and I've updated the test of the response based on the dummy data it sends back. You can see the output we're working with for User ID 1, and User ID 2.
Since you need to do the "go to the link" chunk of code in more than one place, I extracted that to a function you can call, so we don't need to duplicate that code in several places.
I also added a few extra alerts so you can be sure of what is happening.
See it all in action on JSFiddle.
Javascript:
// A function to actually open the new page, since we need to do this in
// more than one place.
function goToLink(anchor) {
let href=anchor.attr('href');
window.open(href, '_blank');
}
$(".lnkCustomer").click(function(e) {
// Prevent the default action this event would normally trigger from
// happening - in this case, navigating to the target href.
e.preventDefault();
var customerNo = $(this).data('customerno');
var anchor = $(this);
// Check for authorized, and open the link if so
if (anchor.data("authorized")) {
alert("Already authorized, let's go!");
goToLink(anchor);
}
// https://jsonplaceholder.typicode.com/ is a dummy REST JSON generator.
// Let's use it to simulate your AJAX call. User ID 1's username is Bret,
// user ID 2's username is Antonette. Let's use customerNo in the URL to
// retrieve user ID 1 or 2, and simply allow the click if the username is
// Antonette.
// First build the URL:
let url = 'https://jsonplaceholder.typicode.com/users/' + customerNo
$.ajax({
url: url,
type: 'GET',
dataType: 'json',
data: {
customerNo: customerNo
},
cache: false,
success: function(result) {
if (result.username === 'Antonette') {
// Authorize and go
alert("Authorization success, let's go!");
anchor.data("authorized", true);
goToLink(anchor);
} else {
// Show a message in a alert or div
alert('Not authorized');
}
}
});
// Default to false (Do not process anchor)
return false;
});
HTML:
<ul>
<li><a class="lnkCustomer" href="https://google.com/" target="_blank" data-customerno="1">Google (no go)</a></li>
<li><a class="lnkCustomer" href="https://stackoverflow.com/" target="_blank" data-customerno="2">Stackoverflow (allowed)</a></li>
</ul>

Using window.pushState with url change with ajax

I have a project that with every link clicked, the history.pushState gets activated and an address is being updated accordingly. I then have an ajax function that only loads the partial page. When the partial page is loaded, I then click on the item and the page gets redirected. However, when I click the back button, all I see is the partial ajax page and not the parent page.
Here's my code:
$('#brands a').click (function(e) {
e.preventDefault();
href = $(this).attr('href');
history.pushState({}, '', href);
$.ajax({
type: 'get',
url: '{{route("show.watches")}}',
success: function(data) {
$('#product-items').html(data);
}
})
})
The product-items loads items while the parent page retains the old information. I then click on the item and the page gets redirected. However, when I click the back button, all I see are the items without any styling and the parent page is gone. I was told to put
window.onpopstate = function(event) {
location.reload();
};
in my partial page, that's being loaded but it doesn't get activated until I press the back button the second time. What am I missing? Can anyone help?

Ajax call when user presses back button

I have a problem in my current application. I load lots of page content via ajax and it works always as expected. However, every time user visits another page of my application and clicks back button, those ajax calls is sent every time. I found myself deleting all of the content before ajax call and load it after that. Is there a simple way for such a case ? I mean, I would like to know if there is a way that I can be informed as back button is clicked so I don't need to make another ajax call ?
This is html file:
<div id="contentToBeLoaded">
</div>
It's my current java script now:
$(document).ready(function(){
$("#contentToBeLoaded").empty(); // This is to the handle back button is clicked
$.ajax({
type: 'GET',
url: '/pageToLoadContent',
dataType: 'html',
success: function(html) {
$("#contentToBeLoaded").html(html);
},
error: function(error) {
console.log(error);
}
});
}

How to show a hidden element with jQuery

I have a busy icon on my page which has a class of "hidden". When the user clicks a button to start processing input data, I want to show the busy icon. I am doing this with
$("#busy").removeClass("hidden");
Immediately after removing the hidden class, I use AJAX to get some data from the server, display it on the page and add the hidden class back to the busy image.
My problem is that the busy icon is never displayed. I'm not a javascript/jQuery expert but I think this is because the page isn't redrawn until after the script has finished executing?
How can I get the busy icon to display while the AJAX processing is in progress?

Try this
First u link ur image on a div
Then
Try this, it will work fine
$.ajax({
url : "URL",
data: { data },
beforeSend: function(){
$("#loading").show();
},
complete: function(){
$("#loading").hide();
},
success: function (response) {
});
});

Javascript / Ajax - Trigger event after redirection

I have an AJAX function which triggers my function before the redirection at a URL. So, I need to trigger it later.
Here is the code, I will explain it below.
$('#backToLogin').click(function(e){
$.ajax({
url: "/login/",
success: function(result){
$('#member-space').show();
$("#form-container").html(result);
console.log('success');
},
complete: function(complete){
},
error: function(er) { alert(er); },
});
});
backToLogin is the button on the first page which make the redirection.
member-space is the DIV on the second page that I want to show but it's hidden. I have a button to show it but I want that DIV appear without any click event.
PROBLEM : The DIV member-space appears before the redirection.
Any idea?

Categories

Resources