ondrejko1
asked on
jquery events not firing on ajax call
I am using Jquery 1.7.2
On initial page load I am executing the following script in an external JS loaded at the end of the page and wrapped in $(document).ready(function
The code essentially hides the form contained in this unordered list and reveals the form when the "Comments" link is clicked. The wording is then changed to Hide Comment and when clicked again the form is hidden again.
The problem is when I make an ajax call to get additional ULS like the the one above (with different ids of course).
The above method works inconsistently. The hide/show event fires for some items, but not all. I can't seem to figure out why I just can't get it to work for every comment/form combination loaded via ajx. What am I doing wrong?
On initial page load I am executing the following script in an external JS loaded at the end of the page and wrapped in $(document).ready(function
$('.accordionContent,.accordionContent-settings').hide();
$('.accordion-comments').click(function(){
var target=$(this).attr('href');
if($(target).css('display')=='none')
{
$(target).show();
$(this).text('Hide Comments');
}
else
{
$(target).hide();
$(this).text('Comments');
}
return false;
});The code essentially hides the form contained in this unordered list and reveals the form when the "Comments" link is clicked. The wording is then changed to Hide Comment and when clicked again the form is hidden again.
<ul class="sportswire-posts quarterfont">
<li>
<p><a href="/modals.cfm?action=profile_glimpse&script=%2Findex%2Ecfm%2Fgroup%2F3450%2Faction%2Fdashboard&member_id=5" rel="facebox" class="capitalize">Todd John</a> joined the team "<a href="http://shootingattackclinic.playerspace.com/local_sports_teams.cfm?group=628">Mercury</a>".</p>
<p class="comments-date">11:38 AM EST on January 31, 2013</p>
</li>
<li class="comments-link">
<a href="#comments35800" class="accordion-comments">Comments</a>
</li>
<li class="accordionContent posts-comments" id="comments35800">
<form method="post" action="/index.cfm/group/3450/action/dashboard/m0dal_update/leave_feedback/member_id/68/comment_type/17/id/35800">
<ul>
<li>
<div class="expandingArea">
<pre><span></span><br /></pre>
<textarea name="str_comment" message="Enter a comment." rows="4" cols="10" required="Yes" html="No" id="str_comment24234"></textarea>
</div>
<div class="pixelspacer10"></div>
</li>
<li>
<input name="Post Comment" type="submit" value="Post Comment" />
</li>
</ul>
</form>
</li>
</ul>The problem is when I make an ajax call to get additional ULS like the the one above (with different ids of course).
$(document).on("click",'.siteusemore',function()
{
var ID = $(this).attr("id");
var myscript = window.siteusemore_script || null;
if(ID)
{
$("#siteusemore"+ID).html('<img src="/images/processing.gif" />');
$.ajax({type: "POST",url: myscript,data: "lastmsg="+ ID, cache: false,
success: function(html){
$("ol#siteuseupdates").append(html);
$('.accordionContent').empty();
$('.accordionContent').show();
$('.accordionContent').hide();
$('.accordion-comments').empty();
$('.accordion-comments').show();
$('.accordion-comments').on("click",function(){
var target=$(this).attr('href');
if($(target).css('display')=='none')
{
$(target).show();
$(this).text('Hide Comments');
}
else
{
$(target).hide();
$(this).text('Comments');
}
});
$("#siteusemore"+ID).remove();
}
});
}
else
{
$(".siteusemorebox").html('The End');
}
return false;
});The above method works inconsistently. The hide/show event fires for some items, but not all. I can't seem to figure out why I just can't get it to work for every comment/form combination loaded via ajx. What am I doing wrong?
ASKER
Removing the hash from my href and adding the above code had no effect. In fact, it didn't respond at all, even before the ajax call.
Can you provide us with a fully working example of your code? This will make debugging so much easier. Preferably as a zip package ready to unzip into our local test-environments here.
ASKER
I can prove you with a login to where its located. That sufficient?
Yes. That'll be perfect.
ASKER
http://shootingattackclinic.playerspace.com/index.cfm/group/3450/action/login
username: seolms
password: test
The recent activity feed is the one Im having issues with.
username: seolms
password: test
The recent activity feed is the one Im having issues with.
It works just fine on my mac in google chrome. Which browser are you using?
ASKER
This is the ajax call, not the one I included above:
$(document).on("click",'.siteusemore',function()
{
var ID = $(this).attr("id");
var myscript = window.siteusemore_script || null;
if(ID)
{
$("#siteusemore"+ID).html('<img src="/images/processing.gif" />');
$.ajax({type: "POST",url: myscript,data: "lastmsg="+ ID, cache: false,
success: function(html){
$("ol#siteuseupdates").append(html);
$("#siteusemore"+ID).remove();
$('.accordionContent').hide();
$('.accordion-comments').on("click",function(){
var target=$(this).attr('href');
if($(target).css('display')=='none')
{
$(target).show();
$(this).text('Hide Comments');
}
else
{
$(target).hide();
$(this).text('Comments');
}
});
}
});
}
else
{
$(".siteusemorebox").html('The End');
}
return false;
});ASKER
Try all the links, then click the ajax a couple of times. You'll see what I'm talking about. It works sporadically. Usually its on the 3rd ajax call.
Change the click event to something like so:
$('.accordionContent,.accordionContent-settings').hide();
$('.comments-link').on('click', 'a'. function(){
var target=$(this).attr('href');
if($(target).css('display')=='none')
{
$('#'+target).show();
$(this).text('Hide Comments');
}
else
{
$('#'+target).hide();
$(this).text('Comments');
}
return false;
}); $(document).on("click",'.siteusemore',function()
{
var ID = $(this).attr("id");
var myscript = window.siteusemore_script || null;
if(ID)
{
$("#siteusemore"+ID).html('<img src="/images/processing.gif" />');
$.ajax({type: "POST",url: myscript,data: "lastmsg="+ ID, cache: false,
success: function(html){
$("ol#siteuseupdates").append(html);
$("#siteusemore"+ID).remove();
$('.accordionContent').hide();
$('.comments-link').on("click", "a", function(){
var target=$(this).attr('href');
if($(target).css('display')=='none')
{
$(target).show();
$(this).text('Hide Comments');
}
else
{
$(target).hide();
$(this).text('Comments');
}
});
}
});
}
else
{
$(".siteusemorebox").html('The End');
}
return false;
});Here also.
ASKER
Did as you advised, still producing unresponsive anchor elements.
ASKER
Any other ideas?
just one question how do i fire the ajax call on the page? It has a lot of areas and functionality. Sorry, just too lazy to seek in the code ;-)
Did you try live instead of on
$('.comments-link a').live("click", function(){ ....ASKER
Yes, live had no effect.
Really strange, the only thing i can advice you is to use the very latest jquery 1.9 instead of 1.7. Maybe that helps.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
figured it out myself
I wouldn't attach an event handler to the document itself, it is certainly not best practice. Do you have a wrapping container around your forms?
If that all has no effect, first get rid of all hashes in the href attributes of your hide/show links and make the following change to your jquery show/hide click event:
Open in new window