Link to home
Start Free TrialLog in
Avatar of ROM
ROMFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Joomla remove toolbars AND/OR JQuery refresh but not reload - on custom view

Hi Everyone,

This project has a completely custom component created for Front and Back end access.

All is fine.

However I created a custom admin view to improve the Editors User Exp.

I have some jQuery doing some updates with drag and drop etc..

I want to refresh the data without reloading the page.. This I can achieve all fine.
HOWEVER.

There is a
BODY - admin com_mycomp view-mycustomview layout- task- itemid-0
NAV CLASS - navbar navbar-inverse navbar-fixed-top
DIV CLASS - navbar-inner

etc... being added to the top of my custom view.

Which means when I JQuery refresh MY wrapping div I get a page within a page and 2 occurences of this.

So to solve this I would like to know both please... Please reply even if you only know one.

a) REMOVE THIS header gunf of toolbar and nav bar... Maybe I am tired but I cannot work out where to remove this. I am using correct tmpl laytout with default.php and parent view.html.php file.

b) Advise if there is a better way to refresh the data. I believe this is the tried and test way and all use it. I.e. refresh a div content WITHOUT reloading the page.. That is the aim.

Please advise... Maybe too tired.. been on this new screen all week but my Googling is coming up with nothing solid.

Many thanks in advance.

R
Avatar of David H.H.Lee
David H.H.Lee
Flag of Malaysia image

a) REMOVE THIS header gunf of toolbar and nav bar... Maybe I am tired but I cannot work out where to remove this. I am using correct tmpl laytout with default.php and parent view.html.php file
>> You can check the actual control's rendered client id/class to hide it via jquery- Hide() method in jquery: https://api.jquery.com/hide/
Please share your page URL/related source code if you need any help to find find the toolbard and nav bar in from your rendered html code.

b) Advise if there is a better way to refresh the data. I believe this is the tried and test way and all use it. I.e. refresh a div content WITHOUT reloading the page.. That is the aim.
>> You can use AJAX if you want to refresh the content without reloading the entire page.
Sample:
https://www.studentstutorial.com/ajax/ajax_without_refresh.php

If you just want to remove everything in your JS template's toolbar.index.php and replace with following code:
<?php defined('_JEXEC') or die(); ?>

Open in new window


More information:
https://www.techfry.com/joomla/joomla-defined-jexec-or-die 

It might be easier to figure out if you can create a small HTML mock up to view. to better understand what you are working with.

To answer generally, if you make an ajax call to save data, you can update the contents of or many elements or the entire page.  There are many ways of doing this, one variation could be the example below.

<div id="header">
    Content that will always stay the same and should not refresh.
</div>
<div id="alert" class="alert" role="alert">
 
</div>
<div id="results">
         
</div>


<script>


$(function() {
//HIDE ALERT ON PAGE LOAD
$('alert').hide();


$.ajax({
  method: "POST",
  url: "processing/page",
  data: { clientID: "1233"}
})
  .done(function( data) {
      //PARSE DATA {.....}


      if(data.foo === "1"){
         //SUCCESS


        //UPDATE ALERT
            $('#alert').html('<p>Your data was saved</p>');
            $('#alert').addClass('alert-success');
            $('#alert').show();


          //UPDATE #RESULTS
             $('#results').html(data.bar);


       } else {


        //FAIL


        //UPDATE ALERT
            $('#alert').html('<p>There was an error</p>');
            $('#alert').addClass('alert-danger');
            $('#alert').show();


          //UPDATE #RESULTS
             $('#results').html('<p>There was ann error</p>');


        }
     
  });


  });
</script>

Open in new window

Avatar of ROM

ASKER

Hi thanks both.. Yes I have got this all working.. It is not asking how to use ajax to refresh etc...

It is more a Joomla Experience question.

Where does the toolbars and admin stuff.. get applied to the template and layout?

I want it to STOP applying so I just have my admin view with my code only.

Please advise
Many thanks

R
Avatar of ROM

ASKER

There must be a template menu assignment somewhere and I am just being tired.. something obvious like that..
Avatar of ROM

ASKER

What I currently do now is I make all of my changes etc.. then I have to do an entire page reload.
If I try to reload one of my divs even an entire page wrapper within my /administrator/components/my_comp/views/myview/tmpl/default.php it reloads the entire page.
I thought if I edited the template file
/administrator/components/my_comp/views/myview/view.html.php
I may be able to reduce the bars.. but of course there is next to nothing in there.. so either I need to MAKE statements to hide or find out where these are assigned as they are causing a mirror in a mirror effect where you see two sets of the Joomla Admin Bar (collapsed), navbar (collaped) and toolbox (collapsed).
I do not want any of these to start.
I am used to customising for the end client.. front end.. but this is proving to be trickier for the admin view I have created.
Many thanks

R
Avatar of ROM

ASKER

Thanks for the replies...

What I basically need to do ... is create template overrides and drop the admin menu, toolbar, navigation bar etc... for specific URLs or menu item ids.. I remember doing this in previous Joomla versions.

This project is 3.9

So...

If I can pointed to the best place to do this. I just would have thought by Joomla 3.9 we could do this via the admin interface maybe?


So the goal is: I have a custom Admin View. I would like to strip it off all Joomla Admin bars etc... but retain it still being a Joomla view so I can use Joomla functions etc...

Please advise on this

Many thanks in advance

R
..So the goal is: I have a custom Admin View. I would like to strip it off all Joomla Admin bars etc... but retain it still being a Joomla view so I can use Joomla functions etc...
>> You can try this admin extension to customize your own Joomla admin view https://extensions.joomla.org/extension/administration/admin-navigation/admin-menu-manager/
https://extensions.joomla.org/extension/advanced-admin-menu/
https://extensions.joomla.org/extension/jd-adminbar/
https://extensions.joomla.org/extension/admin-bar-unlocker/

