Develop Reference

jQuery: make get request to the same page with parameters

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();
});

Loading Spinner Image too fast at start of Function

I have a function that displays contents of a posts when clicked on. I want the loading spinner to display and delay for few sections before the post content appears. The issue here is when I click on each post, the spinner appears for maybe 1ms and in some cases it disappears long before the content appears.
function showPost(id) {
setTimeout(function() {$('#loader').show();},1);
$('#pcontent').empty();
$.getJSON('http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?', function(data) {
var $postcon = $('<div/>').append([$("<h3>", {html: data.post.title}),$("<p>", {html: data.post.content})]);
$postcon.appendTo('#pcontent');
});
}
Spinner HTML:
<div id='loader'><img src="css/images/loader.gif"/></div>

Try this:
function showPost(id) {
$('#loader').show();
$('#pcontent').empty();
$.ajax({
url: 'http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?',
dataType: 'json',
success: function (data) {
var $postcon = $('<div/>').append([$("<h3>", {
html: data.post.title
}), $("<p>", {
html: data.post.content
})]);
$postcon.appendTo('#pcontent');
$('#loader').hide();
}
});
}

gif image always behave differently on every device..basically it depends upon device's processing speed. so better option is to use image sprites and animate it with javascript..
In your case at page load there is nothing processing..but as page starts to load device's processor cant handle the load and as a result your gif image gets slower

It seems from your last commented line that you are using a timeout to hide the loader. Instead You should handle the hiding inside the callback function of your ajax request, so that loader hides after request is completed, not after a fixed amount of time:
function showPost(id) {
$('#loader').show();
$('#pcontent').empty();
$.getJSON('http://howtodeployit.com/category/daily-devotion/?json=get_post&post_id=' + id + '&callback=?', function(data) {
$('#loader').hide();
var $postcon = $('<div/>').append([$("<h3>", {html: data.post.title}),$("<p>", {html: data.post.content})]);
$postcon.appendTo('#pcontent');
});
}

Loading indicator for xeditable

I am using X-Editable (earlier Bootstrap-Editable) for in-place editing.
While saving data on server takes approximately 2-3 seconds.
Meanwhile this time span, i want to put a loading indicator.
How do i implement this?

call an ajaxfunction to update contains the loading icon, like the function below:
function ajaxUpdate()
{
var def = '<img src="./images/loader.gif" />';
$('#loading').html(def);
$('#loading').show();
jQuery.post("<?php echo site_url('myController/updateDetails');?>", {
v1 : $('#v1').text(),
v2 : $('#v1').text(),
v3 : $('#v1').text()
},
function(response)
{
if(response==1)
{
//success area
$('#loading').hide();
}
else
{
// failure area
}
});
}
<div id="loading"></div>
when calling this function the loading image is displayed on the div with id loading
and after success of the ajax call it will be hidden.

Image loading before loading a page with get()

How to display a gif image during the loading ?
i use get.
function getCurrentUrl() {
$(
$.get(
"page1.html",
function (data) {
$("#divReceptLoad").empty().append(data);
},
'html'
)
);
}
than you very much if you can help me :)

Create a <img id="loading" src="..." style="display:none;" /> then:
function getCurrentUrl() {
$('#loading').show(); //show it before sending the ajax request
$.get("page1.html", function (data) {
$('#loading').hide(); //hide in the callback
$("#divReceptLoad").empty().append(data);
},'html'));
}
Feel free to add more styling/positioning to the image and replace the basic show/hide methods with fadeIn/fadeOut, slideDown/slideUp or other effects if you fancy.
Here's a loading GIF generator and another in case you don't want to grab one from Google Images.
And here's a nice collection of premade ones.

function getCurrentUrl() {
$('#gif').fadeIn() // show the hidden gif
$.get("page1.html", function(data){
$('#gif').hide() // hide it
$("#divReceptLoad").empty().append(data);
},'html')
}

optimizing colorbox and adding extra jquery

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 */
}
});
}});