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
Related
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
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();
});
});
I've created a login system using HTML, JavaScript, Ajax and PHP.
I'm trying to implement the log out function now, here's what I have:
First there is a div in my html, which says welcome to anyone on the site not logged in:
<div id="welcome" style="postion:absolute; top:0; float:right;">Welcome to SIK!!!!</div>
I then have a JavaScript function which is called when a user is logged in or registered to amend the div to say hi to the specific user, and show a log out button.
function show_logged_in(success)
{
var is_logged_in = success;
var dataString = {"reg":invalid, "login":invalid,"is_logged_in":is_logged_in};
$.ajax({
type:"POST",
url:"PHP/class.ajax.php",
data:dataString,
dataType:'JSON',
success: function(username) {
alert("User is shown");
user = username;
$('#welcome').html('<p>Hi ' + user + '</p><p><button id="logout_but"
type="button">Log Out</button></p>');
},
error: function() {
alert("ERROR in show_logged_in");
}
});
}
And then when the user clicks logout, in my main js file there is a function:
$("#logout_but").click(ui.logout);
here is my main js file altogether:
$(document).ready(function(){
//----------Login/Register Gui --------------
$('#load-new').hide();
$('#reg').hide();
$('#login').hide();
//create new instance of gui class
var ui = new Gui();
//if login_but is clicked do ui.login function
$('#login_but').click(ui.login);
//if reg_but is clicked do ui.register function
$('#reg_but').click(ui.register);
//if login_sumbit button is clicked do ui.login_ajax function
$("#login_submit").click(ui.login_ajax);
$("#reg_submit").click(ui.register_ajax);
$("#logout_but").click(ui.logout);
});
So now you can see the order of the calls, and also the click function that is called for the logout button is:
this.logout = function() {
alert("clicked");
var dataString = {"is_logged_out":invalid};
$.ajax({
type:"POST",
url:"PHP/class.logout.php",
data:dataString,
dataType:'JSON',
success: function(success){
alert("User is logged out");
$('#welcome').html('<p>Welcome to SIK</p>');
},
error: function() {
alert('ERROR in log out');
}
})
}
As you can see I have and alert at the top of the last function I posted to show me if the function is actually being called.
My problem is when I click the logout button nothing happens. I also don't see the alert, thus the problem is occurring on the click.
Any help with this situation would be great.
That's because you create the logout button dynamically and AFTER the click handler is trying to attach itself to the element in your main js file. As a result, the handler doesn't find the #logout_but element and therefore doesn't attach to anything.
To fix that, you could use a delegate instead of a click handler:
Replace this:
$("#logout_but").click(ui.logout);
with
$("#welcome").on("click", "#logout_but", ui.logout);
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);
});
});
});