I am developing a mobile solution with a combination of jQuery.mobile and
asp.net webforms.
For postbacks of my asp.net controls to work properly I have to disable ajax at
the top of the page, like this:
<script>
$.mobile.ajaxEnabled = false;
</script>
But when ajax is disabled like this, other functions doesn't seem to work.
I can't call dialogs/popups from jQuery document ready
For example:
$(document).ready(function () {
$('#myPopup').popup('open');
});
This will just cause the popup to show in less than a second,
then it dissapears. Also when I register a clientscript
from codebehind to trigger the popup when a serverside button
is clicked, the popup just flashes, then dissapears.
But when I disable ajax at the top of the page, the popup
calls works fine.
Any ideas how to get around these issues?
Document ready can not be successfully used with jQuery Mobile. It will usually trigger before page DOM is populated.
Instead of this line:
$(document).ready(function () {
$('#myPopup').popup('open');
});
Use this line:
$(document).on('pagebeforeshow', '#page-id', function(){
$('#myPopup').popup('open');
});
Where #page-id is an id of page that contains that popup.
jQuery Mobile has a problem with document ready so its developers have created page evenets to remedy this problem, read more about it in this ARTICLE or find it HERE.
EDIT :
I think your problem is also in $.mobile.ajaxEnabled = false; handling.
That code sample MUST be triggered from mobileinit event like this:
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
One more thing, mobileinit event MUST be triggered before jQuery Mobile is initialized, like this:
<script src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script>
$(document).bind("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
I DID IT.....
DO NOT USE
instructions described here
simply open jquery.mobile-1.3.1.min.js file
fine ajaxEnabled:!0 and change it to : ajaxEnabled:!1
now hit CTRL+F5 and joy the project while it continues ! ;)
Related
This code is listed on the header of all of my webpages. When I click a link on my website, I'm unable to use the buttons on the page until after I refresh. How can I fix this?
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.faqElement').click(function() {
var faqElement = $(this);
var question = faqElement.find('.faqQuestion');
var answer = faqElement.find('.faqAnswer');
if (!answer.hasClass('activeFaqAnswer')) {
$('.faqElement').removeClass('flipButton');
faqElement.addClass('flipButton');
$('.activeFaqAnswer').css('max-height', '');
$('.faqAnswer').removeClass('activeFaqAnswer');
answer.css('max-height', 'none');
answer.css('max-height', answer.height());
answer.addClass('activeFaqAnswer');
}
});
});
</script>
This sounds like a conflict with your custom script and Squarespace's AJAX loading:
Occasionally, Ajax may conflict with embedded custom code or anchor
links. Ajax can also interfere with site analytics, logging hits on
the first page only.
So, depending on your template, you may find that disabling AJAX is a simple solution:
You can disable Ajax in the Style Editor, with some exceptions:
Ajax can't be disabled in Skye, Foundry, or Tudor.
Ajax can't be disabled on the blog landing page for Farro and Haute. If you uncheck Enable Ajax Loading in these templates, they
will still use Ajax to load the Blog Page.
To enable or disable Ajax:
In the Home Menu, click Design, and then click Style Editor.
Scroll down to Site: Loading.
Check or uncheck Enable Ajax Loading.
If you do not want to disable AJAX altogether, then see "Option 2" in this answer for ways to write your code so that it will work on initial page load and on AJAX page loads.
It seems Ajax loads content dynamically and ruins your bindings.
You could call your function after each Ajax request using $.ajaxComplete()
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<script>
function faqElementClick() {
$('.faqElement').click(function() {
var faqElement = $(this);
var question = faqElement.find('.faqQuestion');
var answer = faqElement.find('.faqAnswer');
if (!answer.hasClass('activeFaqAnswer')) {
$('.faqElement').removeClass('flipButton');
faqElement.addClass('flipButton');
$('.activeFaqAnswer').css('max-height', '');
$('.faqAnswer').removeClass('activeFaqAnswer');
answer.css('max-height', 'none');
answer.css('max-height', answer.height());
answer.addClass('activeFaqAnswer');
}
});
};
$(document).ready(faqElementClick);
$(document).ajaxComplete(faqElementClick);
</script>
I use pjax to call a page with ajax. But when a page that uses a slide show called, why my slide show was not running well? It seems that the page can't run jquery or slide show javascript. Because if I call the page (refresh) normally (without pjax) slide show running smoothly.
My pjax code :
<script>
$(document).ready(function(e) {
$(document).pjax('a[data-pjax]', '#content');
});
</script>
My controller code (Using Yii Framework) :
public function actionIndex()
{
if(Yii::app()->request->isAjaxRequest){
$this->renderPartial('index',array(
'dataArtikel'=>$dataArtikel,
));
}else{
$this->render('index',array(
'dataArtikel'=>$dataArtikel,
));
}
}
How do I fix my pjax code? Is there an API to reload the page with jquery to call pjax? Or I need to change my code in controller?
Thanks before...
If the pjax link is in the page that is loaded by pjax, you will need to 'pjaxify' that link on load. Put this somewhere in the original page (maybe the header or footer):
$(document).on('pjax:complete', function() {
$('a[data-pjax]').pjax();
});
So i have a website that I'm doing for a school project. It's supposed to be like PasteBin. So on the right theres a different div (Uued koodid) that shows newest pastes. On click, they are supposed to show what they include using AJAX to refresh the left div. This only works for 4 times and then stops, but URL is still changing. After refresh it changes again and works again for 4 more times.
In main.js i have
...
$.ajaxSetup({ cache: false });
...
$(".uuedKoodid").click(function () {
$(".left-content").load(document.location.hash.substr(1));
});
...
EDIT:
Also other AJAX functions work. If I log in, I can switch between settings and profile perfectly but still cannot watch new codes
When you replace right menu with new code (from ajax call) you don't attach click event again on .uuedKoodid items so they don't do anything. You need to attach event again or attach it like this:
$(document).on('click', '.uuedKoodid', function () {
$(".left-content").load(document.location.hash.substr(1));
});
Edit:
As you noticed this will cause small problem. onclick event run before browser run standard link action. First you load ajax and then browser changes address. This way you are 1 action behind. Better solution than reading with delay (setTimeout) i think would be to read address directly from link:
$(document).on('click', '.uuedKoodid', function () {
var url = $(this).attr('href');
$(".left-content").load(url.substring(url.indexOf("#")+1));
});
Reloading a page or navigating directly to the jQuery Mobile hash URL does not fire the pageinit even once. For example, I have tried this on my secondary page:
$(function () {
$(page).bind('pageinit', function () {
console.log('bind pageinit');
});
$(document).on('pagecreate', page, function () {
console.log('pagecreate');
});
$(document).on('pageshow', page, function () {
console.log('pageshow');
});
$(document).on('pageinit', page, function () {
console.log('pageinit');
});
});
While on page one, I click to go to the page two and the above life cycles gets written to the console. The URL also appended #two. This is great, but when going to the link on another machine, the page init does not fire. It seems only a button click can trigger the page init.
I have a live example here: http://dl.dropbox.com/u/5986646/jqm-pageinit.html. Paste this in the URL and events do not trigger: http://dl.dropbox.com/u/5986646/jqm-pageinit.html#two (notice the hash URL).
Yes I had the same problem.
For execute some javascript code on page init a use this structure:
$(document).bind("mobileinit", function(){
$('#mainPage').live('pageshow', function(){
// Some Javascript code
});
});
Now I can execute code all the time that the page was called.
I am working on an app with jQuery mobile. I have a script that I want to start once the user enters a page and stops once they leave.
I have used:
$( document ).delegate("#myPage", "pagecreate", "", function() {
//my script here
});
to have the script only run once the user enters "myPage." How can I have it so the script stops once they leave "myPage"?
Edit: I am using ajax-based navigation so it is all one HTML file. I am trying to start and stop a script when someone enters a new subpage (#page).
You can use the pageshow and pagehide events for a specific pseudo-page. Something like this:
$( document ).delegate("#myPage", "pageshow", function() {
//start your code
}).delegate("#myPage", "pagehide", function() {
//end your code
});
Here is the documentation for jQuery Mobile Events, there is a whole section on page-events: http://jquerymobile.com/demos/1.1.0/docs/api/events.html
Using pageshow/pagehide has the advantage that the code will run on subsequent views of the pseudo-page as well, not just on the first page-load.