I have Jquery set up so when I click on a button it loads in the PHP from another page. Currently it loads this every time I click the button. I would like to have it so it only loads the content once.
Here is my code:
//initially hides all containers
$( document ).ready(function() {
$('.aboutcontainer,.contactcontainer,.homecontainer,.portfoliocontainer,.musiccontainer').hide();
});
//home page must show as first page on arrival
$( document ).ready(function () {
$(".homecontainer").show();
});
//load about page
//button to start animation
$( document ).ready(function() {
$('#about').click(function () {
//fades unwanted pages
$('.homecontainer,.musiccontainer, .portfoliocontainer, .contactcontainer').fadeOut({queue: false, duration: 700});
//animates up unwanted pages
$('.homecontainer, .musiccontainer, .portfoliocontainer, .contactcontainer').animate({
'margin-Top' : "-1000px",
},400, 'easeInBack');
//brings in selected page with a 0.7 second pause
setTimeout(function() {
$('.aboutcontainer ').fadeIn({
queue: false,
duration: 100
});
$(".aboutcontainer").animate({
marginTop: "115px",
},1200,'easeOutQuint');
}, 700 );
//loads in selected page content
setTimeout(function() {
$( ".aboutcontainer" ).load( "about.php" );
}, 1200 );
});
});
Also I am experiencing difficulty with the page not loading the change page functionality when I open it in incognito mode.
Here is a link to the site: http://benliger.webatu.com
Why would this be?
To allow an event handler to run only once, use .one() rather than .click() (which is a shortcut to .on("click"...).
Documentation: http://api.jquery.com/one
Related
I am using jQuery to send the data to the server by the post method. The function is activated on click on the span tags inside the html page. Posted data set a php session variable and after that the page needs to be reloaded. Everything is working fine in Chrome, but in IE9, I have to click several times to see the effect. If I put an alert inside the function, it works fine (but I do not want that alert).
I am not an experienced user of jQuery.
Here is the code of the jQuery
$(document).ready(function(){
$("#ciril").click(function(){
$.post('myphpfile.php', { 'lang' : 'cir'});
location.reload();
});
$("#latin").click(function(){
$.post('myphpfile.php', { 'lang' : 'lat'});
location.reload();
});
});
and here are the span tags
<span id="latin">Text1</span>
<span id="ciril">Text2</span>
You do NOT want to do a location reload when you use Ajax since it sort of negates the point of using Ajax in the first place.
If you insist on doing it anyway, you need to reload in the callback
$(function(){
$("#ciril").on("click",function(){
$.post('myphpfile.php', { 'lang' : 'cir'}, function() {
location.reload();
});
$("#latin").on("click",function(){
$.post('myphpfile.php', { 'lang' : 'lat'}, function() {
location.reload();
});
});
If the page you are loading is the same page you are on, simply submit a form and have the server return the page to you
Here is a neater way
<span class="lang" id="lat">Text1</span>
<span class="lang" id="cir">Text2</span>
Using
$(function(){
$(".lang").on("click",function(){
$.post('myphpfile.php', { 'lang' : this.id }, function() {
location.reload();
});
});
The Question
How could I make it where when you pull <div id="content"> down, it does a function and shows a div at the top of the screen that says "Pull Down To Refresh"?
I know iScroll does this, but it won't work with what I'm trying to do. It only works with UL's.
Here is my HTML
<div id="pullDown">
<span class="pullDownIcon"></span><span class="pullDownLabel">Pull down to refresh...
</span>
</div>
<div id="content">
(There is a bunch of items that are loaded in via jquery and php, when you pull down to refresh, I want it to basically react that function.)
</div>
<script>
$(function() {
var refreshCallback = function(loader) {
setTimeout(function(){
//loader.finish();
}, 1000);
};
var cancelRefreshing = function() {
};
$("#draggable").pulltorefresh({
async: true,
// event triggered when refreshing start
refresh: function(event, finishCallback) {
element = $(this)
setTimeout(function(){
alert("refresh");
// you must call this function if refreshing process runs asynchronusly
finishCallback();
}, 1000);
},
abort: function() {
alert("abort");
}
});
});
</script>
for full Demo Click Here
You can provide with iScroll plugin.
iScroll 4: http://cubiq.org/iscroll-4
Github Page: https://github.com/cubiq/iscroll
Demo: http://cubiq.org/dropbox/iscroll4/examples/pull-to-refresh/
try this
$( "#pullDown" ).on( "dragstart", function( event, ui ) {} );
inside the function u can have the ajax call to load the content
$("#content").load("<something.php>");
that is on the whole
$( "#pullDown" ).on( "dragstart", function() {
$("#content").load("<something.php>");
} );
The problem is upon load of website, width of .mCSB_container class is ok, but when i click on a link, for example "projects" link, which fires an ajax function, width of .mCSB_container does not change even if contents are not that much. Web page will not load upon click on the link. I tried using the "update" function, but seems like it is not working.
ok I use this plugin and i had te same problem but check this:
<script type="text/javascript">
$(function() {
$("#content").mCustomScrollbar({
scrollButtons:{
enable:true
},
advanced:{
updateOnContentResize: true // <- the solution
}
});
// get ajax link
$('.Link').click(function(){
$.get(this.href, function(data) {
$("#content .mCSB_container").html(data); // fill .mCSB_container
$("#content").mCustomScrollbar("update");
$("#content").mCustomScrollbar(
"scrollTo"
,"top"
,{scrollInertia:200}
); // go to Top content
});
return false;
});
});
</script>
I have a page that generates a google map on page load that I would like to call from another page via a link. Here is how I'm creating the google map inside a colorbox:
// show_map.php
jQuery(document).ready(function(){
$.colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
Here is my attempt but something tells me I've headed down the wrong path. Should I use the modal window for something like this or is there a better way?
$(document).ready(function() {
$('.show_map').click(function() {
$.get("show_map.php", function(data) {
// alert(data);
})
});
If I've understood correctly, colorbox is already designed to do what you want to do. You don't need to use extra ajax calls (it's already built in). Just set the href option to your page instead of your inline html (then of course remove the inline:true option). The full code (in the page with the link to your map):
$(document).ready(function() {
$('.show_map').click(function() {
$.colorbox({
href: "show_map.php",
width:"643px",
height:"653px"
});
})
});
You can also load any external page if you add the iframe: true option to that code.
Either you use jQuery's .getScript() if the page only contains JavaScript or you can use .load() to insert the page content into the DOM.
$(document).ready(function() {
$('.show_map').click(function() {
$('.some-element').load("show_map.php");
})
});
EDIT: a better approach
have the colorbox inline instead. Saves a round trip to the server.
$(document).ready(function() {
$('.show_map').colorbox({width:"643px", height: "653px", inline:true, href:"#map_container"}, function() {
$.getJSON('map.php', function(data){
initialize();
setMarkers(map, data);
});
});
});
All,
When I click a link on a web page, a JQuery UI Dialog opens up and it loads some ajax content into it. If I click a link inside this dialog, it opens up a child dialog. When I click "OK" in the child dialog, I want the child dialog to close and refresh the ajax content in the parent dialog.
Do you already have the code that closes the child dialog ? Is it an alert() call ? If so, simply add a
location.reload();
after the alert call. If it's something more complicated like a link, try
$('a.link-that-closes-dialog').click(function(){
//Code to close the dialog
location.reload();
});
i use this script for choose if show/hide any content.
After clicking button "Ritira" in the dialog, the page redirect me in the same page but whit a querystring (ex. www.mypage.ext?t=yes).
The script work, but I wish at the click of the button "Check Out" there is a refresh of the page.
I tried to enter the location.reload but did not work:
$(function() {
$(document).ready(function() {
$(".dialog-ritira").dialog({
autoOpen: false,
modal: true
});
});
$(".ritira").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$(".dialog-ritira").dialog({
buttons : {
"Ritira" : function() {
window.location.href = targetUrl;
location.reload();
},
"Annulla" : function() {
$(this).dialog("close");
}
}
});
$(".dialog-ritira").dialog("open");
});
});
Thanks