i'm trying to do a request with ajax and isn't working. The controllers have the correct code, cause if i do it with ajax they are working good.
The views is this:
$(document).ready(function(){
listProject();
$("#buttoncreate").click(function(e)){
e.listUploadProject();
});
});
var listProject = function()
{
$.ajax({
type:'get',
url:'{{ url('admin/project/listall') }}',
success: function(data){
$('#ajaxwindow').empty().html(data);
}
});
}
var listUploadProject = function()
{
$.ajax({
type:'get',
url:'{{ url('admin/project/create') }}',
success: function(data){
$('#ajaxwindow').empty().html(data);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-10">
<h3 style="letter-spacing:40px;text-align:center;color:f15d5e;">PROYECTOS</h3>
</div>
<div class="col-md-2" style="padding:20px;">
<button type="button" id="buttoncreate" class="btn btn-danger">Crear Proyecto</button>
</div>
<div class="col-md-12" id="ajaxwindow">
</div>
If i only have:
$(document).ready(function(){
listProject();
});
Is working good.
Where's the problem? thanks!.
EDIT:
$(document).ready(function(){
listProject();
$("#buttoncreate").click(function(e){
e.preventDefault();
e.listUploadProject();
});
});
var listProject = function()
{
$.ajax({
type:'get',
url:"{{ url('admin/project/listall') }}",
success: function(data){
$('#ajaxwindow').empty().html(data);
}
});
}
var listUploadProject = function()
{
$.ajax({
type:'get',
url:"{{ url('admin/project/create') }}",
success: function(data){
$('#ajaxwindow').empty().html(data);
}
});
}
When i click to the button and he try to do the function give me this error:
Uncaught TypeError: e.listUploadProject is not a function
at HTMLButtonElement.<anonymous> (projects:217)
at HTMLButtonElement.dispatch (jquery.js:4737)
at HTMLButtonElement.elemData.handle (jquery.js:4549)
Maybe something wrong with the call to listUploadProject? thanks!
It's because you prematurely close your quotes. Escape them using backslash (\)
like this:
url: '{{url(\'admin/project/create\')}}'
or you can mix up the quotes:
url: "{{url('admin/project/create')}}"
update 1
To answer that last error:
change function to
$("#buttoncreate").click(function()
{
listUploadProject();
});
this will run the function on click.
Instead of below code:
$("#buttoncreate").click(function(e)){
e.listUploadProject();
});
Try this one:
$("#buttoncreate").click(function(e)){
e.preventDefault();
listUploadProject();
});
There must be some error in the console on click.
Related
Is it possible to get the attribute id from JQuery AJAX generated HTML data?
I have these in my index.php
<script>
$(document).ready(function () {
function viewRooms()
{
$.ajax({
url:"rooms.php",
method:"POST",
success:function(data){
$('#rooms').html(data);
}
});
}
viewRooms();
$('#save').click(function()
{
var room_number = $('#room_number').val();
var room_type = $('#room_type').val();
$.ajax({
url: "save.php",
method: "POST",
data: 'room_number='+room_number+'&room_type='+room_type,
success: function(data)
});
});
});
</script>
<div id="rooms"></div>
and inside rooms.php
<input type="text" id="room_number" />
<input type="text" id="room_type" />
<button id="save" > </button>
The function save button doesn't work from index.php. also with the id attributed to it.
Please help me if it is possible to do that? Thank's a lot.
Wrap save click handler call in a function something like this.
function saveClick() {
$('#save').click(function()
{
var room_number = $('#room_number').val();
var room_type = $('#room_type').val();
$.ajax({
url: "save.php",
method: "POST",
data: 'room_number='+room_number+'&room_type='+room_type,
success: function(data)
});
});
}
and call this function in ajax success.
I'm using ajax functionality and trying to get title using ajax but not working. Here is a example
$('#ajaxlink').click(function(e) {
var $this = this.href;
$.ajax({
url: $this,
dataType: 'html',
success: function(html) {
var div = $('title', $(html));
$('#gettitle').text($title);
console.log(html);
}
});
e.preventDefault();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="ajaxlink" href="https://jsfiddle.net/">Click</a>
<div id="gettitle">
</div>
Your request is failing because of CORS protection. You can't easily request html from other domains and parse the results, unless they have enabled CORS explicitly.
To make it work for same domain, try this
$('#gettitle').text($(html).filter('title').text());
I saw some problems in your code,
Please try this version of your code
$('#ajaxlink').click(function(e) {
var urlPath = $(e.currentTarget).prop('href'); // must be a valid url
$.ajax({
url: urlPath,
dataType: 'html',
success: function(html) {
$('#gettitle').text(html);
console.log(html);
}
});
e.preventDefault();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="ajaxlink" href="https://jsfiddle.net/">Click</a>
<div id="gettitle">
</div>
You can use JSONP:
function logResults(json){
console.log(json);
}
$(document).ready(function(){
$.ajax({
url: "https://api.github.com/users/jeresig",
dataType: "jsonp",
jsonpCallback: "logResults"
});
});
or
function jsonCallback(json){
console.log(json);
}
$(document).ready(function(){
$.ajax({
url: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-2.json",
dataType: "jsonp"
});
});
I have a form that when clicked the submit button makes a call via ajax. This ajax is inside a php file because I need to fill in some variables with data from the database. But I can not use the calls before / success. They just do not work, I've done tests trying to return some data, using alert, console.log and nothing happens. Interestingly, if the ajax is isolated within a file js they work. Some can help me please?
File:
<?php
$var = 'abc';
?>
<script type="text/javascript">
$(document).ready(function() {
$('#buy-button').click(function (e){
var abc = '<?php echo $var; ?>';
$.ajax({
type: 'POST',
data: $('#buy-form').serialize(),
url: './ajax/buy_form.php',
dataType: 'json',
before: function(data){
console.log('ok');
},
success: function(data){
},
});
});
});
</script>
HTML:
<form id="buy-form">
<div class="regular large gray">
<div class="content buy-form">
/* some code here */
<div class="item div-button">
<button id="buy-button" class="button anim" type="submit">Comprar</button>
</div>
</div>
</div>
</form>
----
EDIT
----
Problem solved! The error was in the before ajax. The correct term is beforeSend and not before. Thank you all for help.
You said it was a submit button and you do not cancel the default action so it will submit the form back. You need to stop that from happening.
$('#buy-button').click(function (e){
e.preventDefault();
/* rest of code */
Now to figure out why it is not calling success
$.ajax({
type: 'POST',
data: $('#buy-form').serialize(),
url: './ajax/buy_form.php',
dataType: 'json',
before: function(data){
console.log('ok');
},
success: function(data){
},
error : function() { console.log(arguments); } /* debug why */
});
});
My guess is what you are returning from the server is not valid JSON and it is throwing a parse error.
Try this
<script type="text/javascript">
$(document).ready(function() {
$('#buy-button').click(function (e){
e.preventDefault();
var abc = '<?php echo $var; ?>';
$.ajax({
type: 'POST',
data: $('#buy-form').serialize(),
url: './ajax/buy_form.php',
dataType: 'json',
beforeSend: function(data){
console.log('ok');
},
success:function(data){
}
});
});
});
And make sure that your php file return response
I have some ajax code:
$(document).ready(
function()
{
$("#button1").click(
function()
{
$.ajax({
type: "POST",
url: "update.php",
});
});
});
In my html code I have 200 buttons. How can i loop buttons i this ajax code? I'm newbie of ajax and js.
I know I can copy and paste and change number of buttons but I think it's not optimalize code.
Thank's for help.
You can apply some common class to the buttons to select all of them:
$(document).ready(
function()
{
$(".myButtonClass").click(
function()
{
$.ajax({
type: "POST",
url: "update.php",
});
});
});
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type: "POST",
url: "update.php",
});
});
});
<button class="button" id="button1">button 1</button>
...
<button class="button" id="button200">button 200</button>
Hei.. I have a function to load more news. Since jquery-1.9.1.min.js this function was working alright, but now I have to replace it with .on() method and I still can't get it work.
Here is the code:
// Load more news feed
$(function(){
var page = 1;
$.ajax({
type: "POST",
url: "data.php",
data: "page=profile&get_news_feed=true",
dataType:'json',
success: function(data){
$("#the_news_feed").html(data.news_feed);
if(page <= data.total_pages){
$("#the_news_feed").after('<button id="load_more_feed" class="btn btn-primary btn-large" style="width: 100%;margin-top:10px">Load More</button>');
}
}
});
$("#load_more_feed").live("click", function(){
var next = page+=1;
$.ajax({
type: "POST",
url: "data.php",
data: "page=profile&get_news_feed=true&page_num="+next,
dataType: "json",
success: function(data){
$("#the_news_feed").append(data.news_feed);
if(next == data.total_pages){
$("#load_more_feed").remove();
} else {
$("#load_more_feed").html("Load More");
}
},
beforeSend: function(){
$("#load_more_feed").html("Loading...");
}
});
});
});
I tryed to replace:
$("#load_more_feed").live("click", function()
with
$("#the_news_feed").on("click", "load_more_feed", function()
but I still can't get it work. What am I doing wrong? Thank you!
I display this function with id="news_feed" so here was the problem
<div class="tab-pane fade" id="news_feed">
<div id="the_news_feed"></div>
</div>
Final solution is $("#news_feed").on("click", "load_more_feed", function()
Thank you guys!
Actually, you're missing the # in the id selector.
$("#the_news_feed").on("click", "load_more_feed", function()
must be
$("#the_news_feed").on("click", "#load_more_feed", function()
assuming #the_news_feed is the parent of #load_more_feed.
EDIT :
From your code, you're appending this #loadmore button after #the_news_feed, so this obviously will not work. Try changing it to this :
$(document).on("click", "#load_more_feed", function()
This will bind the click to the document, which will always exist. Alternatively, you could bind it to #load_more_feed closest static parent, like an element which exists when you load your page and not dynamically created.