My jquery UI script works good. My #dialog has a couple of PHP sql Queries which fetches results. In this case after clicking the #open i want to use Ajax reguest. For example: I click the #open, after clicking UI dialog opens and inside dialog loads user_settings.php, while loading, it shows: Please wait, loading....
After a few seconds, it loads user_settings.php. I think the way which i have used, can load my index.php heavy.
$(document).ready(function(){
$("#dialog").load('ajax_dialog/user_settings.php')
.dialog({
autoOpen: false,
show: 'fade',
position: 'center center',
resizable:false,
draggable:false,
modal:true
});
$("#open").click(
function () {
$("#dialog").dialog('open');
return false;
}
);
});
</script>
HTML
<a id ="open" href="#">Open jquery UI DIALOG</a>
<div id="dialog" Title="My Jquery UI dialog"></div>
As Alex told you, is a bit confusing your question, but I think I understood what you want to do (I hope!).
HTML
<a id ="open" href="#">Open jquery UI DIALOG</a>
<div id="dialog" Title="My Jquery UI dialog">Please wait, loading...</div>
JS
$(document).ready(function(){
$("#open").click(function(){
$.ajax({
type: "POST",
url: "ajax_dialog/user_settings.php",
dataType: 'html',
success: function(data){
$('#dialog').html(data);
}
});
});
});
When you click on open, your dialog will display a "Please wait, loading..." message. After a few seconds, your dialog content will be replaced with your user_settings.php content.
If you don't echo nothing on your user_settings.php file, just replace the line $('#dialog').html(data); with your desire content.
Happy coding!
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();
});
});
I have this problem: I use colorbox to make those jQuery popups (colorbox). The problem is that I want to fade in the content smoothly via ajax without that loading div which you can see right before the content shows up.
When I disable the loading div via opacity it is gone, but I can't fade in my content smoothly. It just pop-ups suddenly.
<script type="text/javascript">
$(document).ready(function(){
$(".register_link").colorbox({
initialWidth:'886',
initialHeight:'410',
fixed:'true',
scrolling:'false',
transition:'fade',
onOpen: function(){
$("#colorbox").css("opacity", 0);
},
onComplete: function(){
var title = 'Register';
$('#cboxTitle').text(title);
$("#colorbox").css("opacity", 1);
}
});
});
</script>
You can use the jQuery animate() function, instead of the .css() function
onComplete: function(){
var title = 'Register';
$('#cboxTitle').text(title);
$("#colorbox").animate({"opacity": 1});
}
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