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
Related
I am a beginner in playing with jQuery/AJAX, my goal is to load content to the div below:
<div id="blogcontentloaded">
</div>
I came up with .load and it worked, the page loads but it keeps refreshing and loads over and over.
$(function loadBlog(e) {
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
});
I tried using e.preventDefault but it doesn't work for me.
Also my goal is to do this without any buttons. When main page loads portion of the page that I want to load along with main page is going to be for updating the content in loaded element.
Thanks for the help!
You can use the javascript load function. It may solve your problem. here you can get some information about windows load and jQuery ready functions.
$( window ).on( "load", function() {
$('#blogcontentloaded').load('/blog/page1.html');
});
You need to wrap the function in the 'ready' function and make sure that it is executed once:
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
});
Have you used the jQuery file on the top of other js files?
Add the jQuery.js file
$(document).ready(function(){
$('#blogcontentloaded').load('/blog/page1.html');
e.preventDefault();
return false;
})
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.
$(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.
I have a problem regarding $.mobile.changePage(); I have this select control that serves as a Jump To Page controller. The code is written below:
$( document ).one( "pagechange", function() {
$("#jumptopage").bind("change", function(){
var val = $(this).val();
$.mobile.changePage( "http://localhost/mchild/dashboard/videos/all/20/" + val, {reloadPage : "true",transition: "fade", allowSamePageTransition : "true"} );
return false;
});
});
Now this code works the first time; but as I jump to another page it causes jQuery Mobile to jitter back and forth to current page and previous page that was loaded before, or in other cases the bind() wont work anymore.
I tried to log the activity by adding
console.log('i was triggered')
inside the $( document ).one().... right after the bind statement and it still fires except for the bind.
I'm not sure if I did something wrong... please help...