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.
Related
Hi I have the following html code:
<li class="grey">
<div class="row">
<button id="test" style="width:50%;" class="btn btn-blue-white cartBtn">Add to Cart</button>
</div>
<div class="row">
Go To Checkout
</div>
</li>
When I load the page, I hide the checkout link button until the user clicks "add to cart". After they click add to cart my javascript looks like this:
$('.cartBtn').click(function () {
//do stuff for preprocessing
var url = "../Store/AddToCart";
$.ajax({
type: "GET",
url: url,
data: {
//add data
},
dataType: "json",
success: function (data) {
if (data.success == true) {
$(this).closest('li').find('.checkoutLink').show();
}
}
});
});
the link never shows back up. I have also tried using
$(this).parent().parent().find('.checkoutLink').show()
as well and had no luck. How do i use jquery to get this anchor tag and make it visible.
The problem is this, when called from within the success function it no longer refers to the outer this. Create a variable outside of Ajax that refers to the original this.
$('.cartBtn').click(function () {
var $this = $(this);
//do stuff for preprocessing
var url = "../Store/AddToCart";
$.ajax({
type: "GET",
url: url,
data: {
//add data
},
dataType: "json",
success: function (data) {
if (data.success == true) {
$this.closest('li').find('.checkoutLink').show();
}
}
});
});
I already implemented create, get (retrieve) using django-rest-framework and AJAX.
But I have some problems in implementing delete (Delete API is ready).
Here is my idea :
HTML :
<div class="comment-meta">
<a id="comment-delete" href="/api/posts/notice/2/comments/4/delete/">
삭제
</a>
</div>
JQuery :
var commentMetaElement = $(".comment-meta");
var commentDeleteElement = $(commentMetaElement).find("#comment-delete");
var commentDeleteURL = $(commentDeleteElement).attr('href');
$(commentDeleteElement).click(function(){
alert($(this).attr('href'));
$.ajax({
url: commentDeleteURL,
type: "DELETE",
success: function(data){
alert("done!");
},
error: function(data){
console.log(textStatus);
}
});
});
And when I click the a tag, alert doesn't occur.
Also, when I insert the code alert(commentDeleteURL); after var commentDeleteURL = $(commentDeleteElement).attr('href');, it show: undefined.
I wonder whether I'm implementing it in right way.
First of all, I wonder it is right to create a tag for deleting...
Thanks :)
change this
$(commentDeleteElement).click(function(){
to
$("#commmet-delete").click(function(){
$("#comment-delete").on('click', function(){
var commentDeleteURL = $(this).attr("href");
$.ajax({
url: commentDeleteURL,
type: "DELETE",
success: function(data){
alert("done!");
},
error: function(data){
console.log(textStatus);
}
});
});
I am having trouble with my jQuery code.
Basically I want to load more message entrys after user clicks button.
Problem is, it returns results 3 times.
I have tried literally everything - .unbind (used .bind) / .off / .stopPropagation() and other methods I thought of. I searched all over google, but still couldn`t manage to find solution. Maybe someone can clarify where my problem is?
$(document).ready(function(){
$("#website_post_content_table_bottom_settings_left :input").on("click", function(event){
if($('.website_post_content_table_data#bigNews').is(":visible")){
var currentId = $('.website_post_content_table_entry:last').attr("id");
$.ajax({
type: "POST",
url: "php/admin_functions.php",
data: {callFunction: "getMoreNewsEntrys", id: currentId},
cache: false,
success: function(html){
$('.website_post_content_table_data').after(html);
}
});
}
});
});
EDIT:
HTML
<div id="website_post_content_table_bottom_settings_left">
<p>Ielādēt papildus:</p>
<input type="button" style="display:none;">
<input type="button" id="button_adminLoadMoreEntry" class="adminPanelButton_blue" value="+5">
<input type="button" id="button_adminLoadMoreEntry" class="adminPanelButton_blue" value="+10">
<input type="button" id="button_adminLoadMoreEntry" class="adminPanelButton_blue" value="+15">
<input type="button" id="button_adminLoadMoreEntry" class="adminPanelButton_blue" value="+20">
</div>
EDIT v3:
I made new javascript file, only for this small code and it STILL returns it 3 times:
$(document).ready(function(){
$("#website_post_content_table_bottom_settings_left :input").one("click", function(event){
$('.website_post_content_table_data').after('<p>Something More</p>');
});
});
Use .each() of jQuery to loop through the element. Then add a reference to each input item.
Or try this:
$(document).ready(function(){
$("#website_post_content_table_bottom_settings_left :input").unbind("click").bind("click", function(event){
if($('.website_post_content_table_data#bigNews').is(":visible")){
var currentId = $('.website_post_content_table_entry:last').attr("id");
$.ajax({
type: "POST",
url: "php/admin_functions.php",
data: {callFunction: "getMoreNewsEntrys", id: currentId},
cache: false,
success: function(html){
$('.website_post_content_table_data').after(html);
}
});
}
});
});
You can use Jquery.one()
$(document).ready(function(){
$("#website_post_content_table_bottom_settings_left :input").one("click", function(event){
if($('.website_post_content_table_data#bigNews').is(":visible")){
var currentId = $('.website_post_content_table_entry:last').attr("id");
$.ajax({
type: "POST",
url: "php/admin_functions.php",
data: {callFunction: "getMoreNewsEntrys", id: currentId},
cache: false,
success: function(html){
$('.website_post_content_table_data').after(html);
}
});
}
});
});
This binds the the event only once.
Reference link http://api.jquery.com/one/
First of all I must say huge thanks to everyone who tried to help!
My problem was that I had used display: none; in my CSS which caused these entries to update in hidden ones.
Still thanks everyone who tried to help! :)
I apologize in advance for my bad English.
I have site in development http://plast-pak.esy.es/ on html-coding
With Ajax i called html page into my front page and slider is SlideUp.
<button onclick="clickAlert();" class="clickDown">?????????</button>
<script>
function clickAlert() {
$(this).click(function(){
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
$('#projectInformation').html(response).slideDown('fast');
}
});
$('.front-page > #main_wrap').slideUp(3000);
$('.front-page > #menuBar').slideUp(3000);
});
}
</script>
Was callback page with information. It have her own button, witch have to close this page and return front page.
<button onclick="clickAbort();" class="clickUp">????????? ?? ???????</button>
<script>
function clickAbort() {
$(this).click(function(){
$('.front-page > #main_wrap').slideDown(3000);
$('.front-page > #menuBar').slideDown(3000);
$('#projectInformation .full-node').remove();
});
}
</script>
In the end, everything works, how it works. All horrible and very incorrect. Please help me to understand why it all works so. Thanks in advance.
Remove
$(this).click(function(){
from clickAlert and clickAbort. They are already click handlers.
Other than that, you will have to be more specific about "horrible and very incorrect".
$(this).click() is used to setup a handler for the click event of the button, and you're already doing that by setting the onclick attribute in your markup.
The usual way to do this is by giving an id to the button, so that you can set events in the javascript code:
<button id="alert" class="clickDown">Подробнее</button>
<script type="text/javascript">
$("#alert").click(function(){
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
$('#projectInformation').html(response).slideDown('fast');
}
});
$('.front-page > #main_wrap').slideUp(3000);
$('.front-page > #menuBar').slideUp(3000);
});
</script>
Thanks everybody for your advices. The problem was solved as follows:
<button id="alert" onclick="clickAlert();" class="clickDown">Подробнее</button>
function clickAlert() {
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
...
}
});
...
}
for whatever reason, Slider not given use following code
$("#alert").click(function(){
$.ajax({
type: 'GET',
dataType: 'html',
url: 'item-1.html',
success: function(response) {
$('#projectInformation').html(response).slideDown('fast');
}
});
$('.front-page > #main_wrap').slideUp(3000);
$('.front-page > #menuBar').slideUp(3000);
Only click event in button is working. Thanks again for your advice
(In Firefox and IE9 it doesn't work. In Chrome, this works)
If I remove the ajax, the hide / show JQuery works. Any solutions?
<form id="ppform" action="blah.asp" method="post">
<div id="saleload">Blah</div>
<button id="sendbutton">Send</button>
</form>
$(document).ready(function(){
$('#saleload').hide();
$('#sendbutton').click(function() {
$('#saleload').show();
$.ajax({
type: "POST",
url: /blah/blah.asp,
data: reqBody,
dataType: "json",
success:function(data,textStatus){
if (data.redirect) {
window.location.href = data.redirect;
}else{
$("#ppform").replaceWith(data.form);
}
}
});
});
});
This line:
$("#ppform").replaceWith(data.form);
is replacing the whole form contents with the response from your Ajax request. This means the click handler you setup will be gone too, because #sendbutton will be gone. Even if you have another button with the same ID inside data.form, it won't work. You have to use event delegation instead:
$(document).ready(function(){
$('#saleload').hide();
$(document).on('click', '#sendbutton', function(){
$('#saleload').show();
$.ajax({
type: "POST",
url: "/blah/blah.asp",
data: reqBody,
dataType: "json",
success:function(data,textStatus){
if (data.redirect) {
window.location.href = data.redirect;
} else {
$("#ppform").replaceWith(data.form);
}
}
});
});
});
Also: you seem to be posting an undefined variable reqBody to your server, and, as lonesomeday said above, you were missing quotes around the URL.
The obvious reason is that there is an error with your Javascript that causes the whole section not to execute. Quickly looking through your code shows this line:
url: /blah/blah.asp,
Strings need to be enclosed in quotation marks:
url: "/blah/blah.asp",