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);
Related
I wrote a function to sent a simple request trough Controller via JavaScript in my Symfony project. My alert is triggered when I refresh the page and it should be triggered when I am clicking the Submit button.
What I am doing wrong?
Button:
<button type="button" id="request" data-path="{{ admin.generateObjectUrl('change_status', object) }}" class="btn btn-primary">Submit</button>
My JS code:
var path = $("#request").attr("data-path");
$.ajax({
type: "POST",
url: path,
data: {id : 'aaa'},
"success":function(data){
alert('ok');
}
});
and Controller:
$data = $request->request->get('request');
return new Response($data);
You have to set the onclick property in your button and wrap your JS code in a function that will be called by this onclick
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 several buttons which should change content of region on the page. I've read numerous tutorials how can lazy load can be implemented using ajax, but unfortunately with no success. Here is my html:
<div>
<div>
<button id="btn_goals">Goals</button>
<button id="btn_achievements">Achievements</button>
</div>
<div id="region_content"></div>
</div>
and here is my js:
$(document).ready(function () {
$('#btn_goals').on('click', function () {
$.ajax({
url: '#Url.Action("Index", "Goals")',
success: function (data) {
$('#region_content').html(data);
}
});
});
$("#btn_achievements").on("click", function () {
......
});
});
what is the problem?
********** EDIT ************
Well, I changed url in ajax parameters from url: '#Url.Action("Index", "Goals")' to url: '/Goals/Index' and it starts work fine. What is the reason?
Try following the following steps:
Use console.log("Inside Success function"+ data); to test whether the required data is being returned from the controller method.
Use Ctrl+Shift+I in your browser to view the console. If Successful:
Use:
var div = document.getElementById("region_content");
div.innerHTML = div.innerHTML + data;
Make sure your type conversions are done right.
Also specify type: POST in your ajax function.
If you do not see 'Inside Success function' on your console, there might be something wrong with your controller function.
i'm having problem getting the value of a variable into the modal which is supposed to be openning. i have tried using post but nothing changed. Both codes are in index.php.
This is the jquery script passing the value
$(document).ready(function () {
$(".issue").click(function () {
var x = $(this).attr("id");
$.ajax({
url: "index.php",
type: "GET",
data: {data1: x,},
success: function () {
$("#modal2").modal('show');
}
});
});
});
And i tried echoing the id of class .issue but it doesn't works
<div class="modal fade" role = "dialog" id = "modal2" aria-labelledby = "myModalLabel" aria-hidden = "true">
<div class="dialog">
<div class="modal-content">
<div class="modal-body"><?php echo $_GET["data1"]; ?></div>
</div>
</div>
</div>
You're missing the variable in the success method. It should be success:function(ajaxData){}
So in all:
var x = $(this).attr("id");
$.ajax({
url: "index.php",
type: "GET",
data: {data1: x,},
success: function (ajaxData) { // ajaxData is the return data from php
// add the data to the modal
$("#modal2 .modal-body").html(ajaxData);
$("#modal2").modal('show');
}
});
Are you sending the data server side to save it, or grab information from the database? If all you're trying to do is move the data to the modal, ajax isn't necessary.
Part of me suspects you're not properly calling and passing the data to php, if you really do need ajax. The php you send the ajax data to should be a separate file, that receives it, processes it, and echos it back to the ajax success function. Then the ajax function puts the data in the modal and displays the modal.
Hope one of those thoughts points you in the right direction.
Just trying to learn using ajax with appengine,started with the post method,but it does not work.
This is my HTML Code for the page
<html>
<head>
<title> Hello </title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var data={"name":"Hola"};
$(document).ready(function(){
$('#subbut').click(function(){
$.ajax({
url: '/test',
type: 'POST',
data: data,
success: function(data,status){
alert("Data" + data +"status"+status);
}
});
});
});
</script>
</head>
<body>
<form method="post" action="/test">
<input type="submit" id="subbut">
</form>
<div id="success"> </div>
</body>
</html>
Here goes my python code to render the above html code , its handler is /test1
from main import *
class TestH1(Handler):
def get(self):
self.render('tester.html')
And this is the python script to which AJAX request must be sent to,handler is /test.
from main import *
import json
class TestH(Handler):
def post(self):
t=self.request.get('name')
output={'name':t+" duck"}
output=json.dumps(output)
self.response.out.write(output)
Expected behavior is that when i click on submit button,i get an alert message saying "Hola duck" , get nothing instead.
Any help would be appreciated as i am just starting with AJAX and Jquery withGAE
At first, I suppose you should suppress default behavior of form submitting when you press submit button by adding "return false" to the .click function. But I suppose it would be better to use just
<input type="button" id="subbut">
instead (even without form).
Then you should add "dataType: 'json'" to your ajax call to tell jQuery what type of data you expect from server. Doing this you will be able to get response data by property names like "data.name". So:
var data={"name":"Hola"};
$(document).ready(function(){
$('#subbut').click(function(){
$.ajax({
url: '/test',
type: 'POST',
data: data,
dataType: 'json',
success: function(data,status){
alert(data.name);
alert("Data" + data +"status"+status);
}
});
return false;
});
});
and it would be better if you set appropriate content type header to your response:
response.headers = {'Content-Type': 'application/json; charset=utf-8'}
self.response.out.write(output)