I have an extension which should give the users (logged in as an Admin in the magento backend) the ability to change some configs in the frontend area. I want to have a link in the frontend which loads the config area via ajax and gives the user the possibility to edit&save this config in the loaded div. I want to use the magento backend forms for this so i don't have to code the forms myself.
My current approach has the link on the pages and loads via ajax the correct backend page (e.g. System > Configuration > Design). For this approach I created a Controller which extends the Mage_Adminhtml_Controller_Action. This Controller get the params from the ajax request and uses an action (like the editAction of the class Mage_Adminhtml_System_ConfigController) to get the right config page in the backend.
My Problems are:
- showing only the correct Area (I just want the user to edit only the section "themes" under System > Configuration > Design) everything else should be not available... so how to remove all the information around this config section?
The form needs the JS-variable Form_Key. How to get the current Form_Key (in the frontend)?
After the ajax has loaded the content the form doesnt get initialized correctly. So if I'm trying to submit the form my firebug says "JS-Error: configForm is not defined". How to solve this form initialising ? Any ideas?
I really hope anybody here can give me a hint how to solve this problems to get the backend config work in the frontend.
This is untested, but it should be enough to get you on the right track:
Output only a specific block
In the frontend most blocks are instantiated via layout XML. In the adminhtml area this is different, so you need to work with PHP instantiation much more.
In your AJAX action I assume you are currently calling loadLayout() and renderLayout().
To only output a specific section use this instead:
public function yourAjaxAction()
{
// assuming the required config section is set in the AJAX request
$sectionCode = $this->getRequest()->getParam('section');
$sections = Mage::getSingleton('adminhtml/config')->getSections();
$blockName = (string)$sections->frontend_model;
if (empty($blockName)) {
$blockName = Mage_Adminhtml_Block_System_Config_Edit::DEFAULT_SECTION_BLOCK;
}
$block = $this->getLayout()->createBlock($blockName)->initForm();
// Set the AJAX response content
$this->getResponse()->setBody($block->toHtml());
}
The form key
The form key can be fetched via
Mage::getSingleton('core/session')->getFormKey()
It must be present in the form posted back to the server. You can use the following code to create a HTML hidden field with the formkey:
// If loadLayout() was called:
$formkeyHtml = Mage::app()->getLayout()->getBlock('formkey')->toHtml();
// If working without layout XML:
$formkeyHtml = Mage::app()->getLayout()->createBlock('core/template', 'formkey')
->setTemplate('formkey.phtml') // adminhtml theme formkey
//->setTemplate('core/formkey.phtml') // frontend theme formkey
->toHtml();
Add configForm JavaScript
The configForm variable is an JS varienForm object of the DOM element containing the config fields.
It is instantiated using:
// config_edit_form is the CSS id
configForm = new varienForm('config_edit_form');
The varienForm declaration is in the file js/varien/form.js.
There also is some additional javascript used by the system configuration. Magento always adds in these blocks to set up the system config JS environment:
Mage::app()->getLayout()->getBlock('js')->append(
$this->getLayout()->createBlock('adminhtml/template')
->setTemplate('system/shipping/ups.phtml')
);
Mage::app()->getLayout()->getBlock('js')->append(
$this->getLayout()->createBlock('adminhtml/template')
->setTemplate('system/config/js.phtml')
);
Mage::app()->getLayout()->getBlock('js')->append(
$this->getLayout()->createBlock('adminhtml/template')
->setTemplate('system/config/applicable_country.phtml')
);
I hope that gets you started.
Related
I've got an experimental project at work where I have to check whether or not it is practical to use Typo3 in a headless way, with most of the Typo3 stuff still working.
For the Rest Api I'm using tx_rest to expose
my endpoints.
In particular I'm currently trying to get the rendered html of a form, which was created by a backend user, with the Typo3 form framework, via ajax.
Does anyone know of a way to retrieve only the rendered html form from Typo3?
Does anyone know of a way to retrieve only the rendered html form from TYPO3?
Create a new PAGE object with a custom number
formPage = PAGE
formPage.typeNum = 765
and set
formPage.config {
debug = 0
disableAllHeaderCode = 1
disablePrefixComment = 1
xhtml_cleaning = none
admPanel = 0
}
to prevent any other output and finally
formPage.10 < styles.content.get
(or use any other setup to fetch your content, this is just an example, that will output all contents of the current page in colPos 0)
Opening your page with https://myhost.com/my/path/?type=765 will then render anything on the page without any additional markup, just the output of your page content (e.g. the form plugin, etc.).
I am working on testcomplete automation tool. I want to know how can I store current URL in a variable for validation. Example,
I click a link that takes me to a particular page. I want to validate against the URL of that page. how can I do that?
You can use the URL property of the Page object. Information on this property along with a script sample can be found in this document:
URL Property (Page Objects)
If it's not opening in a tab/window then this should work fine:
function PageSample()
{
Browsers.Item(btIExplorer).Run("http://smartbear.com/");
// Obtains the browser process
var browser = Sys.Browser("iexplore");
// Obtains the page currently opened in Internet Explorer
var page = browser.Page("*");
// Use the page object property and add a checkpoint to validate
…
}
HI I have a codeigniter controller called CIcontroller and I have a method say redirectmethod
in the redirectmethod i have some code and then i do this
$data['redirect_page'] = 'page_name';
$this->load->view('template_view',$data);
the template view basically loads header footer and the corresponding view as specified by the data parameter
Now everything works fine but my url has value http:\\blabla\CIcontroller\redirectmethod instead of http:\\blabla\page_name
could anyone help me fix this thing
You need to emit a Location header to tell the browser to load a different page. See redirect in the url helper.
This is probably going to get a resounding no, but I am wondering if it possible to have the URl change dynamically with using hashing, and without invoking a http request from the browser?
My client is keen on using AJAX for main navigation. This is fine, when the end user goes to the front page first, but when they want to use the deep linking, despite it working, it forces an extra load time as the page loads the front page, then invokes the AJAX from the hash.
UPDATE: Could it be possible, given that what I want to avoid is the page reload (the reason is that it looks bad) to stem the reload by catching the hash with PHP before the headers are sent, and redirecting before the page load. This way only one page loads, and the redirect is all but invisible to the user. Not sure how to do this, but seems like it is possible?
Yes, this is possible. I often do this to store state in the hash part of the URL. The result is that the page doesn't reload, but if the user does reload, they're taken to the right page.
Using this method, the URL will look like: "/index#page=home" or "/index#page=about"
You'll need to write a JavaScript function that handles navigation, and you'll need a containing div that gets rewritten with the contents fetched from AJAX.
Home
About
Questions
<div id="content"></div>
<script type="text/javascript">
function link(page) {
location.hash = "page="+page;
loadPage(page);
}
// NOTE: This is using MooTools. Use the AJAX method in whatever
// JavaScript framework you're using.
function loadPage(page) {
new Request.HTML({
url: "/ajax/"+page+".html",
onSuccess: function(tree, elements, html) {
document.id('content').setProperty('html', html);
}
}).get();
}
</script>
Now, you'll also need to have something that checks the hash on page load to load the right content initially. Again, this is using MooTools, but use whatever onLoad method your JavaScript framework provides.
<script type="text/javascript">
document.addEvent('domready', function() {
parts = location.hash.split('=');
loadPage(parts[1]);
}
</script>
Ok, the problem is that opening an AJAX link of the form http://example.com/#xyz results in a full page being downloaded to the browser, and then the AJAX-altered content is changed once the page has loaded and checked the hash part of its URL. The user has a diconcerting experience.
You can hugely improve this by making a page that just contains the static elements - menus, etc. - and a loading GIF in the content area. This page checks its URL upon loading and dynamically fetches the content specified by the hash part. The page can have any URL you want; we'll use http://example.com/a. Links to this page (http://example.com/a#xyz) now provide a good user experience for users with scripting enabled.
However, new users won't come to the site by fetching http://example.com/a; they'll fetch http://example.com. This is fine - serve the full page, including the home page content and links that don't require scripting to work (e.g., http://example.com/xyz). A script run on loading this page should alter the href of AJAXable links to their AJAX form (http://example.com/a#xyz); thus the first link a user clicks on will result in a full page load but subsequent ones won't.
The only remaining problem is is a no-script user gets sent an AJAX link. You can add a noscript block to the AJAX page that contains a message explaining the problem and provides a link back to the homepage; you could include instructions on how to enable scripting or even how to modify the link by removing a# and pressing enter.
It's not a great answer, but you can offer a different link in the page itself; e.g., if the address bar shows /#xyz you include a link to /xyz somewhere in the page. You could also add a link or button that uses script to bookmark the page, which would again use the non-AJAX form of the link.
We have a site that needs to have several sections be secure. We have
our SSL certificate installed, and for the areas that are accessible
via menu item, it's no problem - we just use the SSL Enabled system
parameter in the menu item editor. But we have a few sections (i.e. a
shopping cart checkout screen) that are only accessible via a submit
button (they don't have their own URL, so to speak - they're just
submitted to themselves via the controller and the view changes based
on the form action.) Right now, the form action is set like this:
<form name="instantForm" action="/<?=$this->segment?>/" method="post" onsubmit="updateSubmitValue()">
where segment is passed via the view.html.php. The rendered form tag
looks like this:
<form id = "checkoutForm" name="checkoutForm" action="/checkout/" method="post" onsubmit="updateSubmit()">
When submitted, the controller grabs the value of a few submitted
fields and determines which view to display (logged in with saved
account info or anonymous transaction) and then displays the correct
form.
Here's a stripped-down version of the controller's display method:
if (JRequest::getVar('checkoutCodeSubmitBTN') != ""){
//user has clicked Checkout button; go to billing info page
JRequest::setVar('view','checkoutpay');
// JRequest::setVar('view','checkout_thankyou');
//reference view
$viewCode =& $this->getView('checkoutpay','html');
$viewCode->voucher =& $voucher;
} //close test for step 1 if
How can I make sure that the view that gets displayed gets switched
over to an https URL?
I've already posted this on the google joomla dev discussion group, and got a response telling me to use JRoute to generate a URL and use setRedirect instead of posting to the form, but then someone else responded that using JRoute produces a completely new request, so all your access to JRequest::getVar type stuff is gone. We need to be able to access the variables that are posted through the form, so that solution is out. Does anyone have any other ways of doing this? I'm pretty new to Joomla development and am not familiar with many of the objects and methods available.
I've heard from some people that JRoute would be better for this, but that only works if you know the URL you need; we have to build our URL dynamically based on the current request, so I used JURI.
In my view.html.php, I added this code:
$needSecure = $model->needSecure();
if($needSecure) {
$u =& JURI::getInstance( JURI::base() );
$u->setScheme( 'https' );
$tmpURL = $u->toString()."checkout";
}
else {
$tmpURL = "/checkout";
}
$this->assignRef("tmpURL", $tmpURL);
needSecure() is a function in my model that pulls a value from a database table and returns a boolean. So if needSecure returns true, we get the current request URI, set the first part to https, then append the bit that we're submitting to. If it returns false, we just set the bit to submit to.
In the default.php, we have this:
<form id = "checkoutForm" name="checkoutForm" action="<?=$this->tmpURL?>/" method="post" onsubmit="updateSubmit()">
If needSecure is true, the action renders to
<form id = "checkoutForm" name="checkoutForm" action="https://www.mysite.com/checkout" method="post" onsubmit="updateSubmit()">
otherwise it renders to
<form id = "checkoutForm" name="checkoutForm" action="/checkout" method="post" onsubmit="updateSubmit()">
It works perfectly, and because we're storing the boolean in a database, it means we don't ever have to change the code itself if we want to make a new form submission secure or insecure.