Display all videos from JSON (ASP.NET MVC) - asp.net

I have code for AJAX to get Links from table
Here is code
<script>
$('#display').click(function() {
var vacancyId = $("#vacancy").val();
var model = {
vacancyId: vacancyId
};
$.ajax({
url: '#Url.Action("Links", "Questions")',
contentType: 'application/json; charset=utf-8',
data: JSON.stringify(model),
type: 'POST',
dataType: 'json',
processData: false,
success: function(data) {
var question2 = data[0];
var videoHTML = '<video width="320" height="240" style="margin-left: 130px;margin-top: 20px;" controls>';
videoHTML += '<source src="' + document.location.origin + "/uploads/" + question2.Linkes + ".webm" + '" type="video/webm">';
videoHTML += '</video>';
$(".videolist").append(videoHTML);
}
});
});
</script>
Now I display only first video in array, but It can be about 10, I need to display all ten videos, how I need to rewrite code?

Your success function should be like this.
Post your Json sample data for accurate solution.
success: function(data) {
var question2 = data;
for (var i = 0; i <= question2.length-1; i++) {
var videoHTML = '<video width="320" height="240" style="margin-left: 130px;margin-top: 20px;" controls>';
videoHTML += '<source src="' + document.location.origin + "/uploads/" + question2[i].Linkes + ".webm" + '" type="video/webm">';
videoHTML += '</video>';
$(".videolist").append(videoHTML);
}
}

Related

How to make texbox to null after I got success in jQuery AJAX method

I am strangling when I added my comments with AJAX method of jQuery, after stressful, I want to make this textbox to null
my Ajax method like this :
function AddComments() {
$(".Comment input[type=text]").keypress(function (e) {
if (e.which == 13) {
var comment = $("#" + this.id).val();
var textId = "#" + this.id.replace("txt", "div");
$(textId).append(comment);
$.ajax({
type: "POST",
url: "Posts.aspx/AddComments",
data: "{'id': '" + this.id.replace("txt", "") + "','comments': '" + comment + "'}",
dataType: "json",
contentType: "application/json",
success: function (response) {
$("#" + this.id).val("");
//alert(response.d);
}
});
}
});
}
what I want is on Success, I want make current textbox to NULL
$("#" + this.id).val("");
This is a scoping issue. this in the success handler holds a reference to the window object, not the input the keypress fired on. You just need to cache the input in a variable you can use in the success handler. Try this:
function AddComments() {
$(".Comment input[type=text]").keypress(function (e) {
if (e.which == 13) {
var $input = $(this);
var comment = $input.val();
var textId = "#" + this.id.replace("txt", "div");
$(textId).append(comment);
$.ajax({
type: "POST",
url: "Posts.aspx/AddComments",
data: "{'id': '" + this.id.replace("txt", "") + "','comments': '" + comment + "'}",
dataType: "json",
contentType: "application/json",
success: function (response) {
$input.val("");
//alert(response.d);
}
});
}
});
}
you can't access this in jquery ajax do it like this save your object in any variable
function AddComments() {
$(".Comment input[type=text]").keypress(function (e) {
if (e.which == 13) {
var Element=this;
var comment = $("#" + this.id).val();
var textId = "#" + this.id.replace("txt", "div");
$(textId).append(comment);
$.ajax({
type: "POST",
url: "Posts.aspx/AddComments",
data: "{'id': '" + this.id.replace("txt", "") + "','comments': '" + comment + "'}",
dataType: "json",
contentType: "application/json",
success: function (response) {
$(Element).val("");
//alert(response.d);
}
});
}
});
}
Your success function is in another context, you can't use this, you have to send the id on the json response and do something like:
success: function (response) {
$('#'+response.div_id).val("");
}
and your json response should include the div_id that's passed on the ajax request

Inserting table into Trirand JQGrid Edit Dialog that was creating with JQuery