If you still need any further assistance, perhaps you can draw a image what you expected to remove? Then, share some of your related rendered html code ( https://www.ostraining.com/blog/webdesign/chrome-dev-tools/ ) that we can find the way to hide it through jquery/css.  

Avatar of ROM

ASKER

OK.. well I got the reload to work on a single div... but when I do this then by drag and drop stops working once the post is done.

Example I have is that I can update the status of a card. You click the status and it updates from Good to Bad.

When I do this and use the following to refresh a div which encompasses the entire User Interface to be dragged and changed the drag and drop is broken.

Refresh is:
$("#refreshdiv").load(location.href + " #refreshdiv");

This div gets the FLUID part of the page with all the drag and drops and tools etc.. I have seutp.. Also tried includign the script tags incase there was something funky.

Please advise

Thanks

Avatar of ROM

ASKER

I think I need to reinitialise as I have broken the link as these are new DOM objects maybe with the reload.

R
Avatar of ROM

ASKER

I solved the Ajax jquery issue.
I put into separate functions and monitored changes to the DOM and reloaded the functions.

HOWEVER... still need template help please.

I need to remove the top area within the red and the logo.
User generated image
The section that says MY INFORMATION HERE.. is my part.. the rest is automatically generated.

Many thanks in advance

R
..When I do this and use the following to refresh a div which encompasses the entire User Interface to be dragged and changed the drag and drop is broken.
> Can i know what drag and drop feature that you are referring? Are you referring some drag and drop feature using script like jquery? You need to save the current state of dragged/dropped, otherwise reload the page will dispose the drag-n-drop status that you have performed.

So, you able to resolve the admin toolbar as mentioned in this topic? Please share further information if you need any support on this matter.
Can you share the rendered html source code as highlighted below? Otherwise, share the url for us to inspect further and hide the rendered html object via jquery/css

>>
I need to remove the top area within the red and the logo.
User generated image

Avatar of ROM

ASKER

I am ok on the drag and drop... I have solved all of that now with separate functions and monitoring changes in the DOM targeted at a specific DIV.

For the header see this:
User generated image<div id="pagewrapper"> is where my things start.
Everything else is filled my Joomla 3.9

I have looked in the view.html.php and I put virtually nothing in there. So this means maybe I MUST put statements hiding these..

But this should be a straight forward operation for anyone who has customising Joomla for admin views.. I am probably missing a massive trick here.

I want these sections completely gone.

Many thanks in advance

R
can you expand this two highlighted section? which section have include the mentioned top toolbar that you want to hide.

User generated image
Avatar of ROM

ASKER

Well I could and then expand again etc... etc... and you will see the code that is produces.
But.. the question is how in Joomla do I suppress these areas.

So it is a Joomla question. I have done this in previous Joomla versions by modifying the actual template and binding template styles to specific pages... I am very woolly on it now and when I looked I cannot recognise much of what I did in previous versions.

I don't want to hide with JQuery as Joomla will have a mechanism for this. I am looking for the mechanism that does this please?

Many thanks in advance.

R
You can manage Admin Toolbar via the extension module manager:
https://docs.joomla.org/Help39:Extensions_Module_Manager_Admin_Toolbar

The alternative way, hide it via CSS in footer (without JQuery or manage through admin setting)
.navbar navbar-inverse navbar-fixed-top{
   display:none;
}

Open in new window

I used to have a joomla site I worked on but it has been a couple of years. I installed a test site https://joomla.mypadas.com/ to play with.

Where I am confused is if you are trying to override your own admin template or the joomla admin template?

If you can give me some short steps on how to recreate the type of template you are using or attach the template without any private data, just the layout and perhaps some faked data, we can give it a go.
Avatar of ROM

ASKER

Normal Joomla site.. skinned up yes of course.
Custom Component... adhering to Joomla MVC
Then I created an additional new view. This does not follow Joomla MVC and I do not want it to as it is a cockpit for the interface and too much work and effort to make it totally Joomla compliant. More like a traditional PHP page using Joomla bits.. But that bit is not important.

So if you create an additional view and ensure it appears in Joomla correctly with menus etc... all is fine.

But when I view this new ADMIN view.. I get the screenshot stuff above.

My view.html.php is as basic as it gets.
My default.php layout file just starts with my stuff.
So somewhere in Joomla I must be able to either create a custom template for the view. Yes I can do this but cannot see where I would bind this to this specific view. And also within Joomla it is not very fruitful in hiding blocks etc... and module positions for admin menu etc... again I cannot see how to bind or not bind these like in advanced module manager site. For administrator we seem to not have the administrator menu assignments options as the front of site.

There will be a way to do this and I can recall doing it some versions ago... but not had to change admin side like this for a lonnnnnggg time.

Front end .. yes all fine.. but back end.. nope.. I am a little clueless and DO NOT want to do static links to my php file as I rely on elements from the Joomla instance so I want it loaded within Joomla.

Many thanks

R
Avatar of ROM

ASKER

I think I need to close this question off as I sorted the jquery issue myself and I think it is muddying my request for simple clean admin view.

Thanks for your help

R
Avatar of ROM

ASKER

I know I can try to hide with CSS... done this many times.

However Joomla has a weird post processing way of mucking stuff up if you hide a div that is further up the chain even if the body or your div is not part of it.

Also.. it is a workaround.. but I want the real way as I know there are ways.. there have been for years.

Thanks

R
ASKER CERTIFIED SOLUTION
Avatar of ROM
ROM
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
I am still willing to get a good answer for you if it is possible. If you are trying to edit the joomla admin interface, then javascript may be the best option. If it is for manipulating your own admin interface, I can help get a solution you are looking fro.