Calling AJAX-Enabled WCF Service from jQuery - MVC 2

Question

I've done a ton of reading on accomplishing this and it seems pretty straightforward. I created my service, which is very simple (looks like this

[ServiceBehavior(IncludeExceptionDetailInFaults = true)]
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class WeddingPhotographerService
{    
    // Add more operations here and mark them with [OperationContract]
    [OperationContract]
    public bool AddNewSkill(string name, string description)
    {
        IRepository<Skill> skillRepo = ObjectFactory.GetInstance<IRepository<Skill>>();

        var skill = new Skill { Name = name, Description = description };
        skillRepo.Save(skill);
        return true;
    }
}

Simple enough right, then I write up this jQuery code in my view

$(document).ready(function () {
    $("#AddSkill").click(function () {
        var data = { name: $("#NewSkill").val(), description: "" };
        data = JSON.stringify(data)
        $.ajax({
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: "WeddingPhotographerService.svc/AddNewSkill",
            data: data,
            dataType: "json",
            success: function () {
                $('#SkillListViewContainer').load('../AccountController/GetSkillControl');
            },
            error: function (msg) {
                $("#AddSkillError").text(msg.d);
            }
        });
    });
});

My WeddingPhotographerService.svc is in the root of the project, the web.config added this when I created the service

<system.serviceModel>
  <behaviors>
    <endpointBehaviors>
      <behavior name="WeddingPhotographer.WeddingPhotographerServiceAspNetAjaxBehavior">
        <enableWebScript />
      </behavior>
    </endpointBehaviors>
  </behaviors>
  <services>
    <service name="WeddingPhotographer.WeddingPhotographerService">
      <endpoint address="" behaviorConfiguration="WeddingPhotographer.WeddingPhotographerServiceAspNetAjaxBehavior"
        binding="webHttpBinding" contract="WeddingPhotographer.WeddingPhotographerService" />
    </service>
  </services>
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true"
    multipleSiteBindingsEnabled="true" />
</system.serviceModel>

All seems simple enough and appears it should work but when I click the AddSkill the Chrome JavaScript console a 404 error is returned, so it's not finding the service at all (I opened up the console because nothing at all was happening when I would click the button).

Am I missing something here?

By the way, I also tried this (since that's the name in the web.config file)

url: "WeddingPhotographer.WeddingPhotographerService.svc/AddNewSkill"

And I still get the Resource Not Found (404) error

Answer 1

Solved it, changed the url line in the jQuery AJAX call to

url: "../WeddingPhotographerService.svc/AddNewSkill"

And all is well