I am building a webpage that needs to Query the database and display events in your area based on the users GeoLocation. I've seen this done so many times now on a lot of websites. But I have never built this functionality before.
I have the GeoLocation part functioning. When you land on the page it displays your zip code. I'm not sure how to grab that Zipcode from the div and query the database immediatley.? This webpage being is built using Orchard MVC/NHibernate.
Any suggestion would be helpful.
It sounds like you want the entire solution, but I'm not going to go into that kind of detail.
So I'll give you tips:
Use jQuery to grab the zip code from the DOM
Use jQuery to do an AJAX call to a action method in one of your controllers, passing the zip
Have the controller call the DB and hydrate the results into JSON
Have the controller return a JsonResult
Have jQuery handle the response of the AJAX call and do something meaningful
Related
I have a list of custom posts, and I want to have a sidebar, wherein the information associated with a post selected from the list to load.
If you insist on using ajax to do this then you will need an API for your WordPress site to call back into. Take a look at http://wp-api.org/. It won't necessarily be easy, but you should be able to get it setup and running and then put a piece of JavaScript in a widget to make the call and display the data.
Be careful, that plugin is under active development.
IMO, it would be easier to do this without ajax. Off the top of my head I would say that you could define a shorttag in your functions.php file and then put it in your widget. If the widget appears on a page with a post, pick up the post id, fetch the meta data, and display it.
Cheers!
=C=
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 inherited a site that's completely built using Ajax so I'm using this code to detect pageloads:
(the standard GA code)
var _gaq=[["_setAccount","UA-#######-#"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));
and the gaq.push:
_gaq.push(['_trackPageview', '/#pagename']);
except this is a big site with over 30 pages and I dont want to have to write in every one. is there a script that can find the paths/pagenames and put it in there for me?
I don't know Ajax OR Javascript, so apologies if this is not worded correctly.
You can use the _push function however because an AJAX request can mean so many things (sometimes a page load, sometimes a postback of data, and sometimes just a ping to make sure the user is still alive) you wouldn't want to track every XMLHttp request.
Depending on what language your site is written in, I would strongly suggest making use of some form of partial page component (php include, ASP.NET MVC Partial, ServerSide Include) etc which would stop you re-writing the code a million times if you change it.
However you will still need to edit your 30'odd pages if they are hard-coded. Or one master page if its a sensible design.
Check out this link for a sample on how to track ajax requests using the push method.
Greeting to the community. This is my very first question.
I had in mind to add Livezilla live support in my MVC website, but I realised that there are some problems.
First of all, it is written in php and mysql, so is it possible to comply with MVC and sql server?
Does anybody know a similar solution (like livezilla) in my case?
PS. Excuse my poor english...
you could even look into using an iFrame to run livezilla inside of an mvc3 page if you wanted.
or, you could roll your own. if you wanted to try implementing a live response mvc3 page look into jquery and ajax asynchronous calls such as $.post and also look into the extension for controller AsyncController, and [AsyncTimeout(XXX)]. you will also have to read up on sending and receiving json objects in ajax and from a controller to the view.
Simple psuedo:
View:
setTimeOut calls a javascript function every X milliseconds
the javascript function uses json to wrap page data and pass it to the controller inside a $.post() call
Controller:
recieves page data as an model object in a post
determines if page is out of sync or not
returns relevant sync data in a json object back to the view
View:
the same javascript function receives the json object from controller
updates the page based on relevant sync data
Problem solved. I just uploaded the folder given from livezilla in the root folder of my website. Then the only need to met is to have a Mysql server to create the database for livezilla. After that php and mvc runs together with no problem.
I'm trying to make the "Google Instant" like experience (I'm not looking for Auto-complete).
Google instant is the dynamically change the "search result" as you type (not the suggestions, which can be achieved with auto complete).
The page will simply have a text input control, in which as your type, you get result below the text input control.
I know, I must make some async calls on "onKeyPress": So first how can I do that in jquery?
Second, any good tutorials on combining asp.net MVC with Razor and Ajax?
edited: as people were confusing auto-complete with instant result
The term that you should use is 'autocomplete'
Have a look at the link below:
http://docs.jquery.com/Plugins/autocomplete
It's server independant. Basically, on the server side, you must create a service, given a string return the possible values that relate to that string.
Hope this helps.
There is a great article here on how to create an instant search with Jquery, PHP and HTML
http://woorkup.com/2010/09/13/how-to-create-your-own-instant-search/
The one caveat I encountered was that you need to put the Javscript code inside a
$(document).ready(function(){
/*Your JS Instant Search goes here */
});
which wasn't clear from the article.
For ASP.NET MVC 3, create a controller/action that returns a JSON or JSONP object. If you're a beginner, this might trip you up as you will get CrossSiteJson errors. This link will help:
Ajax json post to Controller across domains, "not allowed by" Access-Control-Allow-Headers
From doing these two, I was able to do the instant search in MVC3 and it works really well.
Using Firebug or WebKit Web Inspector and Fiddler really helps.
It is still a variant of autocomplete, if you break it down:
Fire autocomplete on key presses.
Fire Ajax search on autocomplete success/load (whatever the event might be).
Writing number 2 is minimal work for you unless somebody has written a plugin that does both. It's a nice little project - write a plugin that combines a text box and div and does autosearch.