I have a JQuery and AJAX function that creates a table with 2 list boxes and buttons to add/remove from one list box to another. I want to insert this table into the Edit Dialog box of the JQGrid. So that when the add or edit button is clicked the table displays and the user can add items and the corresponding cell is edited.
Java script and AJAX:
function create_listbox() {
var html = '<select id="ddlRoles" size="7" multiple></select>';
var selected = '<select id="ddlSelectedRoles" size="7" multiple></select>';
var table = '<table id="table1" border="3"></table>';
var tr = '<tr id="tr1"></tr>';
var td1 = '<td id="td1"></td>';
var td2 = '<td id="td2"></td>';
var td3 = '<td id="td3"></td>';
var addButton = '<button id="add" onclick="addRole()">Add Role</button><br>';
var removeButton = '<button onclick="removeRole()">Remove Role</button><br>';
$('#whatever').append(table);
$('#table1').append(tr);
$('#tr1').append(td1);
$('#tr1').append(td2);
$('#tr1').append(td3);
$('#td1').append(html);
$('#td2').append(addButton);
$('#td2').append(removeButton);
$('#td3').append(selected);
$.ajax({
url: "MyApplication.asmx/GetRoles",
data: "{ }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
// alert(data.d);
for (var i = 0; i < data.d.length; i++) {
$('#ddlRoles').append("<option value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>")
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + ":" + errorThrown);
}
});
}
I know that I need an EditTypeCustomElement and EditTypeGetCustomValue but I am completely stumped as to how to accomplish this.
I've tried returning $table.get(0) with the create_listbox function which adds a table but it doesn't add the child elements. Any help?
You need a EditTypeCustomElement (below) JQuery and Ajax:
function create_listbox(value, options) {
var htmlRolesDdl = '';
var htmlRolesSelectedDdl = '';
$.ajax({
url: "MyApp.asmx/GetRoles",
data: "{ }",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
var roles = new Array();
if (value.toString().match(',') == null) roles.push(value.toString());
else roles = value.toString().split(",")
for (var i = 0; i < data.d.length; i++) {
var isMatch = false;
for (var j = 0; j < roles.length; j++) {
if (data.d[i].RoleName == roles[j].toString()) {
htmlRolesSelectedDdl += "<option id=\"option" + data.d[i].RoleID + "\"" + " value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>";
//$selected.append("<option id=\"option" + data.d[i].RoleID + "\"" + " value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>")
isMatch = true;
}
}
if (!isMatch) {
htmlRolesDdl += "<option id=\"option" + data.d[i].RoleID + "\"" + " value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>"
//$listbox.append("<option id=\"option" + data.d[i].RoleID + "\"" + " value=\"" + data.d[i].RoleID + "\">" + data.d[i].RoleName + "</option>")
}
}
},
async: false,
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus + ":" + errorThrown);
}
});
var html = '<table id="UserRole" border="0">';
html += '<tr>';
html += '<td>';
html += '<select id="ddlRoles" size="7" multiple width="155" style="width:155px;">';
html += htmlRolesDdl;
html += '</select>';
html += '</td>';
html += '<td>';
html += '<button onclick="addRole()" style="width:100px;"> Add >></button><br>';
html += '<button onclick="removeRole()" style="width:100px;"><< Remove</button><br>';
html += '</td>';
html += '<td>';
html += '<select class="ListBoxStyle" id="ddlSelectedRoles" size="7" width="155" multiple style="width:155px;">';
html += htmlRolesSelectedDdl;
html += '</select>';
html += '</td>';
html += '</tr>';
html += '<tr>';
html += '<td colspan="3" align="center" style="padding-top:5px;padding-bottom:10px;">';
html += '(Press and Hold "Ctrl" to select multiple roles)';
html += '</td>';
html += '</tr>';
html += '</table>';
return $(html);
}
and a EditTypeGetCustomValue (below) JQuery and AJAX:
function listbox_value(elem, type, stringvalue) {
if (type == 'get') {
var roles = new Array();
$("#ddlSelectedRoles > option").each(function () {
roles.push($(this).val().toString());
});
return roles.toString();
} else if (type == 'set') {
var roles = new Array();
$("#ddlSelectedRoles > option").each(function () {
roles.push($(this).val().toString());
});
$("#<%= hdnSelectedRoles.ClientID %>").val(roles);
return roles.toString();
}
}

JSON is undefined in IE7

It works fine in chrome, firefox and IE8. But comes up an error on IE7. Here is my jquery onchange event.
$('select#NationId').change(function () {
var nationId = $(this).val();
$.ajax({
url: 'LoadAreas',
type: 'POST',
data: JSON.stringify({ nationId: nationId }),
dataType: 'json',
contentType: 'application/json',
success: function (data) {
$('select#AreaId').get(0).options.length = 0;
$('select#AreaId').append('<option value="0">Select All</option>');
$.each(data, function (val, Areas) {
$('select#AreaId').append('<option value="' + Areas.Id + '">' + Areas.Name + '</option>');
});
}
});
});
controller
[HttpPost]
public ActionResult LoadAreas(int nationId)
{
var _Areas = (from c in SessionHandler.CurrentContext.ChannelGroups
join cgt in SessionHandler.CurrentContext.ChannelGroupTypes on c.ChannelGroupTypeId equals cgt.ChannelGroupTypeId
where cgt.Name == "Area" && c.ParentChannelGroupId == nationId
select new AreaName() { Id = c.ChannelGroupId, Name = c.Name }).OrderBy(m => m.Name);
if (_Areas == null)
return Json(null);
List<AreaName> managers = (List<AreaName>)_Areas.ToList();
return Json(managers);
}
The issue is that the JSON object is not available in IE 7. You'll want to include JSON2.js on your page for IE < 8 users.
If the browser doesn't implement the JSON object, you can always use a third-party library to provide it for you. If I recall correctly, this particular implementation is widely used and defers to the browser, so you just need to drop it in, no tweaking required.
Shouldn't
data: { "nationId": nationId },
just work?
$('select#NationId').change(function () {
var nationId = $(this).val();
var data = '{"nationId": "' + nationId + '"}';
$.ajax({
url: 'LoadAreas',
type: 'POST',
data: data ,
dataType: 'json',
contentType: 'application/json',
success: function (data) {
$('select#AreaId').get(0).options.length = 0;
$('select#AreaId').append('<option value="0">Select All</option>');
$.each(data, function (val, Areas) {
$('select#AreaId').append('<option value="' + Areas.Id + '">' + Areas.Name + '</option>');
});
}
});
});

