Chit-Chat

Loading jquery-ui all the time

Permalink 1 user found helpful April 26, 2010 at 3:07 PM

I noticed this loads if you are logged in but NOT if you are just visiting. I need it to load all the time (I think). Anyone know how?

Thanks,

..
Steve

________________________
Steven Braun
Rollermonkey Design Group
1190 Tapadero Trail
Reno, NV 89521

775.772.5642

http://rollermonkey.com

adamjohnson replied on Apr 28, 2010 at 1:20 am Permalink Reply

On Andrew's site, he shows how to not load jquery when not logged in. That might give you a good place to start looking.

http://andrewembler.com/concrete5/5-easy-ways-to-speed-up-a-concret...

Mnkras replied on Apr 28, 2010 at 8:21 am Permalink Reply

Lets try this, copy
concrete/elements/page_controls_header.php
to elements/page_controls_header.php

and copy concrete/elements/header_required.php to the same place, open them both,

in the page_controls put // before $this->addHeaderItem($html->javascript('jquery.ui.js'));

in header_required paste ^ that under
$this->addHeaderItem($html->javascript('ccm.base.js'), 'CORE');

Try that

Mike

eOne replied on Jun 27, 2012 at 4:29 am Permalink Reply

hi Mike,

I've tried that, and it seems it is loading (in source ) but I still cannot get modal window to pop-up.
In similar manner I've added ui.css.

Do you maybe know should I be loading something else aswell ?

mnakalay replied on Jun 27, 2012 at 5:07 am Permalink Reply

Hi,
this thread was started a long time ago (2010) but since it has been reactivated, check this free add-on by JohntheFish, it does just that
http://www.concrete5.org/marketplace/addons/load-jquery-ui/...

Good luck all

eOne replied on Jun 27, 2012 at 5:31 am Permalink Reply

tnx mnakalay,

that was the first thing I've tried but no luck. After that I've done some search and got here...

maybe there is something wrong with the rest of my code ( modal dialog )

tnx

mnakalay replied on Jun 27, 2012 at 9:48 am Permalink Reply

well would you like to show your code so we can have a look?

eOne replied on Jun 27, 2012 at 12:12 pm Permalink Reply

here:http://bit.ly/MUv7qp
when you choose "send e-card" you don't get modal pop-up but opens new page and get some errors. Same code, while in edit mode works just fine, even use ajax to send e-mail without problem.

my guess I need to "attach" more jquery stuff... ?

in case you don't see code used to call modal is:

<div class="sendNaslov"><div class="sadrzaj"><div class="naslov"><h1>Pošalji e-card</h1></div>
<a
dialog-title="Send your e-card"
dialog-modal="false"
dialog-width="650"
dialog-height="400"
id="ecardDialog"
href="http://solin-info.hr/ecard_form"><div class="botun"></div></a>

</div></div>
<script type="text/javascript">$(function() { $("#ecardDialog").dialog(); });</script>

ecard_form.php is single page, visible to guests. But as I say, it works when I am logged in, doesn't when not.

mnakalay replied on Jun 27, 2012 at 6:02 pm Permalink Reply

Something I don't really understand is that your script tries to use some content inside some tag with the id #ecardDialog
However that id doesn't exist. On the page in which you have your form to send the cards, you have divided your cod in 2 div, one has an id of #galerija and the other one #formular.
So I don't understand how it even works in edit mode.

What you could try is surround everything in your ecard page with a div with an id of #ecardDialog and see if it works.

eOne replied on Jun 28, 2012 at 4:11 am Permalink Reply

a has id=ecardDialog.

This is built following some examplese here on forums. I might did something wrong though but I don't think so.
As in that case, even logged in user would get error.

This button (a) is opening modal dialog and loads static page ecard_form into it. So I cannot put "everything" inside of it.

thanks mnakalay, I hope we can find what went wrong here.

mnakalay replied on Jun 28, 2012 at 11:02 am Permalink Reply

Edit: Ignore this, it worked.

Hi, I don't know why, every time I try to post it just refuses to publish so I'm sending you the solution by pm

mnakalay replied on Jun 28, 2012 at 7:54 pm Permalink Reply

Try this, it works on my computer.

1- replace your link

<a 
   dialog-title="Send your e-card" 
   dialog-modal="false"
   dialog-width="650" 
   dialog-height="400" 
   id="ecardDialog" 
   href="http://solin-info.com/ecard_form"><div class="botun"></div></a>

with

<a id="goToMyPage" href="javascript:void(0)"><div class="botun"></div></a>

2- under the link add an empty div

<div id="ecardDialog"></div>

3- delete your javascript

<script type="text/javascript">$(function() { $("#ecardDialog").dialog(); });</script>

4- put this javascript in the head of your document, just before the closing </head>

