Slide show not running well when using pjax - javascript

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();
});

Related

Need to click Javascript URL automatically on page load

I am using below Javascript function for the Link in the homepage. Requirement is to link clicked automatically on page load.
Link-
document.writeln("Live Chat");
I have tried below steps like adding document.getElementById('zautoclick').click(); and added id="zautoclick" before href but the problem is that my page does not show the link neither it loads the second page which comes after clicking on Live Chat.
Please share some logic to work auto click in my scenario.
try this out
1)
$(function() {
$('#watchButton').click();
});
2)
window.ready=function(){
document.getElementById("linkid").click();
};
3)
window.onload=function(){
document.getElementById("linkid").click();
};

Getting a jQuery function to fire

I have a very simple jQuery function
$('#bnAddDegree').click(function () {
alert("bnAddDegree Loaded");
});
I have broken my site into different pieces based upon what the user clicks. If they click on a tab in the menu to load a section I call a partial_html page and load the section into the center div. If I put the code above into the main page load it will not fire. If I add an external js file and load it when the page loads it will not fire, I think because the elements are not initialized yet. If I put it into an external js page that is loaded after the partial_html is loaded it will not fire. If I put it ON the partial_html page with a tag it DOES fire. If I put a simple javascript function
function testFile() {
alert("File Loaded");
}
In the places that the jQuery code will not fire it works fine.
Is there something special that I'm missing with jQuery?
When I load the javascrip file I use
$.getScript("js/biosketch.js")
And test it with the simple javascript file and it works fine but not the jQuery call.
You need to use delegated event handlers since you are modifying the DOM dynamically.
$(document).on('click', '#bnAddDegree', function () {
alert("bnAddDegree Loaded");
});

function inside page not working correctly after using load() jquery

im using jquery tab as example
i have an index.php
<div id="content"></div>
and the custom.js : load page.php only after navigation click, by default the #content is blank
$(function() {
$('#tabs').tabs();
});
// clicked event below
$('#content').load(page.php) // load only when clicked
page.php : the page.php load successfully but the tabs inside the page is not displaying correctly and all the function not working because im using .load()
<div id="tabs">
tabs data etc..
</div>
so my question is:
1. is there a way to reload the custom.js(file) after using .load() function? or
2. is there a way without writing the bunch of jquery code into script tag on the page.php? or
3. is there any better way doing this?
You could trigger an event in the load callback and listen for that in document ready.
$(function(){
$(document).on('ContentsLoadedEvent', function(){
$('#tabs').tabs();
});
});
$('#contents').load('http://localhost/page.php', function() {
$(document).trigger($.Event('ContentsLoadedEvent'));
});
Currently you are initializing jquery tabs when page is full loaded(but your html is not available that time because you are loading content via ajax after page is loaded),so you have to initialize jquery tabs plugin after html is rendered on page by load call, you have to use load success callback:
$('#content').load("page.php",function(){
$('#tabs').tabs();
});

jQuery-mobile and ASP.NET combination issue

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 ! ;)

Execute JavaScript function with externally loaded link

I'll admit the title is a bit confusing but it was hard to come up with a better one.
Ok, so What I have is 3 pages, first is the main page that the user loads up and the other 2 are ones that are going to be loaded into the main page with jQuery.
Here is the JavaScript code on the first page:
$(document).ready(function(){
$("#mainWrap").css({ width:"300px", height:"200px" });
$("#mainWrap").load("modules/web/loginForm.php");
$('[name=loadRegisterForm]').click(function() {
$("#mainWrap").load("modules/web/registerForm.php");
});
});
First of all it loads the login form into the page and then it listens for a link to be pressed which will then load up the register form in its place if it is pressed.
The link is in the login form that gets loaded, but unfortunately it doesn't work. What am I doing wrong?
I've tried placing the link on the main page with the JavaScript code and it does work, so is it just the fact that loading the link after the JavaScript has all ready been loaded going to leave it not working?
You need to have a callback function for the first load call. In side that call back is where you would set the click handler for the $('[name=loadRegisterForm]') element. Basically,
you are binding a handler to an element that does not exist until the first load is complete.
$(document).ready(function(){
$("#mainWrap").css({ width:"300px", height:"200px" });
$("#mainWrap").load("modules/web/loginForm.php", null, onLoadComplete);
});
function onLoadComplete()
{
$('[name=loadRegisterForm]').click(function() {
$("#mainWrap").load("modules/web/registerForm.php");
});
}

Categories