Develop Reference

content loaded with JQuery needs form submit to reload content in parent

Working on an admin-dashboard page, and I have it loading other pages from a nav menu with JQuery like so:
$('#stores.sub_menu--link').click(function(){
$('#content').load("https://mydomain.mywebsite.com/ApageWithForms.php")
});
This part works fine; the problem is this:
The loaded content is coming from PHP pages, and have form and click GET and POST functions. These work fine if we load the page itself in a browser, but when the page is loaded as content POSTing or GETing loads the page in a new tab instead of reloading in the content. I understand WHY it does it, but I have no idea HOW to fix it! I have tried adding _PARENT to forms and pages even though I knew this wouldn't be the answer (it wasn't).
I've tried searching, but I think my limited ability to explain the problem is also preventing me from finding a solution.
Can anyone point me in the right direction? What I am looking to have happen is when a form is submitted have the page re-load into the dynamic location of the parent.

Figured it out. The loaded content had duplicate class, id and names for some elements which confused jQuery. Changing these allowed ajax posts to work as intended.

jQuery EasyTabs: All Content Shows On Load

I'm using the jQuery EasyTabs plugin. I have a web page with two tabs working pretty well. However, when the page containing the tab code loads, for a brief moment both tabs' panel contents (not the tabs themselves) are visible. It's only for a moment, then the second tab's panel content is hidden, and things work as they should. Super annoying.
Any attempts I've made to hide or delay these content from being shown using jQuery or DOM calls have not been successful. Here's the call I make, whose code is loaded just above the HTML of the tabs and panels.
$(document).ready( function() {
$('#tab-container').easytabs();
});
Any suggestions would be great. Thanks.

My suggestion, as a workaround and without being able to actually see the problem, is to initially hide the offending elements with CSS then show them after easytabs() has been called. The problem is likely because there is a tiny delay between the elements loading and the jQuery call.
So #tab-container { display: hidden }; then:
$(document).ready( function() {
$('#tab-container').easytabs();
$('#tab-container').show();
});

How to use phantomjs to click "Load More" button continually until page is fully populated?

I'm very new at learning phantomjs and casperjs and looking for some pointers in how to click a "Load More" button to fully populate a page. I've looked through similar questions but don't see anything that matches (at least not that I understand). The idea is to scrape viewer counts off a livestream.com event page.
To start, I can grab the first page in plain text with phantomjs (using cnet as an example) as follows:
var page = require('webpage').create();
page.open('http://livestream.com/cnet', function() {
console.log(page.plainText);
phantom.exit();
});
There are quite a number of additional event listings though which require clicking on "Load More". I would like to extend the above code to do this using the following pseudo code:
while ("Load More" exists) {
click button
delay to allow page to load
}
Inspecting the button element on the above url I found the following:
Load More
How can I click (i.e. ng-click="loadMoreEventsPublic('Archived')") repeatedly until the page is fully loaded and then exit phantomjs?
Would it make more sense to do this in casperjs?
Please excuse my extreme noob level, I'm trying to figure this out as much as I can but I need some direction.
Thank you!

You can write your own implementation like the below skeleton
function onLoadMoreLinkExists(){
casper.click("load more link selector");
casper.then(function(){
casper.waitFor("load more link selector", onLoadMoreLinkExists, afterAllLoad);
});
}
function afterAllLoad(){
// what to do once after all lazy load content loaded
}
casper.waitFor("load more link selector", onLoadMoreLinkExists
}, afterAllLoad);
I 've done such kind of implementation while ago & it worked nicely.

creating jquery effect to show new page in same screen

In some of the website I found header and footer remains fixed.
When user click on any link in header or footer then new page opens from downside(or any other way) on same window.
I dont remember exactly the link for such site. I appreciate if someone can show me how that work.
I know how to open new page without page reload using ajax. But dont know how to create attractive effect which web developer creates.
I google it but could not think correct words to get this exactly.

If you do know how to navigate (just in case - here is an example: AJAX navigation), but need to see examples of navigation "styling", Codrops would be a great place to start:
Codrops - navigation examples
Codrops - page transitions

"I know how to open new page without page reload using ajax. But dont know how to create attractive effect which web developer creates."
The simplest method is to have a container div within which you put the variable content (i.e., the current "page"):
<div id="content"></div>
(When your page is first loaded that div can have default content as appropriate, it doesn't have to start empty.)
Then using the Ajax method of your choice (that you mention you already know how to use), in the success handler you then use an animation method to hide that main div, then change its content to the html returned via ajax, then show the div again using the animation method of your choice:
$.ajax({
url: 'yourUrlHere.com',
success : function(newContent) {
$("#content").fadeOut(1000, function() {
$(this).html(newContent).slideDown(1000);
});
}
});
Demo: http://jsfiddle.net/M4ZZ6/
From there you can get as fancy with the transition as you like by applying different animation effects. Or use a page transition plugin...

If you want the easy way check this.
<div id='loadpage' style='display:none'></div>
Jquery code:
$('#loadpage').load('mypage.php',function(){$('#loadpage').fadeIn(300);});
You can add more efects for your loads.
Here is the example.
JSFiddle

to restore a same id in the page when refreshed

I am working on javascript as well as jquery. and i am using 2divs in my page. so when my page loads the second div is hidden and when a button from the first div is clicked it navigates to the second page. so when i press refresh button now. the page navigates to the first div as it reacts when the page is opened for the first time. any ideas or suggestions to make the second div display even when the page is refreshed. thanks in advance. here is my fiddled code it works fine in the fiddle as i exactly want. but it fails in my project code. http://jsfiddle.net/pWryf/ . any example to attain this through cookies.?
Here is my code for the div:
$('#sbut1').click(function() {
$('.cont1').show();
$('#log1').hide();
});

Try something like this using localStorage:
$('#sbut1').click(function() {
$('.cont1').show();
$('#log1').hide();
localStorage['shown'] = '.cont1';
});
$(function() {
var sel;
if (sel = localStorage['shown']) {
$('.cont1, #log1').hide().filter(sel).show();
}
});
http://jsfiddle.net/5aJZR/
Use can also use cookies for this purpose.

I can think of atleast 2 frontend approaches to this problem:
using a cookie or a more modern localstorage solution to handle sessions. (already been here, cookie)
using a one page app, where navigations is after the hash # sign. such as in backbone webapps.
You can also use some kind of server side session handling, most web framework have one embedded.