We Keep Coding

Slide show not running well when using pjax

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

Execute javascript function on anchor click, but the code must run on the page opened by that anchor

Is this behaviour possible? I would need the code that is inside on click event handler, to be executed on the new HTML page that is opened by that navigation link.
I've put up a small fiddle to better illustrate what I want to achieve.
http://jsfiddle.net/hWEpL/4/
Here is the jQuery for scrolling:
$.fn.scrollView = function () {
return this.each(function () {
$('html, body').animate({
scrollTop: $(this).offset().top
}, 1000);
});
}
$('#link-3').click(function (event) {
event.preventDefault();
$('.section-3').scrollView();
});
Let's assume that the fiddle is Home Page. When clicking on Section-3, the page scrolls to section-3.
Now, let's say the we are on the second page(about) and we click on Section-3. I would like to have Home Page opened, and that the page is scrolled to section-3.
The thing is that I don't want this behaviour when the Home Page is opened, I only need it when someone is on the other pages and clicks on Section-3

You can use Fragment identifiers. So in the about page for example, you would link to the home page with homepage.htm#section-3 and in homepage.htm, you would include just like the code you have included but add
var hash=location.hash
if(hash){
var el=$('.'+hash.substr(1))
if(el)
el.scrollView();
}
in the onLoad. Here we use the fragment as a way to tell the page which element to go to.
http://jsfiddle.net/hWEpL/5/
This is the updated jsfiddle (with simulated hashed location being already followed using
location.href="#section-3" //simulate named links. do not include this in your code
Moving forward, perhaps semantically, you could use ID instead of class, to use the default behaviour of fragments if javascript is disabled, but then you have to place this piece of code to actually prevent the default behaviour (and allow the animation to occur) as stated in https://stackoverflow.com/a/3659116/1480215
setTimeout(function() {
if (location.hash) {
window.scrollTo(0, 0);
}
}, 1);

Apply Jquery After Page Loads

I have following HTML code to add new div:
<a class="add-link" id="buttonAdd" href="#Url.Action("Foo", "Foo1", new {actiontype = "Add" })">Add New Openings</a>
When i click on Add , new div is added. I want to show that div in editable mode by default, but as there is link in html for <a> I am not able to accomplish it. I want to show first div that is added as editable .
$(document).ready(function () {
$('.container').on('click', '.add-link', function () {
$("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
$('#accordion').first().find('.edit-link').css('display', 'none');
$('#accordion').first().find('.done-link').css('display', 'inline');
});
Can someone guide me please.

You need to prevent the default click behaviour:
$(document).ready(function () {
$('.container').on('click', '.add-link', function (e) {
e.preventDefault();
$("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
$('#accordion').first().find('.edit-link').css('display', 'none');
$('#accordion').first().find('.done-link').css('display', 'inline');
});
Apparently this is only the first issue. They also want the code to run after the link page has been loaded!!! :)
How web pages work.
Because the web was designed to be stateless, to a web browser, each page load is separate to the last. Even if they are the same URL. The practical upshot of this is that your code gets reloaded and restarted on each page.
Based on your comments you want to add a div then apply jQuery to the accordion. You have two options.
a)
Detect the change of divs on page load and apply the change then.
b)
Run the link via an Ajax call and update just the required part of the page using informtion in the new page returned from the server.
Of these two options only the Ajax solution will allow you to retain code-control on the originating page. I would suggest the URL be changed to a method which returns a PartialPage containing just the new DIV.
In order to answer this definitively, we need more information about how you prefer to solve the problem.
If you go Ajax:
If you go with an Ajax update, I suggest you change the link to an action that just returns the new DIV in a PartialView. Then you can do something like this:
$('.container').on('click', '.add-link', function (e) {
// Stop default processing of the link
e.preventDefault();
// Load the new page (specified by the clicked link's href)
var $link = $(this);
var url = $link.attr('href');
alert(url); // for testing - remove this
// Execute a HTML GET command on the URL
$.get(url, function (html) {
// Add the new DIV "somewhere" to be determined
$('.container').append(html);
// Then do your other processing
$("#accordion").first().find('.panel-title, .panel-collapse').attr('contenteditable', true).css('border', '2px solid');
$('#accordion').first().find('.edit-link').css('display', 'none');
$('#accordion').first().find('.done-link').css('display', 'inline');
});
});

Reload page when changing hash

Reload page when changing hash.
I have a simple one-page site with several 'pages' on it. These pages are in one wide container which scrolls when you choose one. I have added a hash to the URL so that you can locate to specific pages directly. This just sets the style.left attribute when it matches a hash in a switch statement.
The problem is that when I change the hash value in the URL. For example, changing it from Home.html#Web to Home.html#Photos. When doing this, the page doesn't reload so the Setup function I've created that check for the hash isn't called and the page just remains where it is.
Any ideas for a way to force the page to reload? Or a better solution?
Thanks,
Andy

Don't reload the page. Instead, set up a onhashchange event handler, and adjust the left value from there:
window.onhashchange = function() {
// do stuff
}
Otherwise, why using hash links instead of regular links? In any case, if you really want to reload, just put window.location.reload() inside the onhashchange handler...

I had a JQuery function that fired on $('body').on('click', '.subcategory-link', function () { }); which detected if there was a hash appended to the URL in my case, so I kept that function the same and then just used a force reload whenever a hash change was detected:
below i write the code pls try this one it wrok from me charm.
$(document).ready(function() {
$('body').on('click', '.subcategory-link', function () { var data = $(this).attr('href');
alert($(this).attr('href'));
window.location.reload();
});
});

Cannot navigate to dynamically added page in jquerymobile / phonegap

I just cant figure out where I am going wrong. I want to create a page dynamically in jquerymobile. Then append it to body and navigate to it when clicking on a link. Here is what I try:
In my html I've got a second page, which is sort of a basic structure for the dynamically generated one. So I clone it and append it to body. The action is triggered on "pagecreate" of the active page (but triggering it on pagebeforeshow or pageshow doesnot change anything).
$('#basic-page').clone().attr({'id':'uniqueid'}).appendTo($.mobile.pagecontainer);
Then I make it live like a page...
$('#uniqueid').page();
And finally I add a link to the active page.
$('#activepage .content').append('Test');
But when I click this link, nothing happens. What is wrong? Im Running jquerymobile 1.3.2 on phonegap 2.9.0

Instead of cloning a page, create a new page and modify it the way you want.
Demo
$('<div/>', {
'data-role': 'page',
id: 'foo',
'data-theme': 'e'
}).appendTo('body');
$.mobile.changePage('#foo');

You could try having something like.
$("#uniquieid").on("vclick", function (e) {
// Do your stuff here
// or navigate to the desired section of the page.
$.mobile.changePage("#uniqueid");
e.preventDefault();
});