Well this is code that is working perfectly like I want to
$("#previous").click(function() {
var month=$("#previous").attr("name");
var loadurl="include/calendar.php?month=january";
$("#calendar").load(loadurl);
return false;
});
Above code simply loads the content from calendar.php exactly I wanted to but when I modified my code to what I actually need the calendar div simply hides display nothing
$("#previous").click(function() {
var month=$("#previous").attr("name");
var loadurl="include/calendar.php?month="+month;
$("#calendar").load(loadurl);
return false;
});
This is the html, $prev_month and $next_month are obtained after some calculations which are January and March respectively for current month(February)
<span class="month"> <?php echo "{$month} {$year}"; ?> </span>
I can't seem to find the problem.
Can you identify the fault here and also Please tell me where I can see jquery error so that I can debug any future problem
Related
I downloaded a php/ajax comment script almost 2 years ago and been having this small issue since day one. I tried to contact the author, but he's no where to be found.
Sometimes when I click the "Send" button, the button stays disabled and nothing happens at all. It just continues to show the animated busy picture. I do not receive any error messages at all.
I'm wondering if any of you pros can help me with this?
Here is the relevant code :
<div class="comment_heading">Leave a Comment</div>
<div class="post_comment">
<textarea name="txtpostcomment" id="txtpostcomment-'.$postid.'" class="txtpostcomment"></textarea>
<button class="btnpostcomment" id="btnpostcomment-'.$postid.'" onclick="comment('.$postid.');" type="button">Send</button>
<input type="hidden" name="token" id="token" value="'.$_SESSION['token'].'">
<script>document.getElementById("txtpostcomment-'.$postid.'").focus();</script>
</div>
comment = function(postid1)
{
var txt = $('#txtpostcomment-'+postid1);
var btn = $('#btnpostcomment-'+postid1);
var comment1 = $(txt).val();
var token = $("#token").val();
$(btn).css('background-image', 'url(/comments/submit-busy.gif)');
$(btn).attr('disabled', true);
$.post("/comments/submit.php",{commenting:1, postid:postid1, comment: comment1, name: name, token: token},
function(msg)
{
if(msg.status)
{
$('.post_comment .error_msg').remove();
$('.comment-list-'+postid1).prepend(msg.html);
$(txt).val('');
$('.comChars').empty();
}
else
{
$('.post_comment .error_msg').remove();
$('.error_msg').clone().appendTo('.post_comment');
$('.error_msg:last').append(msg.error);
}
$(btn).css('background-image', 'none');
$(btn).attr('disabled', false);
$(txt).attr('disabled', false);
},'json');
}
It appears that your code is not checking for error conditions just in case the Ajax request fails (due to network disconnection, server error etc). Check your javascript console for any js errors. Since it is using $.post you might want to extend the code to add error handling if the jQuery version that you are using supports it. Or, alternatively, use $.ajax. For more info see http://api.jquery.com/jquery.post or http://api.jquery.com/jquery.ajax
I'd like to use bootstrap's carousel to dynamically scroll through content (for example, search results). So, I don't know how many pages of content there will be, and I don't want to fetch a subsequent page unless the user clicks on the next button.
I looked at this question: Carousel with dynamic content, but I don't think the answer applies because it appears to suggest loading all content (images in that case) from a DB server side and returns everything as static content.
My best guess is to intercept the click event on the button press, make the ajax call for the next page of search results, dynamically update the page when the ajax call returns, then generate a slide event for the carousel. But none of this is really discussed or documented on the bootstrap pages. Any ideas welcome.
If you (or anyone else) is still looking for a solution on this, I will share the solution I discovered for loading content via AJAX into the Bootstrap Carousel..
The solution turned out to be a little tricky since there is no way to easily determine the current slide of the carousel. With some data attributes I was able to handle the .slid event (as you suggested) and then load content from another url using jQuery $.load()..
$('#myCarousel').carousel({
interval:false // remove interval for manual sliding
});
// when the carousel slides, load the ajax content
$('#myCarousel').on('slid', function (e) {
// get index of currently active item
var idx = $('#myCarousel .item.active').index();
var url = $('.item.active').data('url');
// ajax load from data-url
$('.item').html("wait...");
$('.item').load(url,function(result){
$('#myCarousel').carousel(idx);
});
});
// load first slide
$('[data-slide-number=0]').load($('[data-slide-number=0]').data('url'),function(result){
$('#myCarousel').carousel(0);
});
Demo on Bootply
I combined #Zim's answer with Bootstrap 4. I hope it will help someone.
First, load just the path of the images:
<div id="carousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item" data-url="/image/1.png"></div>
<div class="carousel-item" data-url="/image/2.png"></div>
<div class="carousel-item" data-url="/image/3.png"></div>
</div>
</div>
Then in JavaScript:
$('document').ready(function () {
const loadCarouselImage = function ($el) {
let url = $el.data('url');
$el.html(function () {
let $img = $('<img />', {
'src': url
});
$img.addClass('d-block w-100');
return $img;
});
);
const init = function () {
let $firstCarousel = $('#carousel .carousel-item:first');
loadCarouselImage($firstCarousel);
$firstCarousel.addClass('active');
$('#productsCarousel').carousel({
interval: 5000
});
};
$('#carousel').on('slid.bs.carousel', function () {
loadCarouselImage($('#carousel .carousel-item.active'));
});
init();
});
I have a page index.php that uses a modal to upload files. After those have uploaded I use the following to update my database and load in the new images to a list.
$('#sortableImages').load('../includes/sortImages.php?edit=' + edit);
Executes:
<script type="text/javascript">
$(document).ready(function(){
$(function() {
$("#sortableImages ul").sortable({
opacity: 0.6, cursor: 'move', update: function() {
var order = $(this).sortable("serialize") + '&action=updateRecordsListings';
$.post("../albumUploader/queries/sort.php", order);
}
});
});
});
</script>
echo "<ul class='revisionList'>";
while($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
$sortImageName = $row['OrgImageName'];
$sortPath = "../data/gallery/" . $getGalleryID . "/images/album/" . $sortImageName;
echo "<li class='sortPhotos' id='recordsArray_{$row['id']}' >";
echo '<img src="'. $sortPath .'"/>';
echo "</li>";
}
echo "</ul>";
The images populate in a div #sortableImages on the index page. However it seems that I lose my method of sortable() from the js file that was originally loaded in the index.php or after the ajax request it's not reading the js. What am I missing here?
Thanks a million.
When you load script from a remote page using ajax, it is important to realize that the ready event has already occured in page you are loading into.
This means that code wrapped in $(function(){}) will fire as soon as it is received. If that code preceeds the html it refers to, it will not find that html, as it doesn't exist yet.
If you move the same code below the html it refers to, it will fire after the html exists and therefore will find it.
EDIT: My answer presumes that all the code shown after "Executes:" in OP is contained in remote page
You have no handler for the result of the sort.php. Invoking this will only load the data into cache.
You need a complete handler function to refresh the data, not to mention add it to the dom. You should clarify your question and make it obvious that those are two different pages.
$.post("../albumUploader/queries/sort.php", order).complete = func...
I just started using Ajax with jQuery and PHP. I have a working code (below) which inserts some HTML code to a HTML container (div called nav sub).
Next time I try to run a similar code to the one below on my generated HTML, jQuery don't seem to find it. I guess it don't update it self about it when it's added.
$(".nav.top a").click(function(){
var a_class = $(this).parent().attr("class");
$(".nav.sub").html("loading...");
$(".nav.sub").load("<?php echo get_bloginfo('url'); ?>/?addmod_ajax=1",{button: a_class});
return false;
});
Let's say the generated code looks like this:
<div class="nav sub">
My new generated button, forgotten by jQuery?
</div>
And the new container looks like this:
<div class="settings"><?php # AJAX ?></div>
Is it some way to use jQuery and Ajax on HTML code generated with jQuery?
I figured it out. The solution is to use "live".
$('.nav.top a').live( 'click', function() {
var a_class = $(this).parent().attr("class");
$(".nav.sub").html("loading...");
$(".nav.sub").load("<?php echo get_bloginfo('url'); ?>/?addmod_ajax=1",{button: a_class});
return false;
});
EDIT: The problem is not related to Boxy, I've run into the same issue when I've used JQuery 's load method.
EDIT 2: When I take out link.remove() from inside the ajax callback and place it before ajax load, the problem is no more. Are there restrictions for manipulating elements inside an ajax callback function.
I am using JQuery with Boxy plugin.
When the 'Flag' link on the page is clicked, a Boxy modal pops-up and loads a form via ajax. When the user submits the form, the link (<a> tag) is removed and a new one is created from the ajax response. This mechanism works for, well, 3 times! After the 3rd, the callback function just does not remove/replace/append (tested several variations of manipulation) the element.
The only hint I have is that after the 3rd call, the parent of the link becomes non-selectable. However I can't make anything of this.
Sorry if this is a very trivial issue, I have no experience in client-side programming.
The relevant html is below:
<div class="flag-link">
<img class="flag-img" style="width: 16px; visibility: hidden;" src="/static/images/flag.png" alt=""/>
<a class="unflagged" href="/i/flag/showform/9/1/?next=/users/1/ozgurisil">Flag</a>
</div>
Here is the relevant js code:
$(document).ready(function() {
$('div.flag-link a.unflagged').live('click', function(e){
doFlag(e);
return false;
});
...
});
function doFlag(e) {
var link = $(e.target);
var url = link.attr('href');
Boxy.load(url, {title:'Inappropriate Content', unloadOnHide:true, cache:false, behaviours: function(r) {
$("#flag-form").live("submit", function(){
var post_url = $("#flag-form").attr('action');
boxy = Boxy.get(this);
boxy.hideAndUnload();
$.post(post_url, $("#flag-form").serialize(), function(data){
par = link.parent();
par.append(data);
alert (par.attr('class')); //BECOMES UNDEFINED AT THE 3RD CALL!!
par.children('img.flag-img').css('visibility', 'visible');
link.remove();
});
return false;
});
}});
}
Old and late reply, but.. I found this while googling for my answer, so.. :)
I think this is a problem with the "notmodified" error being thrown, because you return the same Ajax data.
It seems that this is happening even if the "ifModified" option is set to false (which is also the default).
Returning the same Ajax data three times will cause issues for me (jQuery 1.4). Making the data unique (just adding time/random number in the response) removes the problem.
I don't know if this is a browser (Firefox), jQuery or server (Apache) issue though..
I have had the same problem, I could not run javascript after I call boxy. So I put all my javascript code in afterShow:function one of boxy attributes. I can run almost except submit my form. My be my way can give you something.