Hi Masters Of Web Development.
I have a not that simple question this time. I have got a simple external HTML page, that I want to include in my site. The HTML page contains a submit form or something like that, and I wish to send this data from the form, without to reload the whole page. So I decided to put HTML page inside iframe. But, some people said that this is older technology, google doesn't like iframes, etc. So I want to use something like AJAX or JQuery to load that external HTML page, and to send submit form without reloading the whole page with it. :)
Any suggestions on how to make this?
Thanks in advance :)
Do you really need Google to index that iframe form? If that's the only iframe you have throughout the site, it aint going to be a problem in terms of google indexing.
About using the Iframe, if you are not comfortable learning and building ajax-type form, you'll still be fine (like what Frankie commented). Just make sure the form works, usable and compatible with popular browsers.
You want to use the jQuery Forms Plugin. Its very straightforward and easy to turn any normal HTML form into an AJAX form.
Related
I have music application in which I have simple player in footer. User can choose songs from main page list and play it in footer. Now requirement is even if user moves fro home page to other pages(profile, bookmarks) in application the footer player should not get reloaded and should keep playing audio selected on home page initially.
How do I do that? DO I need to load pages through ajax?
Edit:
I forgot to mention that development is 80% completed and footer reloads on every page load. How much of rework is needed if I have to use Ajax now?
Use PJAX. Reload just the parts of the page that you want: https://github.com/rails/pjax_rails
It's already integrated with Rails and everything you put outside of this block will not be reloaded:
<div data-pjax-container>
<!-- PJAX updates will go here -->
</div>
Here's another solution similar to PJAX and Turbolinks
https://github.com/igor-alexandrov/wiselinks
Some very good answers already, but i just wanted to explain your problem better.
HTTP requests is "stateless", which means that each request are fully independent and their is no way you can know anything about how the page was before you requested a new page. This makes it impossible not to reload the footer on each request, using only HTTP.
You can use cookies to keep information between request, so you could start the player where it stopped before the request, but it will still reload (and stop for a short duration).
You can also have the rest of the page in a iframe, and only change the content of the iframe.
However these solutions is not very good for various reasons, so i would strongly recommend the last and best solution: ajax.
The simples solution is properly pjax as #aledalgrande suggested (or wiselink as suggested by #adbeel). This will i practice make your site a "one-site-application" where you use ajax to replace specific parts of the page instead of the whole page. It should however be fairly simple to integrate, even in a existing rails application.
Since you put jQuery as a tag I suggest you either look at http://api.jquery.com/load/.
You can using plain old HTML and making it easier & faster to deploy since the app is almost 'done'. Later you should implement a better (ajax) option.
Simplified: index.html
<iframe id="mainframe" src="other.html"></iframe>
<footer>
Don't reload me pls :D
</footer>
on page navigation (links) you act only on the mainframe, leaving the footer not reloaded.
NOTE: This is ugly and may will give you problems but might serve you to do minimal modification and having your site live asap.
Then rewriting the whole thing to using ajax could be 'some work required' to 'heavy work required' depending on how the app is already implemented. note that will never be 'few or no work required'.
I have a requirement of having the same URL throughout the application navigations. Like below
http://www.[Site Name]:com. (Here User should not have the idea of chaning the URL from one page to another page)
I am using ASP.NET MVC3 with latest Razor View Engine,
Can some body give suggestions on this?
Advanced Thanks,
Satish Kotha
This may make it very difficult for users to access your site - they won't be able to bookmark a specific page, for example.
It sounds like you want a single-page-app (e.g. like Google Mail or Reader). In this case, you have one page and make heavy use of AJAX. You can query the server via javascript, and send back Partial Views, or raw data in JSON format which can be rendered on the client, possibly via some kind of templating engine.
As Graham Clark has already mentioned, this functionality will most likely be frustrating for the user; however, achieving it depends on the complexity of your project. You may want to look into using jquery to load partial views into the main content area of your site.
When you click on your navigation you can use jquery's load() to replace the main content on the page. Jquery-load-with-mvc-2-partialviews is an interesting blog post that may give you more insight into what you would want to do. Your code to load content could look something like this:
$("#mainContent").load("/Controller/Action",
{parameter}, function () {
// perform javascript actions on load complete
});
I am using Drupal 7, and I am building a web site, that has a contact form in the footer which should appear in every page. The requirements was to make this form work via Ajax, all examples I found on Internet was form that related to node.
So when I tried to apply the same concept, I faced the problem of rendering the form, so I have passed it to the template as a parameter like this:
$vars['node']->contactForm = drupal_get_form('nilecode_form');
When I render the form by using drupal_render_children($node->contactForm), all the fields were rendered but with no wrapping form tag.
So after frustration, and not very useful IRC chats, I am thinking to do it by using normal Ajax request.
Before doing so is there any solution, before doing it the bad way?
Thanks.
Take a look at my ajax form examples, the best way of achieving this is using a theme function for the form:
http://monchacos.com/monchacos/code/creating-forms-template-file-ajax-included
Theres an attachment in the post, so you can get the full code example.
I would like to include a CodeIgniter comment form in an existing php page. Currently I am including the comment form with
$_SERVER["REQUEST_URI"] = "comment/index2/".$page;
require_once($directoryLevelPrefix . "staff/codeigniter/index.php");
However, when codeigniter loads the view to display the results of the form I lose the content on my original php page which contained the form. I have tried adding a redirect after the form data is added to the database to redirect to my original php page e.g.
redirect($_POST['return'])
But I want to pass some variables, such as 'thank you for your comment', and this causes a headers already sent error.
Alternatives might be to use ajax, but I would like the whole page to refresh when the comment is submitted.
I had a similar need and I just loaded the CodeIgniter form in an iframe. This was to put a contact form on a WordPress page. I went with the iframe because my needs were limited to this one form and I felt it didn't require trying to integrate CodeIgniter and WordPress in any way.
One Pro of this method is that the form can be submitted and load a confirmation page, an error page, or even be a multi-page form and all that navigation takes place inside the iframe so you never leave the page that you are on while using the form. Another Pro is that the form is totally portable.
The Cons of course are anything you might not like about using iframes which could be many things based on your needs and preferences.
That is because CodeIgniter is a framework designed to handle displaying entire web pages. You can't just include it, as it tries to send new headers and everything.
Two solutions:
You may be able to load the codeigniter page as the main page, and just include your original php code like a view file. This depends on how your original php file is set up.
You could possibly use cURL to call the page from your own server, to get the html output as a string, then echo it to your current page. This isn't very efficient though.
As C. Scott Asbach mentioned, you could load the whole page in an iframe. Probably not a good idea though, as far as I'm aware iframes are deprecated and make for messy websites.
Probably best is to just try and avoid using CodeIgniter to display a subform in an existing page :-)
My website uses ajax.
I've got a user list page which list users in an ajax table (with paging and more information stuff...).
The url of this page is :
/user-list
User list is created by ajax. When the user click on one user, he is redirected to a page which url is : /member/memberName
So we can see here that ajax is used to generate content and not to manage navigation (with the # character).
I want to detect bot to index all pages.
So, in ajax I want to display an ajax table with paging and cool ajax effetcs (more info...) and when I detect a bot I want to display all users (without paging) with a link to the member page like this :
JohnBob...
Do you think I can be black listed with this technique ? If you think so, could you please provide an alternative solution by keeping these clean urls and without redeveloping the user-list (without ajax) ?
Google support a specification to make AJAX crawlable:
http://code.google.com/web/ajaxcrawling/docs/specification.html
I did an experiment and it works:
http://seo-website-designer.com/SEO-Ajax-Google-Solution
As this is a Google specification, you won't get penalised (unless you abuse it).
Saying that, only Google support it at the moment (AFAIK).
Also, I believe following the concept of Progressive Enhancement is a better approach. That is, create a working html website then make the JavaScript enhance it
Maybe use the urls with an onclick to trigger your AJAX scripting? Like
Some URL
I don't think Google would punish you for this, you primarily use JScript, but you do provide a fall back for their bot, so your site doesn't get any less accessible.
EDIT
Ok, I misunderstood. Then my guess would be you basically have two options:
1. Write a different part of your site where bots end up, or,
2. Rewrite your current site to for example always give a 'full' page, with an option to only get, say, the content div. Then you can get only the content with JavaScript, but bots will always get a nice page.