$(window).bind('scroll', function(){ //when the user is scrolling...
//some-code
});
I face the same problem for click and I solved it this way:
$(document).on('click','#id',function(){
//some code
})
I dont know how to assign scroll action for content loaded with ajax.
http://www.arrowlife.com/index-v3
try calling the function again after the ajax call
$.ajax({
//some code
}).done(function(){
//scroll function
});
I think the issue is that you are calling the function before the element exists and therefore is not working properly.
Related
I have a document ready load when I click a button on view.php:
<script type="text/javascript">
$(document).ready(function () {
$("#admin_user_view").load('admin_modules/user_mgt/pending.php', function(){ //get content from PHP page
$(".loading-div").hide();
});
});
</script>
The pending.php page also contains another load:
$("#pending_view" ).load( "fetch_pages.php?query=admin_user_view&view_page=pending", function(){ //get content from PHP page
$(".loading-div").hide();
});
The problem is, the loading in pending.php is not working. I also tried:
$('#admin_user_view').load('admin_modules/user_mgt/pending.php',
function(){
$("#pending_view" ).load( "fetch_pages.php?query=admin_user_view&view_page=pending", function(){ //get content from PHP page
$(".loading-div").hide();
});
});
What did I miss? Or is this really not possible? If not possible, what alternative can I do?
Your help is highly appreciated.
Thanks!
Note: Both the first and the second load functions are wrapped in document ready function and the third one is being called by a function when a button is clicked.
Forgive me for not double checking everything. The jQuery functions are working perfectly. The problem lies within the PHP code I'm calling inside that load so nothing seems to happen. When I fixed the PHP code, everything worked fine. Thanks for your help!
When I load Bootstrap popver content with ajax, the popover is not showing.
Javascript:
var id = 1;
$.post("load.php?pageid",
{
pageid:id;
},
function(data,status){
document.getElementById("body").innerHTML=data;
});
HTML response:
hover for popover
<script>
$(function ()
{ $("#example").popover();
});
</script>
When I place the HTML response above directly in the <body id="body"></body> code, the popover works fine. I dont understand what is going wrong here.
The problem is that you're setting up the popover inside of the function $(). Rather than
$(function ()
{ $("#example").popover();
});
It should be just
$("#example").popover();
Or perhaps better
$(document).ajaxComplete(function() {
$("#example").popover();
});
The reason being that any function inside of $() is run when the document is first finished loading, when the "document ready" event is fired. When that code is pasted inside of the original HTML, it works because it's present when the document finishes loading.
When it's the response from an AJAX call, it won't run inside of $(), because the "document ready" event already fired some time ago.
with the help of jQuery you can initialize all things that needs to be initialized using
$(document).ajaxSuccess(function () {
$("[data-toggle=popover]").popover();
$("[data-toggle=tooltip]").tooltip();
// any other code
});
inspired from Olaf Dietsche answer
<script>$(function () { $('[data-toggle="tooltip"]').tooltip()});</script>
Add this at the end of whatever you are loading in with ajax. You should already have this somewhere to opt-in to the tooltip, but put it again to re-initialize the tooltip.
I've solved my last issue in this topic: jQuery on second click doesn't work - mobile
I have two pages, index.php and add.php.
From index.php I call the page add.php this way:
$(document).on('pagebeforeshow', '#page-index', function(){
$('#openAdd').bind('click',function(){
$.mobile.changePage('add.php');
});
});
I have several buttons on the page add.php that work, but if I hit the button "openAdd" from the page Index which opens the page add, every single button on the page add stops working. I get no errors, no messages, nothing, simply it doesn't perform any action.
If I type in the browser the URL directly to mywebsite.com/add.php they work.
This is what I've tried so far without any success:
<input type="button" id="clients-btn" value="Clients" data-role="none"/>
$("clients-btn").on("click", function(){
console.log("hit!!!!");
});
$(document).on('pagebeforeshow', '#page-add', function(){
$('#clients-btn').bind('click',function(){
console.log("hit!!!!");
});
});
Solved.
All you have to do is, on the second page (in my case add.php), put the following:
$('#page-add').on("pageinit", function () {
$('#clients-btn').one('click', function () {
console.log('button clicked!!');
});
});
Edit: actually not working.
Wrap your whole code in pagecreate
$( document ).on( "pagecreate", "#page-add", function( event ) {
$('#page-add').on("pageinit", function () {
$('#clients-btn').bind('click',function(){
console.log("hit!!!!");
});
});
});
And try adding code called at the end of page
I'd to create some transitions between pages. I've made it this way:
$("div.fading").css('display', 'none');
$("div.fading").fadeIn(500);
$("a.fade").click(function(event){
event.preventDefault();
link = event.href;
$("div.fading").fadeOut(500, redirect(link));
});
in redirect have I used window.location and it has been working, but the fadeIn effect has been running for every page which has been loaded. I didn't like that, so I'm trying make it with ajax. It should allow me to call the fadeIn function as a callback function in jquery. I have this code,
$(".fading").click(function(event){
event.preventDefault();
var link = this.href;
$(".fade").fadeOut(300, function(){
$.ajax({
url: link,
success: function(){
$(".fade").fadeIn(300);
}
});
});
which is not fully working..All effects are OK, but page which I get after fadeIn is simply the same that faded out..IMHO can I do it another way with .load() function, I tried to implement that, but there were too some problems:-)Does anybody know what I should do to make it fully working?Thanks..
You're calling the page via ajax, but you're not replacing the contents of the current .fade div before you call fadeIn(). I've modified your code to do that below. .load() should do the same thing a little cleaner.
$(".fading").click(function(event){
event.preventDefault();
var link = this.href;
$(".fade").fadeOut(300, function(){
$.ajax({
url: link,
success: function(pageHTML){
$(".fade").html(pageHTML);
$(".fade").fadeIn(300);
}
});
});
I think you're just missing any used of the data returned. In the success function you'll need to do something like:
$('.fade').html(data);
Then and you can fade it back in with the page having been updated.
Greetings,
I would like to know what should I do to make appear a ajax loader...
actually I am calling a function in ajax... everything is going well
here is how it's being done
$('#txtEmail').blur(function()
{
$.post("ajaxAvailability.aspx",{ email:$(this).val() } ,function(data)
{
if(data=='false')
...
Now I would like to have a loader so I done it like this:
$('#loader').ajaxStart(function() {
$(this).show();
}).ajaxStop(function() {
$(this).hide();
});
This should be working? what is happening is that I am getting an exception inside the jquery.js....
-thanks in advance
I usually do this in my code:
$('#txtEmail').blur(function(){
var value = $(this).val();
//display loader image
$("#indicator").html("<img src='PATH/loading.gif' alt='' /> Sending...").show();
$.post(URL,
{ email:value },
function(data) {
$("#indicator").empty().hide();
//...
});
)};
In above code, the animated image will appear inside DOM element with id="indicator". After AJAX request completed, I emptied the container, then hide it. Adjust this according to your page element.
My another code use jQuery blockUI, usually when submitting form, to prevent double submit. Check the web for the usage example.
Greetings, for everyone
The solution for this issue is correct the jquery-1.3.2-vsdoc2.js file
on the ajax function there are f parameter, this should be replaced into callback