i have a script if the user select a thumbnail shows
the larger image and the id from my database.
Until this point its works very well
what i try to do now is when the user clicks on the
thumbnail, i want to show the data which are in my table.
how can i do that?
My database relationship:
in my database i have 2 tables which one has the primary key
and the other the foreign key.
when i select the thumbnail which are in the table with the
primary key, i want to show the data from my other table
which contains the foreign key.
My code:
Javascript:
function swap(image) {
document.getElementById("imagem-selec").src = image.href;
$("input[name='Id_Img']").val($(image).data("id"));
}
HTML to show the list of thummbnails:
#foreach (var p in ViewBag.Img)
{
<li>
<a href="~/Files/#p.Name" onclick="swap(this); return false;" data-id="#p.Id">
<img src="~/Files/#p.Name"/>
</a>
</li>
Html which receive the path
<div id="wrap">
<img id="i-selec" src=""/>
</div>
Any sugestions?
Thanks in advance
UDPATE MY CODE:
Script
function swap(image) {
var imageID = $(image).data("id");
$.ajax("/{Admin}/GetImageData",
{
data: JSON.stringify({ ID: imageID }),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data) {
// Add your content to DOM here:
// values in data.data1 etc...
values in data.De, data.Sc
}
error: function () {
alert("error!");
}
});
};
Controller:
public JsonResult GetImageData(int ID)
{
using (SqlConnection cn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["DefaultConnection"].ConnectionString))
{
SqlDataAdapter sqlAdapt = new SqlDataAdapter
(#"SELECT C.* From Content C inner join Image B on C.ID_Img = B.Id WHERE C.Id=" + ID, cn);
SqlCommandBuilder sqlCmdBuilder = new SqlCommandBuilder(sqlAdapt);
DataSet data = new DataSet();
sqlAdapt.Fill(data, "Content ");
cn.Close();
return Json(data);
}
}
It seems like there are two choices:
Load the data in the view and have it hidden, on page load, and have the click event simply show the data.
Have an AJAX call to get the data that you want on the click event, and add the data when the call returns.
I would personally go with the AJAX call, as it uses a little extra network overhead on the requests, but potentially saves a lot of useless data from being downloaded:
// Data model.
class ImageData
{
public int data1 { get; set; }
public string data2 { get; set; }
...
}
// Controller action. Data access abstracted out.
public JsonResult GetImageData(int ID)
{
ImageData data = DataAccess.GetImageData(ID);
return Json(data);
}
Your JavaScript might look something like:
function swap(image) {
var imageID = $(image).data("id");
$.ajax("/{YourControllerHere}/GetImageData",
{
data: JSON.stringify({ ID: imageID }),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data) {
// creating the element to add
var div = document.createElement("div");
div.setAttribute("id", imageID);
$(image).parent().append(div);
//adding the data here. do this for each data item?
$("#"+imageID).append(data.details.YOUR_PROPERTY_HERE);
}
error: function () {
alert("error!");
}
});
}
The success callback has a parameter named "data". This is a JavaScript object representation of the data you returned in the controller action JsonResult.
Related
I have a KendoUI search bar that has a drop down of autocompleted items based on what I type. When I type into I get a drop down menu. When I click on an item in the drop downlist, I want two things to happen. One which works, and that is loading a partial view. But, the other thing deals with updating a div element that is also in that partial view.
The partial view
#{
ViewBag.Title = "Client";
}
<div id="update">#ViewBag.name</div>
<p id="ahhh"></p>
External Javascript function
function onSelect(e) {
$("#navResult").load('/Home/Client');
var value = e.item.text();
alert(value);
$.ajax({
type: "POST",
url: "Home/someStuf",
dataType: "json",
data: {n: value },
success: function (result) {
alert("IT WORKED");
},
error: function (result) {
alert("FAILED");
}
})
}
In the HomeController there is a method called someStuf. I am sending that item that is clicked on the event into the someStuf method.
Now here are the two controller methods that I'm working with.
Secretary s = new Secretary();
public ActionResult Client()
{
ViewBag.name = s.Client;
return PartialView();
}
[HttpPost]
public JsonResult someStuf(String n)
{
s.Client = n;
return Json(n, JsonRequestBehavior.AllowGet);
}
So then I update a class with that value that was passed from javascript. I then add that new value to the viewbag for the partial view Client.
Sorry for the misleading variables. Client is a type of model. Then I always have a partial view that is called client.
When I try this. The ViewBag is not showing the result that I would like. I can get the client side to send to the server. But I can't get the server to send to the client.... I bet it's something simple. But I'm trying to understand this step so I can use the same method to update id and class elements.
<p class="CompanySearchBar">
#(Html.Kendo().AutoComplete()
.Name("companyComplete") //The name of the AutoComplete is mandatory. It specifies the "id" attribute of the widget.
.DataTextField("company") //Specify which property of the Product to be used by the AutoComplete.
.BindTo(Model)
.Filter("contains")
.Placeholder("Company name")
.Events(e => { e.Select("onSelect"); })
)
</p>
The above code allows for a search bar with autocomplete. While typing for an item a drop down list shows up with results having the same substring. When clicking one of the results the onSelect method is activated.
you can give like this and on change event just assign a value using jquery like
function onSelect(e) {
$("#navResult").load('/Home/Client');
var value = e.item.text();
alert(value);
$.ajax({
type: "POST",
url: "Home/someStuf",
dataType: "json",
data: {n: value },
success: function (result) {
$('#ahhh').text(result.NAME); //the object which you returns from the controller
},
error: function (result) {
alert("FAILED");
}
})
}
<label id=ahhh></label>
I'll preface this with I'm still new to JavaScript. So problem is in a larger application, our controller is passing in a list of information to the view where certain JavaScript functions rely on certain ViewModel properties. I've written a simple application to hopefully illustrate what I'm getting at.
Below is a sample controller that's passing in List to the Index page:
public ActionResult Index() {
List<int> activeIds = new List<int>();
SqlConnection sqlConn = new SqlConnection(connection_String);
sqlConn.Open();
string sqlStr = "SELECT * FROM dbo.[JS-Test] WHERE Active = 1";
SqlCommand sqlCmd = new SqlCommand(sqlStr, sqlConn);
SqlDataReader sqlDR = sqlCmd.ExecuteReader();
if(sqlDR.HasRows) {
while (sqlDR.Read()) {
activeIds.Add((int)sqlDR["ID"]);
}
}
sqlDR.Close();
sqlCmd.Dispose();
sqlConn.Close();
return View(activeIds);
}
This returns the current "active" items in the database. The (rough) view is as follows...
#model List<int>
#{
ViewBag.Title = "Index";
}
<p>Current Recognized Count: #Model.Count() </p>
Print
<script>
$(document).ready(function () {
$('#printBtn').click(function () {
var numberOfActiveIds = #Model.Count();
$.ajax({
type: "POST",
url: "/Home/PostResults",
data: { ids: numberOfActiveIds},
success: function (results) {
if(results == "Success") {
window.location.href = '/Home/Results';
}
}
});
});
});
</script>
The issue is getting the current number of active items from the database when the button is clicked. Let's say that the user remains idle on the page after it loads for a few minutes. When their page originally loaded, the model returned 5 items listed as active... but while they've been waiting 3 additional items were switched to active in the database for a total of 8. However, when the user finally clicks the button it'll submit 5 items instead of the current 8.
I'm unable to run the query to get the current number of active items in the "/Home/PostResults" ActionResult due to the nature of how the larger application is set up. Is there a way I could refresh the page (getting the updated model) before the rest of the function carries out using values of the refreshed model?
If you have any additional questions, please let me know and I will gladly comply. I've looked at other questions and answers on SO but I haven't found one that quite works for my situation. Thanks!
Edit #1
So, I've added this function to the Home controller which just returns the list count as Json.
public ActionResult GetIds(){
List<int> activeIds = new List<int>();
SqlConnection sqlConn = new SqlConnection(connection_String);
sqlConn.Open();
string sqlStr = "SELECT * FROM dbo.[JS-Test] WHERE Active = 1";
SqlCommand sqlCmd = new SqlCommand(sqlStr, sqlConn);
SqlDataReader sqlDR = sqlCmd.ExecuteReader();
if (sqlDR.HasRows) {
while (sqlDR.Read()) {
activeIds.Add((int)sqlDR["ID"]);
}
}
sqlDR.Close();
sqlCmd.Dispose();
sqlConn.Close();
return Json(activeIds.Count());
}
The view script now looks like this...
<script>
$(document).ready(function () {
$('#printBtn').click(function () {
var numberOfActiveIds = #Model.Count();
$.ajax({
type: "GET",
url: "/Home/GetIds",
success: function(response) {
numberOfActiveIds = response;
$.ajax({
type: "POST",
url: "/Home/PostResults",
data: { ids: numberOfActiveIds},
success: function (results) {
if(results == "Success") {
window.location.href = '/Home/Results';
}
}
});
}
});
});
});
</script>
I'm currently getting the following error...
Failed to load resource: the server responded with a status of 500 (Internal Server Error)
Edit #2
I had to set the JsonRequestBehavior to AllowGet for it to work properly. Thanks again, everyone!
gforce301 mentioned to GET the current actives via an ajax call to an additional, separate method making the query to the database and THEN ajax post the returned "actives". Is that possible?
Yes this is possible. That's why I mentioned it. Irregardless of other peoples opinions on how they think you should do this, I understand that you may be limited on why you can't do it their way even if they don't.
The code below is a restructuring of your code. It chains 2 ajax calls together, with the second one depending on the success of the first. Notice the comment block in the success handler of the first ajax call. Since I don't know what the response will be, I can't fill in the part on how to use it. This accomplishes your goal of having the user only make a single button click.
<script>
$(document).ready(function () {
$('#printBtn').click(function () {
var numberOfActiveIds = #Model.Count();
$.ajax({
type: 'GET',
url: '/path/to/get/activeIds',
success: function(response) {
/*
Since I don't know the structure of response
I have to just explain.
use response to populate numberOfActiveIds
now we just make our post ajax request.
*/
$.ajax({
type: "POST",
url: "/Home/PostResults",
data: { ids: numberOfActiveIds},
success: function (results) {
if(results == "Success") {
window.location.href = '/Home/Results';
}
}
});
}
});
});
});
</script>
I can give you an idea, i hope it can help,
run another ajax 1st on btnclick to get the data(or datat count) again, if the record count is greater then current then update the view and don't PostResults and if its same then just PostResults
on ajax success you can reload the data or view
and on failure(when no new record) just do PostResults
I'm working on a small project for controlling libraries and I need fill a select tag with all libraries on the database that I have. For that, I've created a WebService which contains a web method called GetBibliotecas, responsible for returning all the libraries in a JSON format; its code will be shown next:
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class BibUtil : WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string GetBibliotecas()
{
return JsonConvert.SerializeObject(DAOFactory.GetInstance(DAOFactory.DAOType.Biblioteca).Select());
}
}
That's the result returned from the WebMethod:
[{"IdBiblioteca":3,"Nome":"Biblioteca FESO
Campus","Endereco":"Avenida Oliveira
Botelho"},{"IdBiblioteca":5,"Nome":"Biblioteca FESO
Pro-Arte","Endereco":"Rua
Exemplo"},{"IdBiblioteca":11,"Nome":"Biblioteca FESO Quinta do
Paraíso","Endereco":"Avenida da
Prata"},{"IdBiblioteca":12,"Nome":"Exemplo Library","Endereco":"Rua
EX"}]
On my view page, I'm trying to use AJAX in order to consume the WebService method asynchronously, right after the page loads. Below is the snippet I coded:
<script>
$(document).ready(function () {
$.ajax({
type: "POST",
url: "../Services/BibUtil.asmx/GetBibliotecas",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$('#ddlLibraries').get(0).options.length = 0;
$('#ddlLibraries').get(0).options[0] = new Option("Selecione uma biblioteca", "-1");
$.each(data.d, function (index, item) {
$('#ddlLibraries').get(0).options[$("#ddlLibraries").get(0).options.length] = new Option(item.Display, item.Value);
});
}
});
});
But when the page is rendered on the browser, some strange error appears on the Console:
Uncaught TypeError: Cannot use 'in' operator to search for '325' in [{"IdBiblioteca":3,"Nome":"Biblioteca FESO Campus","Endereco":"Avenida Oliveira Botelho"},{"IdBiblioteca":5,"Nome":"Biblioteca FESO Pro-Arte","Endereco":"Rua Exemplo"},{"IdBiblioteca":11,"Nome":"Biblioteca FESO Quinta do Paraíso","Endereco":"Avenida da Prata"},{"IdBiblioteca":12,"Nome":"Exemplo Library","Endereco":"Rua EX"}]
My intention is using the IdBiblioteca like an ID value for the dropdown (select tag) and show the option itself using the library name (Nome). What is wrong with the code?
Thanks.
No need to look for the index and length of options each time. Can create all the options and then use html() or append individually after emptying the container
success: function (data) {
// empty the <select>
var $select = $('#ddlLibraries').empty();
// add default to array
data.d.unshift({
Nome: "Selecione uma biblioteca",
IdBiblioteca: -1
});
// creaate and append options
$.each(data.d, function (index, item) {
var $option = $('<option>').text(item.Nome).val(item.IdBiblioteca);
$select.append($option);
});
}
Was confused by your code using properties to create new Option that didn't exist in data shown
I want to make a Partial view that displays data in a table.
I will have a Select element with the services to choose from.
When the user Selects a Service in the combobox I want to the call a partial view with the service Id number:
How can I do this?
Here is a action method which will render the partialView
//
// GET: /Service/ServiceStatusLogs/1
public ActionResult ServiceStatusLogs(int id)
{
var db = new EFServiceStatusHistoryRepository();
IList<ServiceStatusHistory> logs = db.GetAllStatusLogs(id);
return View("_ServiceStatusLogs", logs);
}
Here is the main action method which returns the page:
//
// GET: /Services/Status
public ActionResult Status()
{
IList<Service> services;
using (var db = new EFServiceRepository())
{
services = db.GetAll();
}
return View(services);
}
You can make use $.ajax functionality to achieve, check this :-
//Combo box change event
$("#comboboxName").change(function () {
//Get service Id
var serviceId = $("#comboboxName").val();
//Do ajax call
$.ajax({
type: 'GET',
url: "#Url.Content("/Service/ServiceStatusLogs/")",
data : {
Id:serviceId //Data need to pass as parameter
},
dataType: 'html', //dataType - html
success:function(result)
{
//Create a Div around the Partial View and fill the result
$('#partialViewContainerDiv').html(result);
}
});
});
Also you should return partial view instead of view
//
// GET: /Service/ServiceStatusLogs/1
public ActionResult ServiceStatusLogs(int id)
{
var db = new EFServiceStatusHistoryRepository();
IList<ServiceStatusHistory> logs = db.GetAllStatusLogs(id);
return PartialView("_ServiceStatusLogs", logs);
}
Try this:
public ActionResult ServiceStatusLogs( int id )
{
//Prepare your model
return PartialView( "UserDetails", model );
}
Any then use javascript(ajax) to load contents for an element of the DOM:
$('#user_content').load('/Service/ServiceStatusLogs');
My Model has fields which are displayed on the screen, as well as a List which is displayed in a grid on the screen. I have an Add button, which shows a modal popup (without a postback), that allows the user to enter a few fields, and then clicks 'Save'. At the moment, I use a JSON call back to my controller to save the data. I then reload the screen, and the new item appears in the grid, as it was saved to the database, and the Model reloaded.
Problem is, if the user has made any changes to the main details in the model, they're lost, because all the JSON call did was save a new item to the database, and redirect to the main screen which reloads.
What I need to rather do is somehow, add the new item from the popup, to the main Model, and then reload the grid, without saving to the database at all, and without a postback.
My javascript for posting the data from the view looks like this:
<script type="text/javascript">
$(document).ready(function () {
$('.btnSubmitNewCard').click(function () {
var data = { cardNumber: $('.txtNewCardNumber').val(), cardHolder: $('.txtNewCardHolder').val(), expiryMonth: $('.txtNewExpiryMonth').val(), expiryYear: $('.txtNewExpiryYear').val(), active: $('.txtNewActive').val(), accountId: $('.Id').val() };
$.ajax({
url: '#Url.Action("SaveBankCard", "BankAccount")',
type: "POST",
contentType: "application/json",
data: JSON.stringify(data),
cache: false,
async: true,
success: function (result) {
if (result.Success == 'true') {
window.location = '#Url.Action("EditBankAccount", "BankAccount", new { bankAccountId = Model.Id })';
} else {
alert(result.Message);
}
},
error: function () {
alert("Oh no");
}
});
});
});
</script>
And then the controller method that handles this, looks like this:
public JsonResult SaveBankCard(string cardNumber, string cardHolder, int expiryMonth, int expiryYear, string active, int accountId)
{
var card = new AccountCardDto
{
Id = 0,
AccountId = accountId,
Active = active == "on",
CardHolderName = cardHolder,
CardNumber = cardNumber,
ExpiryDate = new DateTime(2000 + expiryYear, expiryMonth, 1)
};
var id = new BankAccountService().SaveCard(card);
var result = new { Success = "true", Message = "Saved", NewId = id };
var r = new JsonResult
{
Data = result
};
return r;
}
So, the data is saved in the controller, and then the Javascript redirects to roload the whole screen. Can this be changed to rather save the data to the models' List client side, and then the whole model with changes and additions get saved via the one Save button on my screen? Is it possible to add to the Model's List client side?
try json script like this
$('#ddlCompany').change(function () {
//var URL = $('#Enrollform').data('fetchproduct');
$.getJSON('/EnrollmentForm/fetchproduct/' + $('#ddlCompany').val(), function (data) {
var items = '<option>Select a Product</option>';
$.each(data, function (i, product) {
items += "<option value='" + product.Value + "'>" + product.Text + "_" + product.Value + "</option>";
});
$('#ddlProduct').html(items);
});
});