Forums (Obsolete)

Member

dbraun-pediatricweb - 10/25/2012 6:12:29 PM

Using jQuery and AJAX

I am following this article:
http://devnet.kentico.com/Special-Pages/Print.aspx?printpath=/Knowledge-Base/Web-parts-Controls/Using-jQuery-and-AJAX-to-create-a-simple-menu-for&classname=cms.kbarticle

to try and create the same effect on this development site:
http://greenwoodpediatrics.pediatricweb.com/Home.aspx

The transformation is not working:

<li><a class="mosaic-backdrop"  OnClick='MyFunction{%DocumentID%}();' alt="{%DocumentName%}">
<%# IfEmpty(Eval("DocumentMenuCaption"), Eval("DocumentName"), Eval("DocumentMenuCaption")) %>
</a></li>

<script>
  function MyFunction{%DocumentID%}(){    
	 $('#ajax').load('{% GetDocumentUrl() + " #content"%}').hide().fadeIn('fast')
	 $('#ajax').load('{% GetDocumentUrl() + " #content"%}').hide().slideDown('fast');
  }
</script>

I am no javascript pro. Can someone tell me what is wrong with this?

Many thanks for your help.


Kentico Customer Success	kentico_martind2 - 10/29/2012 3:38:07 AM RE:Using jQuery and AJAX Hi, sorry but I'm not pretty sure if I understand what you want. I followed your link and as I see the jqery is working correctly your squares in the sidebar are moving... Which part is not working? Best regards, Martin Danko

Member

dbraun-pediatricweb - 10/31/2012 11:24:33 AM

RE:Using jQuery and AJAX

Well, I got it to work (kind of)
Please see this development url: http://greenwoodpediatrics.pediatricweb.com/Home.aspx

As you will see, the green links at left (the image slides up to reveal the menu below), when clicked on, bring the content into the content area with a slide in effect.

Problem 1: the #ajax div shows up even when there is no content in it, which is undesirable
Problem 2: the content refreshes one link behind where it is supposed to... in other words, if you click on Appointments, the ajax div slides into place, then is replaced by the correct content of the page Appointments.

Here is the transformation being used:

<li><a class="mosaic-backdrop"  OnClick='MyFunction{%DocumentID%}();' alt="{%DocumentName%}">
{%DocumentName%}</a></li>

<script>  
    function MyFunction{%DocumentID%}()
    {        						
	$('#ajax').load('{% GetDocumentUrl() + " #thecontent"%}').hide().slideDown('slow');
    }
</script>

Any help would be appreciated.

Kentico Customer Success

kentico_martind2 - 11/8/2012 4:39:50 AM

RE:Using jQuery and AJAX

Hi,

I would recommend you the following:

1. Set the visibility of the DIV element dynamically via ajax e.g. (element).style.display="none" or (element).hide(); before the content is loaded for the first time, and then set it to visible...

2. Try to change the content with a different method... don't chain the methods, call .load() as first and then call .ajaxComplete() method with sliding effect.

I hope this will help you.

Best regards,
Martin Danko

Member

jdsharp - 12/3/2012 6:12:23 PM

RE:Using jQuery and AJAX

Howdy,

I noticed a few things to take a look at.

1) Currently the page is loading 3 versions of jQuery on it, so I'd change that to only include 1 version (It shouldn't cause any functional issues since jQuery prevents itself from conflicting.)

2) When you chain the .load() method with jQuery it's an asynchronous call which means that the additional methods .hide().slideDown('slow') will execute before the content has returned from the ajax request. The effects of this are fully dependent upon the network speed. Like was mentioned before you could try and use the .ajaxComplete() global method or change your code to something similar to:

function MyFunction{%DocumentID%}()
{
  $('#ajax').hide().load('{% GetDocumentUrl() + " #thecontent"%}', function() {
    // This is an anonymous function that will be executed after the content has fully loaded
    // 'this' is the #ajax DOM element that will animate to visible then
    $(this).slideDown('slow');
  });
}

Hope this helps.

Cheers,
- Jonathan


Member	dbraun-pediatricweb - 12/5/2012 10:48:08 AM RE:Using jQuery and AJAX Thank you so much for your assistance. This works perfectly! Cheers!