Hello I am trying to show "Loading..." text or spinner image until the dynamic ajax content loads because I have a very large number of data to fetch with takes at least 2-3 seconds to fully load here is my Ajax code
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
trigger: "hover",
title:fetchData,
html:true,
placement:'right'
});
function fetchData(){
var fetch_data = '';
var element = $(this);
var id = element.attr("id");
$.ajax({
url:"includes/modDashboard/GetSummaryInfo.php",
method:"POST",
async:false,
data:{id:id},
success:function(data){
fetch_data = data;
}
});
return fetch_data;
}
});
My solution related to the issue:
jshiddle
<div class="col-lg-6">
<a href="#" data-toggle="popover1" class="btn btn-block btn-default" id="cash_4">
Cash Summary
</a>
Good luck and regards Rtra :)
Related
I want to delete some field in datatable using 'a' tag as a button. If that button is pressed, it will delete field in my database using ajax without refreshing page but if i click the button, it doesn't do anything. I am weak in JS or jQuery, I hope you guys will help me, thanks.
This is my JS
$('#delete-agenda').click(function(e) {
e.preventDefault();
var data = {};
data['id_itenerary'] = $(this).attr('value');
$.ajax({
url: 'http://localhost/pandansari/admin/single_trip/delete_agenda',
type: 'post',
data: data
});
});
This is my 'a' tag
<a id="delete-agenda" class="btn btn-sm btn-danger" value="<?php echo $agenda['id_itenerary'] ?>">Delete</a>
This is my controller function
public function delete_agenda() {
$id_itenerary = $this->input->post('id_itenerary');
$this->agenda_model->delete_agenda($id_itenerary);
}
This is my model function
public function delete_agenda($id_itenerary) {
$this->db->where('id_itenerary', $id_itenerary);
$this->db->delete('tb_itenerary');
}
Try this
HTML:
<a id="delete-agenda" href="#" class="btn btn-sm btn-danger" data-id="<?php echo $agenda['id_itenerary'] ?>">Delete</a>
JS:
$(document).ready(function() {
$('#delete-agenda').click(function(e){
e.preventDefault();
var id = $(this).attr('data-id');
$.ajax({
url: 'http://localhost/pandansari/admin/single_trip/delete_agenda',
type: 'post',
data: { 'id_itenerary' : id }
});
});
});
You will still have to remove the datatable entry from the table; otherwise the change will only be apparent on refresh/reload.
$('#delete-agenda').on('submit',function(e){
e.preventDefault();
//write your remaining code here
});
I'm building a random quote generator web app, and I'm able to call an API using JQuery, then use the returned JSON data to print out a quote. I've implemented a button to attempt to call the API for another quote, and which calls the getJSON function, but doesn't get new JSON data.
The full code is on CodePen: http://codepen.io/oscarwong67/pen/eZLQLz
Here's what I use to get the Quote:
var getQuote = function() {
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1" + "?callback?", function(json) {
console.log(json);
$("#quote").html(json[0].content);
$("#speaker").html("- " + json[0].title);
});
}
getQuote(); //called when the page initially loads
$("#new-quote").on("click", function() {
getQuote();
});
And here's the relevant HTML that it changes:
<div class="col-xs-12 col-sm-8 col-md-6 text-center" id="quote-div">
<p id="quote">Loading Your Quote</p>
<p id="speaker"></p>
<button class="btn btn-default btn-block" id="new-quote">New Quote!</button>
</div>
The function is called when the page initially loads, and will call on the button click, but the JSON returned DOES NOT change.
$.getJSON has an issue with caching. You need to set the cache: false. Just do that and you code works fine.
To set cache:false there are a number of ways. Two possible ways are:
$(document).ready(function() {
$.ajaxSetup({ cache: false });
});
and
$.ajaxSetup({ cache: true});
$.getJSON("/url",function(data,item) {
// do stuff with callback data
$.ajaxSetup({ cache: false});
});
Your final JS:
var getQuote = function() {
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1" + "?callback?", function(json) {
console.log(json);
$("#quote").html(json[0].content);
$("#speaker").html("- " + json[0].title);
$("#speaker").css('text-align', "right");
$("#speaker").css('padding-right', "2%");
$("#speaker").css('font-size', "16pt");
$("#speaker").css('font-weight', "bold");
$.ajaxSetup({ cache: false });
});
}
Codepen
I have an AJAX request that gets data from a page and should insert it into a bootstrap popover, but it does not work.
$(document).ready(function(){
$('#req').popover({
html : true,
content: function() {
$.ajax({
url: "/requests",
success: function(data){
var page = $(data);
var req = page.find('#reqP').html();
console.log(req);
return $(req).html();
}
});
}
});
});
This gets the data fine and logs to the console, but it does not show up in the popover. I'm new to JS, so I'm probably missing something obvious.
Also, in your answer if you could include why what I'm doing is not working, that would be great.
EDIT: I also tried to add return before the $.ajax(...) request, which didn't work.
This Bootply shows you how using your idea works for retrieving the login for the html Bootply landing page:
HTML:
<div class="container">
<p>Test:</p>
<div class="col-md-12 text-center">
<a id="example" href="#" class="btn btn-primary">Show Bootply Login</a>
</div>
</div>
JS:
$(document).ready(function(){
$('#example').popover({
html : true,
content: function() {
var page= $.ajax(
{url: 'http://www.bootply.com',
async: false}).responseText;
var req = $(page).find('#menuLogin');
return req.html();
},
placement:'bottom'
});
});
I have a button that is now inside a little form:
<form name="picSubmit" method="post">
<button class="btn btn-block btn-default" id="upload"><?php echo $lrow[10]; ?> <span class="glyphicon glyphicon-forward"></span></button>
</form>
then my code on top of the page:
<script language="JavaScript" src="js/cameraUserScript.js"></script>
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
header('Location: view-subscribe');
}
?>
This is some javascript/jQuery ajax code to send the content inside a <div> and a picture that i have taken to a php page where i use this content to get some data out of my database and to rename and save that picture into a folder
document.getElementById("upload").addEventListener("click", function(){
var dataUrl = canvas.toDataURL();
var idVal = $('.hiddenId').html();
$.ajax({
type: "POST",
url: "incl/camsave.php",
data: {
imgBase64: dataUrl,
idVal: idVal
}
}).done(function(msg) {
console.log('saved');
});
I added a click event on that submit button ID so that when i click this script has to run. It works in Chrome, but because in Chrome you allways have to click the trust button if you use mediahandling i want to use Mozilla but there it isn't working... Does it has something to do with the combination of the submit button and the click event?
Thanks for the help!
I'm not sure why you're mixing vanilla JS and jQuery here, but you can likely solve this by changing your code to this -
$('#upload').click(function() { // you can use jQuery here too
var dataUrl = canvas.toDataURL();
var idVal = $('.hiddenId').html();
$.ajax({
type: "POST",
url: "incl/camsave.php",
data: {
imgBase64: dataUrl,
idVal: idVal
}
}).done(function(msg) {
console.log('saved');
});
});
Why Bootstrap's popover repeats an action twice? For instance, I want to submit a form inside the popover's data-content via ajax. It repeats all the form data twice and the posts form twice.
Any idea what I can do about it?
jquery + bootstrap,
$('.bootstrap-popover-method').popover({
placement: 'bottom',
container: 'body',
html:true,
content: function () {
var p = $(this);
var data = $('#popover-content').html();
$('#popover-content').remove();
p.attr("data-content", data);
p.popover('show');
}
});
$('.bootstrap-popover-method').on('shown.bs.popover', function () {
// do something…
console.log(this); // I get twice of the button element <button class="btn btn-default bootstrap-popover-method"...>
console.log($(".btn-submit").length); // I get twice of '1'.
$(".link").click(function(){
console.log($(this).attr("href")); // I get once of 'test.html'.
return false;
});
$(".btn-submit").click(function(){
console.log($(this).closest("form").attr("action")); // I get twice of '1.php'
var form = $(this).closest("form");
console.log(form.serialize()); // I get twice of 'username=hello+world!'
$.ajax({ // it posts twice to 'POST https://localhost/test/2014/css/bootstrap/1.php'
type: "POST",
url: form.attr("action"),
data: $(this).serialize(), // serializes the form's elements.
success: function(data){
//alert(data); // show response from the php script.
}
});
return false;
});
});
bootsrap + html,
<button type="button" class="btn btn-default bootstrap-popover-method" data-title="body" data-container="body" data-toggle="popover" data-placement="bottom">
Popover on bottom
</button>
<div id="popover-content">
hello
<form action="1.php" class="myform">
<input type="text" name="username" value="hello world!"/>
<input type="submit" value="submit" class="btn-submit"/>
</form>
</div>
This happens because popover.content checks if the tooltip is empty or not.
A simple fix would be to add a title attribute to popover.
$('.bootstrap-popover-method').popover({
placement: 'bottom',
container: 'body',
html:true,
title: "New Title",
content: function () {
var p = $(this);
var data = $('#popover-content').html();
$('#popover-content').remove();
p.attr("data-content", data);
p.popover('show');
}
});
https://github.com/twbs/bootstrap/issues/12563#issuecomment-56813015
This might be an old post, but i'm gonna leave here my work around.
I'm using bootstrap 3.3.5.
So the buggy behavior is that on every execution of "popover('show')", Bootstrap calls the rendering function twice, and only the second call is the one that actually renders the popup.
My fix is to return a short html string for the first call, and for the second call i let run the whole rendering function:
jQuery('.bootstrap-popover-method').popover({
html: true,
trigger: 'manual',
content: function(){//This is our rendering function for the popup's content
var __G_bs_popover_shown= jQuery.data(jQuery('body')[0], '__G_bs_popover_shown');
//Create a global variable, attached to the body element, to keep track of the repeating calls.
__G_bs_popover_shown= (typeof __G_bs_popover_shown == 'undefined') ? 1 : (__G_bs_popover_shown + 1) % 2;
//Update the global var
jQuery.data(jQuery('body')[0], '__G_bs_popover_shown', __G_bs_popover_shown);
//return a short string on every first call (this will not be rendered, anyway)
if(__G_bs_popover_shown == 1) return '<div>BLANK</div>';//==>this should not be an empty string!
//PLACE YOUR CODE HERE, E.G. AJAX CALLS, ETC..
//DON'T FORGET TO RETURN THE HTML FOR THE POPUP'S CONTENT!
}
});
I think you need to prevent the default event of the submit button
$(".btn-submit").click(function(e){
e.preventDefault();
console.log($(this).closest("form").attr("action")); // I get twice of '1.php'
var form = $(this).closest("form");
console.log(form.serialize()); // I get twice of 'username=hello+world!'
$.ajax({ // it posts twice to 'POST https://localhost/test/2014/css/bootstrap/1.php'
type: "POST",
url: form.attr("action"),
data: $(this).serialize(), // serializes the form's elements.
success: function(data){
//alert(data); // show response from the php script.
}
});
return false;
});
$('.bootstrap-popover-method').off('shown.bs.popover')
.on('shown.bs.popover', function (e) {
e.preventDefault();
}
// unbind your submit button click
$(".btn-submit").off('click').on('click',function(){
console.log($(this).closest("form").attr("action")); // I get twice of '1.php'
var form = $(this).closest("form");
console.log(form.serialize()); // I get twice of 'username=hello+world!'
$.ajax({ // it posts twice to 'POST https://localhost/test/2014/css/bootstrap/1.php'
type: "POST",
url: form.attr("action"),
data: $(this).serialize(), // serializes the form's elements.
success: function(data){
//alert(data); // show response from the php script.
}
});
return false;
});