Back To Programming / Scripting / Coding Forum

jquery ajax googleapis fitering slow help please

  • bayliner75
  • Student
  • Student
  • No Avatar
  • Joined: Jun 08, 2007
  • Posts: 78
  • Status: Offline

Post October 13th, 2011, 6:44 am

Hi

I have used this site before and its been very helpful with topics about ranking ect... but this time I have problem that I really need your help about.

I think its something to do with JQUERY GOOGLEAPIS, below is the code from my site

I am having a new website developed, its a holiday and travel website. On every page I have a search filter box. With five choices ie From the drop down you select a country, then from the next drop down you select a region, then next drop down you select a town. Now the problem is while it goes away and filters out what information it should be displaying for the next dropdown , the box itself and the page jump and you see the what I think is the code behind the search box for a 1 second sometimes 2.It happens mainly to pages with a google map that we have placed on there. Is there any way to speed this up and not have the page jumping, just to make it flow better.

Sorry if I have not explained this in a tech way, but I am just trying to find some information to give to the people building the site who are finding it hard to find a solution.

Any help will be appreciated

Paolo
Code: [ Select ]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript" src="js/jquery.selectbox-0.1.3.js"></script>
<script type="text/javascript">
    $(function ()
    {
        $("#country_id, #region_id, #resort_id, #guests_id, #accommodation_id").selectbox();
    });
