I have a fancybox with a form and an Ajax post behind it:
var form = $("#myform");
var data = form.serialize();
var url = form.attr("action");
$.ajax({
type: 'POST',
url: url,
data: data,
}).done(function() {
location.reload();
window.location.reload(true);
}).fail(function() {}).error(function(httpObj, textStatus) {
setTimeout(function() {
$("#user_email").focus();
}, 100);
$("#quickSigninError").fadeIn();
$("#loadingSpinnerPopup").fadeOut();
$("#submitBtn").prop("disabled", false);
$("#submitBtnCurrent").prop("disabled", false);
$("#cancelBtn").prop("disabled", false);
});
The fancybox works great submits the form and reloads the fancybox when Ajax.done() occurs.
The problem:
I can reload the Fancybox with ease but now my question is how do I reload the original window that's behind the Fancybox without closing the Fancybox.
To emphasize the situation, please note the following screenshot:
Kind regards and thanks for anyone that can help me! :)
EDIT1: Goal is not to get the Fancybox closed.
You cant reload the website, that will reload your page ( including the fancybox. )
create an ajax call that will give you the page content
create another ajax and change the content of the parent
something to keep in mind,
you better change all the content of a (div class="content")
and attach the fancybox to any object not inside the content div because it will be changed.
$.ajax({
type: 'POST',
url: url,
data: data,
}).done(function() {
location.reload();
// ajax to fetch div content //
$.get( "ajax/test.html", function( data ) {
$( ".content" ).html( data );
alert( "Load was performed." );
});
}).fail(function() {}).error(function(httpObj, textStatus) {
setTimeout(function() {
$("#user_email").focus();
}, 100);
$("#quickSigninError").fadeIn();
$("#loadingSpinnerPopup").fadeOut();
$("#submitBtn").prop("disabled", false);
$("#submitBtnCurrent").prop("disabled", false);
$("#cancelBtn").prop("disabled", false);
});
Inside iframe use javascript:
parent.location.reload();
//or
parent.location.href = 'http://google.com'
Note, that iframe should contain code from same origin (the same domain, and the same protocol).
Related
Lets say I have one page "page1" which consist of some info and a button named "Add".
When I click on this button, it opens a popup modal window that consists of a form with around 10 fields and submit button. Once I click on this button, I used ajax post to submit the form and at the server side it does insert and update operation and return success or failure result.
During this ajax process, I am displaying a loading image. What I am trying is just after this loading image it should redirect to new page. Lets say "page2". But in my code, i see after this loading stops , I see the modal window and "page1" for about 2-3 seconds and then only it redirects to "page2".
I am not sure if my question is logical or not but still if there is any method to stop it.
Below I have ajax processing code.
Thank you.
$.ajax({
type: 'POST',
url: 'page2.php',
data: {
'data': form_data
},
success: function(response)
{
var arr = JSON.parse(response);
if(arr.success == true) {
window.location.href = 'page3.php';
}
else {
alert('There are some error while saving record.');
}
},
beforeSend: function()
{
$('.loader').show().delay(9000);
},
complete: function(){
$.fancybox.close();
$('.loader').hide();
}
});
$.ajax({
success: function(response)
{
...
if(arr.success == true) {
...
}
else {
...
$('.loader').hide();
}
},
...
complete: function(){
$.fancybox.close();
}
});
Don't hide the loader after ajax request is done.
I have some JS files included in my page that are simple for displaying blocks on click ant etc..
On another part of page, I have a button. When I click it an ajax call is made that returns some values that I display on the page. To display it, I'm reloading part of page like this:
$(document).ready(function () {
$(document).on('click', '.add', function (e) {
$this = $(this);
$.ajax({
type: 'POST',
url: 'add',
dataType: 'JSON',
data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
success: function (data) {
if(data.success == false){
alert('error')
}else{
$('.test').load(" .test");
$('.sidebar').load(" .sidebar");
$('.top').load(" .top");
}
}
});
});
This reloads part of page, displays values and etc..
However, after the ajax call is made, the JS stops working. When I click my buttons, nothing happens. No errors or anything.
I think it has to do with the ajax when I refresh part of twig and it messes up the previously loaded JS files. But what can I do in that situation? Somehow refresh the loaded JS files? How?
You have to attach event listener on button starting from the container which doesn't get reloaded by Ajax request, like this:
//#mainCont is a container that doesn't get reloaded by Ajax
$("#mainCont").on("click", ".yourBtn", function(){
//do something
});
As said #Nacho M, you need to reinit listener from the loaded element, so you hsould have something like this :
function init() {
$(document).on('click', '.yourclass', function (e) {
//your content
}
// add every button who needs to be reloaded.
}
Init them on loading page first :
$("document").ready(function() {
init();
})
And on success of Ajax call :
$.ajax({
type: 'POST',
url: 'add',
dataType: 'JSON',
data: {product: $this.parent('.input-append').find('input').data('id'),quantity: $this.parent('.input-append').find('input').val()},
success: function (data) {
if(data.success == false){
alert('error')
}else{
$('.test').load(" .test");
$('.sidebar').load(" .sidebar");
$('.top').load(" .top");
init();
}
}
});
In my application, running in a PHP page, I want that a get request is done after a value from a select menu is chosen. The url of the page is
www.mydomain.it/admin/gest-prenotazioni-piazzola.php
So with a jQuery I would like to make a get request to the same page so that it is reloaded but with a parameter. In fact, at the beginning of the page I have:
if (isset($_GET["param1"])) {/*build page with content 1*/}
else if (isset($_GET["param2"])) {/*build page with content 2*/}
So I tried with
jQuery("#tipologia_piazzola").on('change', function() {
if (this.value == "mensile") {
jQuery.ajax({
url: "",
type: "get",
data:{param1:"mensile"},
success: function(response) {
//Do Something
},
error: function(xhr) {
//Do Something to handle error
}
});
}
});
But this doesn't do exactly what I want because the call is done in background and the page is not reloaded. Any help would be appreciated.
Thanks for reading
You don't need ajax for this. All you need to do is:
$("#tipologia_piazzola").on('change', function() {
window.location.href = window.location.href + '?param1=' + $(this).val();
});
I have a function in jquery that submit a form that is working fine, but i need different types of reaction according to the response, sometimes i need to show a message, sometimes reload the window, and other relocate the window
I have a problem with this last part, i dont know how can i detect that is a url, and change the location.
this is my script jquery
function process_form(type_form, id_content_error){
var url = "url.php?form="+tipo_form;
var response= document.getElementById(id_content_error);
response.style.display='block';
$.ajax({
type: "POST",
url: url,
data: $('#'+type_form).serialize(),
success: function(data)
{
if (data==1){
window.location.reload();
}else{
response.innerHTML=data;
}
}
});
return false; // Evitar ejecutar el submit del formulario.
};
My php returns 3 types of sentences,
"1": when i need to reload the window.
"messaje": when i need to show something.
"some_url.php":when i need to relocate the window.
sorry for my english, and thanks
I resolve it adding this in the sucsess function
}else if (data.search(/.php/)!=-1){
window.location = data;
}
I have two problems
I am trying to open a jQuery colorbox and it is very slow. The reason is I am trying to get html content from a different page (I cannot use iframe because I just need a part of this page). The following code works but it takes time after the button is clicked:
$(document).ready(function() {
$(".cart-link a").click(function(event) {
$(this).colorbox.close();
});
$(".rest-menuitem a").click(function(event) {
event.preventDefault();
var result = null;
var sURL = $(this).attr("href");
$.colorbox({
html: function() {
$.ajax({
url: sURL,
type: 'get',
dataType: 'html',
async: false,
success: function(data) {
result = data;
}
});
return $(result).find('.product');
},
width: '650px',
height: '10px',
onComplete: function() {
$(this).colorbox.resize();
}
});
});
});
I want to know if there is a alternative way to do it. I dont mind if the colorbox popup and then takes time to load the content. The above version can be fount at this url (http://delivery3.water-7.com/index.php/restaurants/manufacturers/3/Barcelona-Restaurant-&-Winebar/products).
I am also trying to close the colorbox when a user clicks on add to cart. But some reason it is not triggered. $(".cart-link a").click is not triggered when I click on add to cart. Is there a special way to add jquery to colorbox content?
Try this instead:
$(".rest-menuitem a").colorbox({
href: function(){
return $(this).attr('href') + ' .products';
},
width: '650px',
height: '10px',
onComplete: function() {
$(this).colorbox.resize();
}
});
ColorBox uses jQuery's load() method for it's ajax handling, so you just need to add the desired selector to the link's href.
For your question 2 can you try this ?
$(document).ready(function() {
$(".cart-link a").live('click',function(event) {
$(this).colorbox.close();
});
});
For your question 1..it will be slow since you are fetching it from different page.Use a different logic for that
For your question no 1
$('selector').colorbox({onLoad: function() { /*Intially load a empty color box with only <div id="contenttoload"></div> (No other html content */
$.ajax({
url :'Your url',
data : {}, //data to send if any
type : "POST" //or get
success:function(data){ /*data means the stuff you want to show in color box which you must return from the other page*/
$('#contenttoload').html(data); //data should be well formatted i mean add your css,classes etc from the server itself */
}
});
}});