Goal
I would like to be able to dynamically create javascript and serve it based on preset configuration from the application. The url of the javascript resource can remain the same. The idea is to make available the option to change javascript parameters depening on backend configuration.
An example of this:
The administrator has a set of classes that when clicked upon open a modal pane for the end user. lets say that those classes follow the format of *_modal where the * portion of the class will indicate a portion of the url where the content of the modal pane will be pulled from via ajax.
For example:
click me
would then trigger an ajax event on click where the contents from #contents would be pulled from http://www.myurl.com/modal/orange and displayed in the div #modal_output at the client side.
lets say for some odd reason the administrator for the site decided that he wanted to change the id of the display modal pane for some reason to #modal_output_view . Normally this would require some modification of the javascript and possibly the static output of the page.
I would like to forgo that and offer a configuration option whereas the administrator can choose what the div id would be for the modal output.
At run-time the resource would be requested, php would grab the configuration value for that div's id and return a string in the form of a javascript resource.
Secondly I will be using magento, is there a good way to improve the performance via cache?
Is there any way to use a cdn?
Questions
1) I know how to do the configurational portion, asside from doing this within an appended block or inside of a template file:
<script type="text/javascript">
(function(){
configuration_value = <?= Mage::getStoreConfig('my/config/value');?>;
})();
</script>
is there another easier way to interface between magento's configuration values and client side javascript?
2) Will this work correctly? are there any issues I might face? The key being the .php extension
3) Are there existing core javascript classes/methods that may be useful? Any documentation?
Related
I have a website that loads its content by the user clicking a button, then the clicks calls a javascript function that updates just the content of a central <div> element by changing its inner html with AJAX and jQuery.
So for example, when the visitor wants to go to my contact page, they click the contact button, and the div's content is updated to the contact form by pulling that content from an external file and using it to replace the div's innerHTML. The actual address of the entire page doesnt change, as the entire page isnt being reloaded, just the innerHTML of the div.
Further to this, my site uses PHP, and I've coded it such that various content can be populated in the div on page load by passing variables in the url. For example, index.php?page=home will tell the PHP script to load the home page content from an external file, while index.php?page=contact will load the contact form. This way search engines can find each page and their content by following these links in my sitemap.
My problem is that if a visitor clicks a button and loads different content into the div, then clicks the reload button of their browser or presses CTRL+R, the entire page reloads and the div of course reverts to its original content.
My question is, is there a way to load a particular page when the browser refreshes? For example, if the visitor has loaded the page index.php?page=home then clicked on the contact button and updated the div content, then pressed the refresh button of their browser, can i somehow write a script that will load index.php?page=contact instead, preserving the look of the page and the content?
Option 1: location.hash
Easier, but not as robust. Worth taking a look at, but if you want to store the states of multiple elements, you probably want option 2.
Here's a demonstration of the code below.
Example:
function onHashChange() {
var hash = window.location.hash;
// Load the appropriate content based on the hash.
}
$(window).on('hashchange', onHashChange);
$(document).on('load', onHashChange);
$('#button').click(function(){
window.location.hash = "home";
});
This way, all you need to do is change the hash on button change and handle the page load using the hashchange event.
Option 2: History API using History.js
A little harder to implement (but not much!), but infinitely more robust. Relies on a widely used framework.
Another, and perhaps a cleaner way of doing this would be to use the History API. It allows you to change window.location without refreshing the page, allowing you to handle those changes using JavaScript.
Not all browsers support the API yet though, but you could use History.js, which provides location.hash fallbacks if needed. Here's a demo.
From History.js's github page:
History.js gracefully supports the HTML5 History/State APIs
(pushState, replaceState, onPopState) in all browsers. Including
continued support for data, titles, replaceState. Supports jQuery,
MooTools and Prototype. For HTML5 browsers this means that you can
modify the URL directly, without needing to use hashes anymore. For
HTML4 browsers it will revert back to using the old onhashchange
functionality.
Example of History.js:
function onStateChange() {
var state = window.History.getState();
// Handle state accordingly.
// Fetch the data passed with pushState.
var data = state.data;
var title = state.title;
var url = state.url;
}
// Check the initial state.
$('document').on('load', onStateChange);
// Listen for state changes.
window.History.Adapter.bind(window, 'statechange', onStateChange);
// Any data you want to be passed with the state change.
var stateObj = { variable : 'value' }
// Change state using pushState()
window.History.pushState(stateObj, "State name", "/page.html");
The state name is ignored by most browsers. The third parameter is the bit that gets added to the URL.
Weeks ago I've released a jQuery plugin for this situations, when the developer wants to add ajax content to a page, and dynamically change the URL.
The plugin is jQuery Dynamic URL https://github.com/promatik/jQuery-Dynamic-URL
There is a demo here: http://promatik.pt/github/dynamic-url/
When you load ajax content, you can push a path to the URL, ex:
$.pushPath( 0 /*level*/, "contact" )
Your site instantly turns to: example.com/contact
Or in your case, you can use:
$.pushVar( "page", "contact" )
Your site instantly turns to: example.com/?page=contact
This plugin also allows you to do this:
Imagine that you give me a link for: example.com/?page=contact
In the index page, $.getVars( ) will return: {"page" : "contact"}
So with this info you can build your page based on the this queries.
There's more thigs you can do with the plugin, like listening to event onPopState (that means user went back or forward in browser, so you can rebuild your pages based on that) just try out the demo...
Important information: This plugin works in all modern browsers except IE9, witch works partially, you still can access url data like example.com/?page=contact (and build your page based on this queries) but not modify dynamically the URL during the user experience.
Hello guys I newbie question :) - I am currently using PHP/Zend and now I need to display a form and other content in one of my pages. I do not want the page to reload and I cant use a pop-up window so the best option is to sort of dynamic display a "square" in the middle of the current page with this form being load on the go... this way i could have my pages (forms, text, whatever) being pulled in this square.
In order to keep compatibility with older/new and different browsers, what would be the best choice? DOJO - that is already in Zend, JQuery, or just HTML5/CSS3? Besides, if anyone could point me to some references of where can I find this info it would be great!
AJAX is the most common means (Asynchronous Javascript And Xml) to do this- which uses Javascript to poll other scripts (can be .php pages) which then return predefined output based on the request- this output can be content to inject into a page, or data which can then be interpreted by your page for another action (i.e. the output from another page etc..).
In this instance, your .php page could include JS (javascript) in the head, whether linked or inline, which would contain details for launching an AJAX request- namely, how often or on what trigger (button press etc), by what means (POST or GET), what is sent (any other variables you wish), what the target script is (the script which will handle the request and output your required content/data), and what to do when the response is recieved (i.e. which element on the page should be updated with the response).
A little about AJAX:
http://webdesign.about.com/od/ajax/a/aa101705.htm
http://webtrends.about.com/od/web20/a/what-is-ajax.htm
Likely the simplest way to begin is to use a pre-existing Javascript library like the ubiquitous jQuery (jquery.com), there are thousands of tutorials out there for it, and though you will need to do some Javascript programming, the library has meant that you can rely on fairly simple syntax to do so (as simple as $('#myelement').load('mypage.php')):
http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
http://www.devirtuoso.com/2009/07/beginners-guide-to-using-ajax-with-jquery/
http://www.sitepoint.com/ajax-jquery/
http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/
In simple terms:
You have your php page with the element (area) that needs updating (page A)
Build another php script which outputs the content you want 'refreshing', e.g. the latest news stories, each time it is run (page B)
Link to the jQuery library in your header section (page A)
Write a simple jquery function in the header section of page A, which says every X seconds/minutes (or on demand), run an AJAX request to fetch the content of page B and insert into an element (DIV) within page A
---updated---
If you wish to use DOJO as opposed to jQuery, there is also a wealth of resources available:
http://dojotoolkit.org/documentation/tutorials/1.6/ajax/
http://www.infernodevelopment.com/dojo-ajax-tutorial
http://startdojo.com/2010/01/02/simple-ajax-form-tutorial/
http://today.java.net/pub/a/today/2006/04/27/building-ajax-with-dojo-and-json.html
http://www.ibm.com/developerworks/web/tutorials/wa-dojotoolkit/index.html
http://www.roseindia.net/dojo/
I've got a simple website using plain HTML/CSS to display and PHP/MySQL for data storage.
Now I'd like to add a toggle button similar to facebooks "like" button.
How can I act on the user pressing the button (add database record for this item, change button text) without leaving the page?
I thought this question would have been asked and diskussied to no end, but all solutions I found require some other frameworks than plain PHP as background.
You'll need to do it with javascript. Read up on "AJAX form posting".
A high level view:
user clicks on button
you capture the click via an onclick handler in javascript, and use it to call a javascript function
said function does a remote url request via XmlHttpRequest to a target page
that target page takes in the parameters passed via POST or GET and performs actions with them (eg add database record), and prints out any response required
the javascript function reads the response and acts accordingly (eg change button text)
and all this happens without refreshing the page.
You can do all this with pure low level javascript code, but plenty of libraries already abstract it while solving various issues with browser compatibilities. I'd suggest the jQuery javascript library. It provides an easy way to do exactly what you require, and good documentation.
So I am trying to have a dynamic tabs kind of thing using both php and javascript. To make it much easier to understand, remember the two choices on facebook (Recent news and most recent) or something like that, when you click on one of them it just changes the content that you see in the middle without updating the page. i know how to delete the content in a div for example, but after deleting the content in the div (innerHTML = "") I want to populate it with the option chosen from the database.
So let's say I have an option (all) and an option (only this)
The default is all so when I run the page, I will just get all. However, if I click on only this, it will clear the div "my header" and will replace the content with the latest content from the database (database) and display it.
For that I need both php and javascript, is there a sample or an easy way to do this before i start digging around.
((Sorry if is not clear but the facebook example should be clear enough))
Whatyou are looking for a is AJAX/PHP approach.
Clicking on the tab
The current content gets removed. This is possible because it has a unique "id" attribute in the HTML code
The server is asked for the new content. This is the AJAX request that will be triggered after/while/... the content is removed.
The server sends back the code. This can be HTML, JSON, XML or similar.
You script recieves the answer, may "do" something with it (like some parsing or similar)
The content will be placed on the page (again, this is possible due to an unique "id"
This is basically the way it is done.
Check out the different JavaScript frameworks. They all come with nice AJAX support:
jQuery
MooTools
dojo
Prototype
And of course, SO is also a nice place to look at: https://stackoverflow.com/questions/tagged/ajax+php
What you're talking about is ajax.
I would suggest a javascript library to help leverage this, like jquery.
It can be as cool as
$.post('serverScript.php',
function(data) {
$('#idOfDivToUpdate').html(data); //shove script data into div
},'html' );
tutorial.
I'm working on a web UI control called Folder - it basically mimics Windows Explorer folder - you see a grid of items inside a rectangle and can drag an item around, drop an item inside a different instance of the control, add new items and so on. each item is made of an item template - basically some php code that dictates the look of the item, for example an item template might look like this:
my_item_template.php:
<h3>my item</h3>
<p>i'm an item</p>
when dragging the item i want to replace it with a different template, for example:
my_item_drag_template.php:
<h3>my item</h3>
<p>i'm being dragged</p>
one page may host many different kinds of items, each with its template, its load template, its drop template and so on. my problem is moving all these templates from the server side to the client side.
what i'm doing now - in the server side stage i figure out all the templates that i'll need and include them on the page, hidden (display:none). whenever i need a template (for example when the user starts dragging an item and i need its drag template) i locate it, clone it and use. i'd like to avoid having all this code hidden in my page, maybe store it in a jquery's $(folder).data or something. however, i still need to move it from the php. one option would be to insert the templates to $(folder).data and remove them from the page on page load, but i'd rather avoid it (it adds unnecessary dom manipulation). are there any better ways?
It's certainly an interesting problem, but I don't think you are too far off from a good solution by storing the templates in the dom in a hidden div. Unless you have alot of templates, that generally is a great way to have easy access.
Another option is to ajax request a template when you need it. You can use jQuery's $.load function to get a chunk of html and inject it into an element.
$('<div class="newItem" />')
.load('getTemplate.php?template_id=newItem')
.appendTo('body');
You would obviously have to fill the new element with real data, but you can still do it in a single call.
There is obviously a performance hit by doing this, but the structural gain is pretty significant if you don't mind making the requests. It allows you to define your templates in your backend just like you would a normal page, instead of mucking them all together in a hidden div at the bottom.