I want to build a site that allows user to get filtered subsets of some information I have stored on a database. The information will change frequently and I will want to create a post every now and again to say when new information or features become available, so the site has CMS aspects and web app aspects.
Coming from a desktop programming environment, I have to admit I'm not entirely certain how far a CMS like Drupal or WordPress can take me. The web app would basically be a form with several interdependent options and a Submit button. When the Submit button is clicked, I would want to call a web service that returns the information in one of a variety of formats.
So will I need to install my CMS and have an iframe or just a link to the web app which is developed completely outside of it, or can I build my web app's front end directly in the CMS (and hopefully achieve a nice, integrated look) and just have it call the service behind a button?
I half-expect that this web app would become a WordPress/Drupal plugin, or am I barking up the wrong tree?
Yes you can do this. Try out jquery, I think is already included (at leas in wordpress). "Break into" the layot part add js file of your own that makes an AJAX call to a url and returns some HTML from there and puts that content into a certain HTML component (a div that you also add there by your self with a certain id).
User clicks a button, triggers the ajax call and voila.
There are also complicated ways like developing your own plugin that makes SOAPCalls and integrated with the wordpress/drupal etc. But as you say that you are a desktop developer this is the closest aproach to you knwoledge and perspective.
AJAX LOAD WITH JQUERY
Related
I have searched about that for very long time. But I havn't known how it works and how to create it. I am so serious to get it. I am a beginner of Ajax and JQuery. I wish to create a fixed mp3 music player in my web. Although I have some code and know how to do mp3 player for html5, but I have not knew how to do fixed mp3 player which won't change playing when another pages load. Could you help me, please. Example: it is like of www.revernation.com and facebook's chat popup box, still active without refreshing another pages.
You can't keep an mp3 player running when the user navigates to a completely different site in the same browser window.
You can however keep the current page open and fake navigation to other subpages of your own site with History API + AJAX and DOM manipulation. The trick is sometimes called pjax.
An example implementation: https://github.com/defunkt/jquery-pjax
Angular.js does what is described in the previous answer.
What you need to do is convert your app into an SPA.
Single-Page Applications (SPAs) are Web apps that load a single HTML
page and dynamically update that page as the user interacts with the
app. SPAs use AJAX and HTML5 to create fluid and responsive Web apps,
without constant page reloads. However, this means much of the work
happens on the client side, in JavaScript.
Best for SPA
i suggest you to go with AngularJS.
You can still do it with JQuery with Ajax calls if you don't want to use other front-end frameworks
I need to develop mobile app with jQuery Mobile which will be packed with PhoneGap Build and distributed on Google Play. I need to have dynamic listviews which depending on which item is clicked will open new dynamically generated page which got information from MySql database.
Current setup is I generate listview with urls with different variables attached (category.html?cat=1, category.html?cat=2, ...) when I click on item the pageinit event is triggered for category.html and I parse (with JS) the url variable (cat=2) and I send query to my PHP page (which in turn query MySql) through $.get method and I insert the returned value (which is listview echoed back by PHP page) with $('div.ui-content').append(data).trigger('create'). This way sometimes works, sometimes doesn't(the page stays blank) or you must refresh the whole page etc. ...
Is it better to generate whole html for page in PHP and dynamically transition to new page with changePage() method? Or is any other method better?
Thanks :)
best way is to use 3 components,
server side framework: Slim is the easiest for this, nice simple routing, easy to implement, you can also do symphony, rails, etc
middleman: handlebars is great for inserting incoming data into html, try it for sure. angular is good as well, more complicated though. also with handlebars, you can have a different template file for every different page, very easy to maintain.
front end: jquery mobile is the most compprehensive i believe, ajax requests are piece of cake, and in the requests you can call your handlebars templates and insert stuff on the fly.
PS: you are still doing all this with "one" html page, but handlebars is helping you insert sub pages on the fly, jquery mobile helps you change the pages
Let me know if this question needs more clarification.
I am a front-end developer, and I usually use Wordpress with lots of custom fields to put together a CMS for clients.
A current client wants a design portfolio site that initially presents a grid of images that link to projects, but instead of loading a new page on click, the new content loads and fades in smoothly.
I figure the simplest way to do this kind of thing is to load everything up front on one page with ajax (a loading screen is OK), and then just show/hide/move content with jQuery.
The request I am having trouble with is being able to have specific URL's for different projects and images. The client wants a URL scheme like here:
http://collins1.com/work/bp-helios-house/3
Where the number at the end causes a specific image to load in the given project. It seems like this would be simple enough using php variables where like:
http://www.whatever.com?project=3&image=2
And using those to manipulate the initial AJAX load.
But how is this accomplished using a more traditional (pretty) URL structure like the example? If I am building the site as one page loading content, won't the browser attempt to load that as a page and just come up with a 404?
Bonus: How do you change the URL in the address bar to create these links as the user navigates the site without reloading the page?
Thanks!
what you see there, is called url routing. Basically, some server rule that rewrites the url in a proper way, depending on server and scripting language used.
for example, the url
http://server.com/foo/bar
MAY be redirected to
http://server.com/index.php?foo=bar
If you need a lightweight framework to handle this, take a look at www.slimframework.com
If you want real pretty urls you are going to need a server-side framework for url routing and will require you to get into php or ruby on rails. If you want a pure front end solution you can fake it in javascript using hash fragments. For how to do this see
http://backbonejs.org/#Router
http://www.asual.com/jquery/address/
http://benalman.com/projects/jquery-hashchange-plugin/
As I come to the end of my project I am starting to wonder if I made it too dynamic. I have designed this social networking site and 90% of it is based on JQuery. It looks nice, it loads fast but I started to wonder if it is too dynamic...
My concern is that basically once you log in, 95% of what you do is JQuery based therefore the user never leaves the same URL. If this is true, how is a search engine like Google supposed to index my website?
Is this the part where I ask myself what parts of the site I want to be indexed and make them static pages instead?
Basically it has occurred to me that if when you browse my site for user profiles, these profiles are displayed to you through JQuery requests, then it is safe to assume that these profiles can never be found in a Google search, because the Google spider would never see it. Is this true?
Thank you for any thoughts on this,
Vini
Make your site work in both "modes". For example, I'm on my dashboard and I want to check out my friend Joe's profile, there should just be an A tag with the href set to something like "/profiles/joe".
Now, onDomReady, when the page loads, run your javascript to go through the links and attach click handers to those links, and load the profile dynamically using your existing jQuery style.
This development style is called "progressive enhancement" and allows both search engines and human accessibility devices to work better with your website. Check it out.
I am trying to develop a web application for which I need to capture a specific user-driven event (such as mouse dblclick) occurring on a different-website page loaded through my website.
What I want to do is :
User visits my website - hosted by me.
There, user types in any website URL (e.g.: http://www.example.com)
That URL page gets loaded as is.
When user double-clicks mouse over any link or image from that page, a popup/side-panel is displayed with content related to that particular image or link.
I can do this with a combination of PHP get_page_contents or include-page, and javascript dblclick.
However, when user clicks on any link or submits a form, the control goes to that other website, where I cannot show the side-panel.
I might be able to handle the links by proxifying them when user clicks on any of them. How do I handle forms submission and other stuff ?
I can use a full-featured proxy, but that will be too heavy just for the purpose of capturing the event.
My question is that is there a way to write some kind of light PHP script that sits on my website - that loads other websites contents as is, but lets me capture the mouse-dblclick event to show related-content in the side panel .
I have already searched the internet, but could not find anything.
Any help is really appreciated. Thanks.
This sounds way too complicated to ever get reliably working IMO. Proxifying complex requests on 3rd-party pages? Maybe even with some additional AJAX that you'd have to proxify too? I may be wrong, but I think you'll go crazy and get swamped with complaints about sites not working.
I don't know what your web application is supposed to do but I would strongly consider building a Firefox extension (that has much more rights to access and do things on 3rd party sites) or similar.