Jquery Cascading Drop Down how to trigger the change event for all the dropdowns in the chain Sequencially

I have the following jQuery code in my application that drives four cascading dropdowns. I have seen numerous examples online that force the user to select a value by adding a '--Select a Value---' option. However, what I am trying to do is, for the dropdowns, update automatically in the order if one of them changes.
update 2,3,4 if 1 changes and 3,4 if 2 changes, etc.
Dropdown1 Center Dropdown2 Geo Dropdown3 Sup Dropdown4 Emp
This is the jQuery code I have:
$(function() {
$('#divParentaccordion').accordion({ autoHeight: false }).accordion({ collapsible: true });
$('#divGenericaccordion').accordion({ autoHeight: false }).accordion({ collapsible: true });
$('#<% =ddCenter.ClientID %>').change(getGeo());
$('#<% =ddGeo.ClientID %>').change(getSup());
$('#<% =ddSup.ClientID %>').change(getEmp());
// Statements i assume should call the function when the event triggers
})
function getGeo() {
$.ajax({
type: "POST",
url: "./ObservationsReport.aspx/GetGeoList",
data: "{center: '" + $('#<% =ddCenter.ClientID %>').val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var geos = typeof (response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
$('#<% =ddGeo.ClientID %>').removeOption(/./);
for (var i = 0; i < geos.length; i++) {
var val = geos[i].Code;
var text = geos[i].Description;
$('#<% =ddGeo.ClientID %>').addOption(val, text);
}
}
})
}
function getSup() {
var center = $('#<% =ddCenter.ClientID %>').val();
var geo = $('#<% =ddGeo.ClientID %>').val();
$.ajax({
type: "POST",
url: "./ObservationsReport.aspx/GetSupList",
data: "{center:'" + center + "',geo:'" + geo + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var sups = typeof (response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
$('#<% =ddSup.ClientID %>').removeOption(/./);
for (var i = 0; i < sups.length; i++) {
var val = sups[i].SOPId;
var text = sups[i].Name;
$('#<% =ddSup.ClientID %>').addOption(val, text);
}
}
})
}
function getEmp() {
var center = $('#<% =ddCenter.ClientID %>').val();
var geo = $('#<% =ddGeo.ClientID %>').val();
var sup = $('#<% =ddSup.ClientID %>').val();
$.ajax({
type: "POST",
url: "ObservationsReport.aspx/GetEmpList",
data: "{center:'" + center + "',geo:'" + geo + "',sup:'" + sup + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var emps = typeof (response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
$('#<% =ddEmp.ClientID %>').removeOption(/./);
for (var i = 0; i < emps.length; i++) {
var val = emps[i].Sop_Id;
var text = emps[i].Name;
$('#<% =ddEmp.ClientID %>').addOption(val, text);
}
}
})
}
What am I doing wrong? I have recently started programming in jQuery; still not completely familiar with how it handles the events and when. Please, any help will be appreciated.
I think your issue is that you're expecting the population of a box from the ajax call to trigger that select's onchange. This is not the case. Changes through javascript do not fire onchange. You will need to fire the onchange yourself.
For example, try changing getGeo to this:
function getGeo() {
$.ajax({
type: "POST",
url: "./ObservationsReport.aspx/GetGeoList",
data: "{center: '" + $('#<% =ddCenter.ClientID %>').val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var geos = typeof (response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
$('#<% =ddGeo.ClientID %>').removeOption(/./);
for (var i = 0; i < geos.length; i++) {
var val = geos[i].Code;
var text = geos[i].Description;
$('#<% =ddGeo.ClientID %>').addOption(val, text);
}
// *** CALL getSup directly ***
getSup() ;
}
})
}
The key here is the explicit call to getSup as it will not be triggered onchange.

why jquery can't return string/text?

default.aspx
<button id="getGrouper">GetGroupers</button>
<script type="text/javascript">
$(document).ready(function () {
$("#getGrouper").click(function () {
$.ajax({
type: "post",
url: "Groupers.aspx/groupers",
data: "{pid:25}",
dataType: "text",
success: function (data) { alert(data); },
error: function (err) { alert("err:" + err); }
});
return false;
});
});
</script>
groupers.aspx.cs
[WebMethod]
public static string groupers(
int project_id)
{
string employees = "";
foreach (string s in ids.Split(','))
{
u = user.getUserbyUid(Convert.ToInt32(s));
employees += "<a class=\"reply_notify_delete\" href =showuser.aspx?uid=" + u.Uid + "&pid=" + p.Pid + ">" + u.userName + "</a> ";
}
return employees;
}
want to get groupers by a project_id
i want to get string type ,then append it, but i debug the code , it doesn't work , no response , and i set breakpoin , it doesn't go into "groupers" static Method , why ?
Where you have
"{pid:25}",
dataType: "text",
change it to
'{"project_id":25}',
dataType: "json",

Resources