[Solved] Tabs issue with JQuery dialog

[Andy]

I have a page that uses JQuery dialog feature to pop up a form. It works fine usually, but after adding a telerik tab component to my page the dialog box stops working and causes a 'Object doesn't support this property or method' javascript error.

The dialog will work on its own (eg; no telerik tabs component on the page), the tab component works regardless. What I am seeing is that:

alert ( $("#actionDialog").dialog ) // this produces the string 'Object' which makes perfect sense as 'dialog' is the JQuery dialog funtion I have set up.

BUT, if i add the telerik tabs to the page...

alert ( $("#actionDialog").dialog ) // Now produces the string 'Undefined'. And the dialog no longer functions.

Seems somehow there is a conflict of interests or dialog is somehow being dereferenced?? I would greatly appreciate any assisatnce or ideas on this...

Cheers,
Andy

[Andy]

Just to add a few assertions:

• I am definitely loading jquery ui as an alert placed in the jquery ui file works as expected.
• I am trying within a document.ready handler.
• I have tried placing the script above / below (trying both in and outside of a ready handler) to see if placement was the issue.
• Everything is otherwise correct and working if I don't use jquery UI (dialog specifically).

If I place the script after the html (dialogs mark up) it works as expected. It's only when I bind to a click handler it soemhow causes
the error.

The below works as I place the script such that it opens the dialog. But if I wire it all up to a click event in the ready handler it fails to recognise that dialog is even a property of $("myDialog"). Hence the error message...

 

 

<div id='openTest'>Open the Dialog</div>

 

 

 

 <div id=myDialog>hello, I am a dialog box.</div>

 

 

 

 <script>

 

$(

"#myDialog").dialog();

 

 

 

</script>

This approach fails in all cases...

 

$(

"#openTest").click(function() {

 

$(

"testJQUI").dialog();

 

})

 

[Atanas Korchev]

Hi Andy,

Try manually including the jquery JavaScript file after disabling it from the ScriptRegistrar:

<%= Html.Telerik().ScriptRegistrar().jQuery(false) %>

It should be included before the jquery-ui file.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Andy]

This did indeedf fix but caused issues elsewhere.

Why is it reccomended that the ScriptRegistrar is used at the bottom of a page? I note that this causes the JQuery file to be included NOT at the start of a page but at the end. Whcih explains one of the new problems of 'JQuery not defined'.

I see that the component specific files are loaded at this stage, and I see that these need to occur after the component(s) HTML mark-up, but why does it also include JQuery itself? As in, why would I ever want to do that?

I have found resolutions for these other issues I speak of, so just generlly trying to see if I am missing some key concept of telerik component usage??

Thanks for your assistance - very mcuh appreciated.

[Alex Gyoshev]

Hi Andy,

Putting scripts at the bottom of a page usually makes it load faster - for an in-depth explanation see the yahoo performance guidelines. Basically, the only reason why you may want to include a script at a place different than the page end is if it uses document.write. Of course, if you manually specify all the scripts that should be included on the page, you can place them anywhere - yet I wouldn't recommend that.

Best wishes,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.