<script type="text/javascript">
 $(document).ready(function() {
$('#goToMyPage').click(function() {
   var Url = "http://solin-info.com/ecard_form";
   $( "#ecardDialog" ).dialog({ 
         modal: true,
           autoOpen: false,
            height: '450',
            width: '700',
            draggable: true,
            resizeable: true,   
             title: 'Send your e-card' });
   $( "#ecardDialog" ).load(Url, function() {
      $( "#ecardDialog" ).dialog('open');
      return false;

Viewing 15 lines of 19 lines. View entire code block.

<script type="text/javascript">
 
 $(document).ready(function() {
$('#goToMyPage').click(function() {
   var Url = "http://solin-info.com/ecard_form";
   $( "#ecardDialog" ).dialog({ 
         modal: true,
           autoOpen: false,
            height: '450',
            width: '700',
            draggable: true,
            resizeable: true,   
             title: 'Send your e-card' });
   $( "#ecardDialog" ).load(Url, function() {
      $( "#ecardDialog" ).dialog('open');
      return false;
   });
});
   });
    </script>

eOne replied on Jun 29, 2012 at 5:01 am Permalink Reply

hi mnakalay,

thank you for your effort but I really don't know why it isn't working for me. I hope I did exactly as instructed but I get error after click:

Uncaught TypeError: Object [object Object] has no method 'dialog'

Edit:
now it misbehave even in edit mode aswell ... it shows page but in very weird way ( not form at all )

mnakalay replied on Jun 29, 2012 at 5:53 am Permalink Reply

ok,
I checked, you are using an older version of concrete5 so it has an older version of jquery UI. I'm using C5 5.5.x.

What you should do is download the new version of Concrete5 and then you have 2 choices:

1- install it and use it but it might be time consuming.
2- in the new C5 go to the folder concrete/js and copy the files jquery.js and jquery.ui.js then paste them in the folder js (not concrete/js) of your older Concrete5.
Then try again.
Make sure you don't delete or replace any file.

eOne replied on Jun 29, 2012 at 7:12 am Permalink Reply

thank you mnakalay, this helped

if you check now you'll see it sort of works. It opened popup, it's dragable only it looks bit weird.
Should I take something more than those two ? maybe css ?

mnakalay replied on Jun 29, 2012 at 7:16 am Permalink Reply

yes definitely try the css as well

eOne replied on Jun 29, 2012 at 7:18 am Permalink Reply

did that too, copied it into css folder but it looked even worst :)

I should upgrade, but I am bit worried about all plugins I am using so I am not sure for that step yet :/

thank you man... if you have any more ideas please let me know

mnakalay replied on Jun 29, 2012 at 8:27 am Permalink Reply

are you sure you copied the file jquery.ui.css into the css folder? Because on your site it's still the one from concrete/css/ that's being loaded

Also I used chrome developper tool to try to replace the css with the good one and it works perfectly so I'm sure that's the solution.

You will need also need to copy the file ui-icons_222222_256x240.png from concrete/css/images in the newer version of Concrete5 to the folder css/images in your website.

eOne replied on Jun 29, 2012 at 9:14 am Permalink Reply

damn, now it worked :)

I did tried but got even worse look first time. Maybe problem with cache or something ...

now is OK, need to adjust sizes, but this is just fine!

tnx man!

mnakalay replied on Jun 29, 2012 at 9:36 am Permalink Reply

you're welcome. Every time I can help, I learn something so it's win-win.

two things though.
1- I made a mistake about the picture you need to use with the css, it should be icon_sprite.png so the little cross in the top right corner appears
2- You noticed that your youtube video is blocking the view by staying on top of the modal? Actually the problem is only in Chrome, not in Firefox or others, the youtube video gets on top of the modal. The solution is to have the url to your youtube video changes from

http://youtube.com/embed/qgP8E8PANTs

http://youtube.com/embed/qgP8E8PANTs?wmode=opaque

Meanwhile, could you mark my answer as best answer please, it might help others and it's good for my Karma :)

eOne replied on Jun 29, 2012 at 10:10 am Permalink Reply

Thanks man, I'll do that too.

Also, I already tried to make answer helpfull but I cannot find where to do it. I made whole thread helpfull.

Maybe I cannot do it as I didn't initiate question? Should we move this to new thread ?

mnakalay replied on Jun 29, 2012 at 10:14 am Permalink Reply

yeah you're right. well that's ok, you're happy, I'm happy, forget the karma :)

rockface replied on Jan 30, 2013 at 2:35 am Permalink Reply

I just fixed a related problem and thought i'd this might help you too...

The issue appears the c5 designers have chosen which script libraries to skip when no one is logged in. If i had to guess why...

1. Complex data entry is reserved for when a user is logged in
2. or maybe its just to reduce on load time.

Either why the solution is pretty simple...

public function on_page_view() {
   $html = Loader::helper('html');
   //Required for DatePicker (when not logged in)
   $this->addHeaderItem($html->css("jquery.ui.css"));
   $this->addHeaderItem($html->javascript("jquery.ui.js"));
   //Required for $('#x').dialog.open() (when not logged in)
   $this->addHeaderItem($html->css("ccm.app.css"));
   $this->addFooterItem($html->javascript("ccm.app.js"));
}

The official C5 documentation is silent on this dependency:
http://www.concrete5.org/documentation/developers/helpers/date-and-...

Hope this helps!

Forums

Chit-Chat

Loading jquery-ui all the time

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?