Click here to Skip to main content
15,886,519 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello guys i need some help here :(

i have this drag and drop datalist and two textbox.
first i will fill in the two textbox, then drag a item into my
, when i click a button, it should be able to call my rest service via jquery.ajax. to post the data into my database.
okay my question is
1.how can i pass in multiple value when i dropped? (eg. when i dropped, i should be able to retrieve the id , name and category of the item)

2. i'm not sure if my webInvoke POST is working, cos when i test it out, it states that the method is not working / endpoint not found. However i am able to create/post through my wcf test cient.

Pls help me up, Thanks alot!!

my jquery

$("#Button1").click(function () {
var data1 = new Array();

});

$.ajax({
type: 'POST',
url: 'http://localhost:1990/Service1.svc/InsertPlan?PlanDate={0}&Category={0}&FoodName={0}&TCalories={0}&FoodFk={0}&EmailFK={0}',
contentType: "application/json; charset=utf-8",
data: '{ food:[' + 'calories:[' + 'name:[' +
data.join() + ']]]}',
dataType: 'json',
success: function (results) { alert(results.d); },
error: function () { alert('error'); }
});
});

$("div .block").each(function () {
this.addEventListener('dragstart', OnDragStart, false);
});

$("div .drop").each(function () {
this.addEventListener('dragenter', OnDragEnter, false);
this.addEventListener('dragleave', OnDragLeave, false);
this.addEventListener('dragover', OnDragOver, false);
this.addEventListener('drop', OnDrop, false);
this.addEventListener('dragend', OnDragEnd, false);
});

});

//on drop
C#
function OnDrop(e) {
           if (e.preventDefault) {
               e.preventDefault();
           }
           srcElement.style.opacity = '1';
           $(this).removeClass('highlight');
           var count = $(this).find("div[data-food-name='" + e.dataTransfer.getData('text/html') + "']").length;

           $(this).append("<div class='selectedfood' data-food-name='" + e.dataTransfer.getData('text/html') + "'>" + e.dataTransfer.getData('text/html') + "</div>");
           alert(data)
       }

       function OnDragEnd(e) {
           $("div .drop").removeClass('highlight');
           this.style.opacity = '1';
       }




my service.svc

public bool InsertPlan(string Date, string Category, string food, string calories, string foodfk , string email)
{

string connstring = ConfigurationManager.ConnectionStrings["DBConnectionString"].ToString();

string queryStr = "INSERT INTO [Plans] (PlanDate, Category, FoodName,TCalories, FoodFk, EmailFK)"
+ "values (@date, @cat, @food, @cal , @foodfk, @email)";

SqlConnection conn = new SqlConnection(connstring);
SqlCommand cmd = new SqlCommand(queryStr, conn);

cmd.Parameters.AddWithValue("@date", Date);
cmd.Parameters.AddWithValue("@cat", Category);
cmd.Parameters.AddWithValue("@food", food);
cmd.Parameters.AddWithValue("@cal", calories);
cmd.Parameters.AddWithValue("@foodfk", foodfk);
cmd.Parameters.AddWithValue("@email", email);
conn.Open();
int result = cmd.ExecuteNonQuery();
if (result > 0){

return true;


}
else{

}

return false;
}

//my iservice.cs



C#
[WebInvoke(Method="POST",
       RequestFormat = WebMessageFormat.Json,
       ResponseFormat = WebMessageFormat.Json,
       UriTemplate = "InsertPlan?PlanDate={Date}&Category={Category}&FoodName={food}&TCalories={calories}&FoodFk={foodfk}&EmailFK={email}")]
Posted

If you look at your ajax POST code, the url parameter is a HTML tag?

I would also like to suggest you consider using $.post()[^], as it leads to more concise, readable code.

Hope above helps out!

Cheers
 
Share this answer
 
Comments
mikasa1111 7-Aug-15 14:03pm    
i changed my url already, but it couldn't call the method still. Sorry can you give me an example how could i use the $.post in my case? thanks!!
Hmm, I can't solve this one for you per se, but I can provide some insights.

The 'UriTemplate' enables the WCF service to identify what server-side method to invoke, based on incoming HTTP request details.

So if the web server is saying that the 'endpoint' cannot be found, it strongly indicates the URL you are constructing on the client-side is incorrect.

Since you said your WCF Test client works okay, I would suggest the fastest way to figure out problem is to install a program like Telerik Fiddler, and

- record traffic when running WCF Test Client
- record traffic when calling from web page
- compare and contrast the raw HTTP request data
- compare and contrast the raw HTTP response codes (200, 301, 500?)

You can then refine your javascript code, so it posts the same data back to the same url/endpoint.

It's not productive to be concerned about using $.post or $.ajax at this point - that is a non-functional issue.

Just getting the web page working using $.ajax, with correct URL and form data, is the first step!
 
Share this answer
 
v2

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900