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'
});
});
Related
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 :)
I need help inserting html into an empty div using .ajax(). I have the code below in a django project. The view and url work fine as does the alert message of the ajax .click function. The .ajax() 'success:' property is underlined as unused in pycharm.
The view is as follows:
def gen_teams(request):
return HttpResponse("<h1>Hello World</h1>")
urls:
url(r'^gen_teams/$', home_views.gen_teams, name='gen_teams'),
main.js:
$('#ajaxSubmit').click(function(){
alert('Creating Teams');
var ajaxDiv = $('#ajaxContent');
$.ajax({
url:"http://127.0.0.1:8000/gen_teams/",
datatype:"html",
type: "POST",
success: function(data) {
ajaxDiv.replaceWith(ajaxDiv.html(data));
}
});
});
HTML:
<p><button id="ajaxSubmit" class="btn btn-primary" onclick="">Ajax teams</button></p>
<div id="ajaxContent" class="content-container">
</div>
Try replacing:
ajaxDiv.replaceWith(ajaxDiv.html(data));
with:
$('#ajaxContent').html(data);
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 this code for load dynamic data from remote file into bootstrap using jquery ajax :
JS:
$(function(){
$('.push').click(function(){
var essay_id = $(this).attr('id');
$.ajax({
type : 'post',
url : 'your_url.php', // in here you should put your query
data : 'post_id='+ essay_id, // here you pass your id via ajax .
// in php you should use $_POST['post_id'] to get this value
success : function(r)
{
// now you can show output in your modal
$('#mymodal').show(); // put your modal id
$('.something').show().html(r);
}
});
});
});
HTML:
click
<div class="modal-body">
<div class="something" style="display:none;">
// here you can show your output dynamically
</div>
</div>
this worked for me But modal box not show until/pending data loaded. I need to load modal box after click and then load data.
how do fix this?!
You could make the ajax call outside your click event on load and show hide on click:
$(document).ready(function() {
var essay_id = $(this).attr('id');
var results;
$.ajax({
type : 'post',
url : 'your_url.php',
async: false
'post_id='+ essay_id,
success : function(r) {
results = r;
}
});
$(' your_element').click(function() {
if (results) {
$('#mymodal').show();
$('.something').show().html(results);
}
});
});
Using async:false will force it to finish your request before continuing the script. Hope this helps.
I am having a some problem in my java script and to get the request.
This is the HTML
<form method="post" id="searchform">
<div align="center" class="col-md-10">
<input type="text" id= "contentSearch" name="contentSearch" >
</div>
<div class="form-group"><button type="submit" class="btn btn-default" id="submitSearch">
<i class="fa fa-search"></i> Search
</button></div>
</form>
<----Scenario 1 ---->
This script works fine and post the value and as ajax it never reload the page
<script>
$(document).ready(function () {
$("#submitSearch").on('click', function (e) {
e.preventDefault();
e.stopPropagation();
var data = {};
data['contentSearch'] = $('#contentSearch').val();
// Submit data via AJAX§
$.ajax({
url: '/home',
type: 'post',
data: data,
success: function (data) {
// do i need to do something here !!
}
});
});
});
</script>
When i check the POST value i can see the value is been POST.
The Problem is when i try to get the request data from controller like ---
$post_value = $request->request->get('contentSearch');
print_r($post_value);
OUTPUT : empty
<----Scenario 2 ---->
This script have a problem i think, because it reload the page for returning the result and displaying the value ---
<script>
$(document).ready(function () {
$("#searchform").on('submit', function (e) {
e.preventDefault();
var data = {};
data['contentSearch'] = $('#contentSearch').val();
$.ajax({
url: '/home',
type: 'post',
data: data,
success: function (data) {
}),
return false;
});
});
</script>
than i am able to get the post value like so--
$post_value = $request->request->get('contentSearch');
But the problem is in the second script the page is always loading when return the request which is not a ajax behave.
And in the first script i think because of the **e.preventDefault();** i am not getting the POST value in my controller.
Expected result ---
Option 1 : Do something so i can get the POST value in my controller
Option 2 : Fix this script so the page do not load to return the result and display
I am working on symfony framework .
Can someone please help me to fix this problem, i am really getting sick of to solve this problem.
Thanks a lot on advanced.
Like I mentioned in the comments, you need to be targeting the submit on the form. Not a click event. When targeting the click you are firing both the click and submit events, hence the reload.
$(document).ready(function () {
$("#searchform").on('submit', function (e) {
var data = {};
data['contentSearch'] = $('#contentSearch').val();
$.ajax({
url: '/home',
type: 'post',
data: data,
success: function (data) {
}
});
return false;
});
});