We Keep Coding

jquery functionality lost when loading more code without page refresh

I'm quite new to Jquery.
I'm creating a php application including a flow of posts containing text, and sometimes video and images in a flexslider plugin. Initially, 3 posts are shown and I have implemented a "Show More"-button using the following code: (based on this example)
<script>
$(document).on('click', '.showmore', function () {
$(this).text('Loading...');
var ele = $(this).parent('li');
$.ajax({
url: 'showmore.php',
type: 'POST',
data: {
page: $(this).data('page'),
},
success: function (response) {
if (response) {
ele.hide();
$(".posts_list").append(response);
}
}
});
});
</script>
This is working just fine, loading 3 new posts with each click WITHOUT page refresh. The problem is all instances of the Flexslider plugin, that won't display correctly. The raw code is included fine, but it's like the Jquery functionality is not connected to the newly loaded posts.
I have tried to include the flexslider script
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script src="jquery.flexslider-min.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function () {
$('.flexslider').flexslider({randomize: true, animation: "fade", });
});
</script>
again in many places, both inside the showmore.php file and in the above Ajax-script.
I've been searching this and other resources without success.
Could anyone shed some light to this? It's probably quite simple.
Thanks!

ScrollTop not working on update to jQuery 1.11.1

My website used to use jQuery 1.3.2, now I got courage and time to update it to jQuery 1.11.1 but still I have some problems.
The function bellow used to work but not anymore.
Anyone could help with it?
In scroll down when -user or admin- write a message.
I have added the jquery-migrate-1.2.1.min.js file also already.
The scroll did not run at all. It is halted on top.
<script type="text/javascript" src="'+PATH_xxx+'js/jquery.min.1.11.1.js"></script>
<script type="text/javascript" src="'+PATH_xxx+'js/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="'+PATH_xxx+'js/jquery-ui-11.js"></script>
function ajax_message() {
$.post(BASE_URL+'chat/ajax_message', {}, function(result){
$("#mydiv").empty().append(result);
var count_p = $("#mydiv p").length
if ($('#roll-auto').attr('checked')) {
$("#mydiv").attr('scrollTop', count_p * 1500)
}
});
}

In jQuery 1.11.1 scrollTop isn't an attribute instead it's used as a function $().scrollTop(positionOnPageToMoveTo);
So just change:
$("#mydiv").attr('scrollTop', (count_p*1500))
To:
$("#mydiv").scrollTop(count_p*1500);

$(document).ready only firing once in IE but works in Firefox

this is driving me nutz. Just another issue that works fine in everything but IE -aaargh. Anyway, I have some script that should run everytime the page is loaded. Works fine in Firefox but in IE it only executes the first time I go the page. If I leave the page and then go back it will not execute.
<script type="text/javascript">
$(document).ready(function () {
jQuery.ajaxSetup({ async: false });
var leftHeight = $('#Interface_Content').height();
$('#Interface_Nav').css({ 'height': leftHeight });
//This line calls the Controller and populates the corresponding MEssageDesc Drop down
$.get('#Url.Action("GetCompanyName","Company")', {}, function (data) {
$('#Interface_Header_CONAME').replaceWith(data);
});
$.get('#Url.Action("GetLoginStatus", "Company")', {}, function (data) {
if (data == 'True') {
$('#Nav_Links').show();
}
else {
$('#Nav_Links').hide();
}
});
});
</script>

If there is no compulsion on using JQuery-1.4.4, I suggest you replace it with JQuery-1.8.2 the least. With JQuery 1.8.2, I wrote a sample app and ran it on IE 8,9 and it worked fine.
P.S - Before you jump and download the latest JQuery 1.9, fair warning there are quite a few major changes they have made like replacing $.browser with feature detection, etc which might create an issue if you are using it.

Why won't my links trigger jQuery.click events?

So, I'm dabbling in some jQuery today, and I come across an issue. I have a page that has a number of links in the following format:
<a class="a_link" id="a_id<#>" href="#">Click me</a>
Where <#> is a number generated in a for loop in the PHP that runs the page. At the top of the page, I have a script tag linking to the Google CDN for jQuery 1.7.2 minimized, and a div with id of "form_map". After all the links have been displayed, I have the following script:
<script type="text/css">
$(document).ready(function(){
$('.a_link').click(function(){
var c_id = $(this).attr('id');
var task = 'read';
var ajax_url = 'engine.php';
alert('link pressed for id: '+c_id);
$.get({
url: ajax_url,
data: { 'task':task, 'c_id':c_id },
success: function(res){ $('#form_map').val(res); }
});
});
});
</script>
Disregarding all that wonky Ajax calls (which also do not seem to work correctly), when I click a link nothing happens. It doesn't even run the script. I tested this by setting a breakpoint and adding the alert. Nothing seems to even trigger this.
Any suggestions on what I am doing wrong?

use:
<script type="text/javascript">
instead of:
<script type="text/css">
also use:
$('#form_map').html(res);
instead of
$('#form_map').val(res);

You may want to fix the opening tag
<script type="text/css">
to
<script type="text/javascript">

You need to return false at the end of the function you pass into .click().
$('.a_link').click(function() {
// Your AJAX stuff here.
return false;
});
Returning false stops the link from continuing to work as normal.

Overlay pop up box using jquery1.6.1..?

I had a script for overlay popup box using jquery1.4.1 using modal, which returns some function in my page getting not working which are used by jquery1.6.1..
So, when I add jQuery 1.4.1 script for displaying pop up box.. the functions working through jQuery 1.6.1 got interrupted..
How can I get popup box using jQuery 1.6.1?
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://simplemodal.googlecode.com/files/jquery.simplemodal.1.4.min.js"></script>
<script type="text/javascript">
function modalTest() {
showModal();
setTimeout(function() {
hideModal();
},2000000);
}
function showModal() {
$("#downloadbox").modal();
}
function hideModal() {
$.modal.close();
}
</script>

Your problems may be
1) Certain functions in jquery 1.4.1 have been deprecated in 1.6.1
One solutions is , please upgrade the plugin to newer version , it may solve your problem
Otherwise you need to edit the plugin to accommodate the new functions ,its risky

jQuery latest is 1.7.1. Are you sure your page is loading 1.6.1? That's beside the point, though: what may be happening here is that your scripts are firing before the document is ready. No idea why it worked for 1.4.1 since that's so long ago (as duke mentions, deprecated functions?), but you should wrap this in a document ready function to see if it works:
$(document).ready( function() {
// your existing code
});

The code looks fine for versions 1.4+, so I don't think you've got a deprecation issue.
As Greg said, you haven't invoked the document ready method. You also haven't invoked the modalTest() function, so the simplemodal $('').modal method won't fire.
$(document).ready(function(){
function modalTest() {
showModal();
setTimeout(function() {
hideModal();
},2000000);
}
function showModal() {
$("#downloadbox").modal({ /* Pass simplemodal config here*/ });
}
function hideModal() {
$.modal.close();
}
modalTest();
});