</script>
<script type="text/javascript">
  $(function()
    {
    $('.slide-out-div').tabSlideOut(
        {
      tabHandle: '.handle',           //class of the element that will become your tab
      pathToTabImage: 'images/assets/feedback-button-pink.png', //path to the image for the tab //Optionally can be set using css
      imageHeight: '120px',           //height of tab image      //Optionally can be set using css
      imageWidth: '31px',            //width of tab image      //Optionally can be set using css
      tabLocation: 'right',           //side of screen where tab lives, top, right, bottom, or left
      speed: 300,                //speed of animation
      action: 'click',             //options: 'click' or 'hover', action to trigger animation
      topPos: '80px',             //position from the top/ use if tabLocation is left or right
      leftPos: '20px',             //position from left/ use if tabLocation is bottom or top
      fixedPosition: true           //options: true makes it stick(fixed position) on scroll
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  2. <script type="text/javascript" src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
  3. <script type="text/javascript" src="js/jquery.selectbox-0.1.3.js"></script>
  4. <script type="text/javascript">
  5.     $(function ()
  6.     {
  7.         $("#country_id, #region_id, #resort_id, #guests_id, #accommodation_id").selectbox();
  8.     });
  9. </script>
  10. <script type="text/javascript">
  11.   $(function()
  12.     {
  13.     $('.slide-out-div').tabSlideOut(
  14.         {
  15.       tabHandle: '.handle',           //class of the element that will become your tab
  16.       pathToTabImage: 'images/assets/feedback-button-pink.png', //path to the image for the tab //Optionally can be set using css
  17.       imageHeight: '120px',           //height of tab image      //Optionally can be set using css
  18.       imageWidth: '31px',            //width of tab image      //Optionally can be set using css
  19.       tabLocation: 'right',           //side of screen where tab lives, top, right, bottom, or left
  20.       speed: 300,                //speed of animation
  21.       action: 'click',             //options: 'click' or 'hover', action to trigger animation
  22.       topPos: '80px',             //position from the top/ use if tabLocation is left or right
  23.       leftPos: '20px',             //position from left/ use if tabLocation is bottom or top
  24.       fixedPosition: true           //options: true makes it stick(fixed position) on scroll
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 13th, 2011, 6:44 am

  • WritingBadCode
  • Graduate
  • Graduate
  • User avatar
  • Joined: Apr 28, 2011
  • Posts: 214
  • Loc: Sweden
  • Status: Offline

Post October 13th, 2011, 7:14 am

bayliner75 wrote:
Sorry if I have not explained this in a tech way, but I am just trying to find some information to give to the people building the site who are finding it hard to find a solution.


I can tell that you have put in an effort to explain to the best of your abilities but shouldn't the people building the site be out there looking for a solution if they are lacking some knowledge? Oh well that's off topic.

bayliner75 wrote:
Code: [ Select ]
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript" src="js/jquery.selectbox-0.1.3.js"></script>
<script type="text/javascript">
    $(function ()
    {
        $("#country_id, #region_id, #resort_id, #guests_id, #accommodation_id").selectbox();
    });
</script>
<script type="text/javascript">
  $(function()
    {
    $('.slide-out-div').tabSlideOut(
        {
      tabHandle: '.handle',           //class of the element that will become your tab
      pathToTabImage: 'images/assets/feedback-button-pink.png', //path to the image for the tab //Optionally can be set using css
      imageHeight: '120px',           //height of tab image      //Optionally can be set using css
      imageWidth: '31px',            //width of tab image      //Optionally can be set using css
      tabLocation: 'right',           //side of screen where tab lives, top, right, bottom, or left
      speed: 300,                //speed of animation
      action: 'click',             //options: 'click' or 'hover', action to trigger animation
      topPos: '80px',             //position from the top/ use if tabLocation is left or right
      leftPos: '20px',             //position from left/ use if tabLocation is bottom or top
      fixedPosition: true           //options: true makes it stick(fixed position) on scroll
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  2. <script type="text/javascript" src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
  3. <script type="text/javascript" src="js/jquery.selectbox-0.1.3.js"></script>
  4. <script type="text/javascript">
  5.     $(function ()
  6.     {
  7.         $("#country_id, #region_id, #resort_id, #guests_id, #accommodation_id").selectbox();
  8.     });
  9. </script>
  10. <script type="text/javascript">
  11.   $(function()
  12.     {
  13.     $('.slide-out-div').tabSlideOut(
  14.         {
  15.       tabHandle: '.handle',           //class of the element that will become your tab
  16.       pathToTabImage: 'images/assets/feedback-button-pink.png', //path to the image for the tab //Optionally can be set using css
  17.       imageHeight: '120px',           //height of tab image      //Optionally can be set using css
  18.       imageWidth: '31px',            //width of tab image      //Optionally can be set using css
  19.       tabLocation: 'right',           //side of screen where tab lives, top, right, bottom, or left
  20.       speed: 300,                //speed of animation
  21.       action: 'click',             //options: 'click' or 'hover', action to trigger animation
  22.       topPos: '80px',             //position from the top/ use if tabLocation is left or right
  23.       leftPos: '20px',             //position from left/ use if tabLocation is bottom or top
  24.       fixedPosition: true           //options: true makes it stick(fixed position) on scroll


The code you have "attached" isn't complete what I can see and leaves too much guess work for my taste. Good luck finding some help tho. :o
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post October 13th, 2011, 9:45 am

Quote:
Now the problem is while it goes away and filters out what information it should be displaying for the next dropdown , the box itself and the page jump and you see the what I think is the code behind the search box for a 1 second sometimes 2.


Could you provide us the link where we might be able to duplicate the behavior. Is it possible that the computer you are loading the website on is a slow computer? Sounds like there could be alot going on in the browser and its possible that you would only notice that on slower computers.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • bayliner75
  • Student
  • Student
  • No Avatar
  • Joined: Jun 08, 2007
  • Posts: 78
  • Status: Offline

Post October 13th, 2011, 12:22 pm

Hi Guys

Thanks you for your help, the link to a page is http://www.thesnowtraveller.com/contact.php

And in the top left is the search box, any help will be appreciated, please bare in mind the site is not finished.

I am keen to get a soulution to this problem as I am very keen to launch as sson as possible.

Kind Regards
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post October 17th, 2011, 6:50 pm

Well I took a look, and changed some of the values in the boxes. I noticed a bit of what feels like a jump, but the way your programmer/designer did the page is that when you change one of the values in the box it actually goes to a completely new page which makes a full request to the server and the entire page refreshes. If you are wanting to avoid any sort of jumping like this you need to have your developer use AJAX instead to make the requests and modify the pulldown values without doing a full page refresh. Right now they actually goto a completely new page each time you change an option so the entire page is re-rendering which is causing what feels like a jump at times depending on how fast your browser renders the page. The times you don't notice a jump is probably because it is loading from your browser cache.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • bayliner75
  • Student
  • Student
  • No Avatar
  • Joined: Jun 08, 2007
  • Posts: 78
  • Status: Offline

Post October 19th, 2011, 11:26 am

Hi

Thanks for the reply, ok that makes sense to me

When you say they need to use Ajax

src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

The above code says Ajax.googleapis, does this mean they are already using it or are you referring to something different.

Thanks again for your help

Paolo
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post October 19th, 2011, 11:49 am

That is just the jQuery library, which does have some AJAX functionality with it. Just because they are loading that script does not meant they are using AJAX. There are plenty of things you can do with that jQuery script and use zero AJAX. In your case you are not using AJAX for your dynamic dropdown form.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • bayliner75
  • Student
  • Student
  • No Avatar
  • Joined: Jun 08, 2007
  • Posts: 78
  • Status: Offline

Post October 19th, 2011, 12:20 pm

Ok thanks again

Do you recommend any websites that can give the code for the AJAX DYNAMIC DROPDOWN, or just doing a google search will give me the info. Just trying to get as much inforamtion that I can to help get my site ready to go live

I appreciate all your help

Thanks

Paolo
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post October 20th, 2011, 12:05 pm

You might be able to find some sort of AJAX based drop down menu. The way AJAX works is that it has to communicate with your backend scripts as well to be able to populate the data on the fly, so there will most likely need to be some sort of customization to get it to all work correctly.
Ozzu Hosting - Want your website on a fast server like Ozzu?
  • bayliner75
  • Student
  • Student
  • No Avatar
  • Joined: Jun 08, 2007
  • Posts: 78
  • Status: Offline

Post November 8th, 2011, 10:48 am

Hi

Thanks for all your help, quick question, the site is now live and the filter works nice and smooth in Mozilla firefox, do you think its bug with IE, do you think its possible to find a fix for this if this is the case?

Thanks again

Paolo
  • Bigwebmaster
  • Site Admin
  • Site Admin
  • User avatar
  • Joined: Dec 20, 2002
  • Posts: 8922
  • Loc: Seattle, WA & Phoenix, AZ
  • Status: Offline

Post November 9th, 2011, 6:32 am

I just think that is how IE renders the pages. I am not sure I would consider any jumping a bug. I just looked at your link again and it is reloading all the elements on each selection, so that would cause a full page reload and re-rendering. If you do not plan to do anything AJAX based to prevent that, another thing you might look into is to make sure all of the images, and layout elements have fixed width's and heights specified so that the browser doesn't have to dynamically figure that out during render time. That in itself could prevent the "jumping" while elements are re-rendered.
Ozzu Hosting - Want your website on a fast server like Ozzu?

Page 1 of 1

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: webspace and 142 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.