I am try to implement drag and drop of items into an MVC application, where I drag from div to another div - this div will call a post event, passing in the data-id.
I am relatively new to jQuery coding, so I may be missing something very stupid...
Code
<div id="column1" style="width: 400px; background-color: rgba(255, 0, 0, 1)">
<ul style="list-style-type: none;">
<li data-id="1">
<a href="#">
<img src="http://placehold.it/200x200" />
</a>
</li>
</ul>
</div>
<div id="column2" style="width: 400px; background-color: black">
<ul>
<li>
<a href="#">
<img src="http://placehold.it/200x200" />
</a>
</li>
</ul>
</div>
<script>
$("#column li").draggable({
revert: true,
drag: function () {
$(this).addClass("active");
var a = $(this).closest("#column").addClass("active");
},
stop: function () {
$(this).removeClass("active").closest("#column1").removeClass("active");
}
});
</script>
The above works fine, it does drag - however my issue is with dropping. Anything that has an ID that contains Column should accept drops, I tried to replicate the above for drop, but I do not even get the alert...
$("#column").droppable({
tolerance: "touch",
drop: function (event, ui) {
alert('Hello World');
var targetColumn = $(this),
move = ui.draggable,
itemId = move.attr("data-id");
$.post("Controller/Action", { id: itemId, obj: move });
}
});
Any advice?
Thanks.
Your code probably is not working well, because your selector not match any element (you have no element with id #column).
You probably want to set a class column and bind to it draggable and droppable using .column as selector.
HTML:
<div id="column1" class="column" style="width: 400px; background-color: rgba(255, 0, 0, 1)">
<ul style="list-style-type: none;">
<li data-id="1"> <a href="#">
<img src="http://placehold.it/200x200" />
</a>
</li>
</ul>
</div>
<div id="column2" class="column" style="width: 400px; background-color: black">
<ul>
<li> <a href="#">
<img src="http://placehold.it/200x200" />
</a>
</li>
</ul>
</div>
jQuery:
$(document).ready(function () {
$(".column li").draggable({
revert: true,
drag: function () {
$(this).addClass("active");
var a = $(this).closest("#column").addClass("active");
},
stop: function () {
$(this).removeClass("active").closest("#column1").removeClass("active");
}
});
$(".column li").droppable({
tolerance: "touch",
drop: function (event, ui) {
alert('Hello World');
console.log($(this))
}
});
});
Demo: http://jsfiddle.net/IrvinDominin/CASn4/
Related
I am new to the world of MVC programming with C #, I already read the topic, made some examples and of course with the guide of StackOverflow I think I'm doing well.
However I find myself with an exercise that I want to perform and from which I have seen several answers but none has worked for me, and I come to you asking for the support.
Index
#{
ViewBag.Title = "Bienvenido";
}
<div class="container-fluid">
<div class="row">
<div class="col-md-3" id="menu">
<ul class="nav nav-pills nav-stacked">
<li role="presentation" class="active">Inicio</li>
<li role="presentation">Datos Generales</li>
<li role="presentation">Datos Curriculares</li>
<li role="presentation">Experiencia Laboral</li>
<li role="presentation">Datos Laborales</li>
<li role="presentation">Cónyuge y Dependientes</li>
<li role="presentation">Inmuebles</li>
<li role="presentation">Vehículos</li>
<li role="presentation">Muebles</li>
<li role="presentation">Inversiones</li>
<li role="presentation">Adeudos</li>
<li role="presentation">Posible Conflicto de Intereses</li>
<li role="presentation">Observaciones</li>
</ul>
</div>
<div class="col-md-9">
<div class="row" id="opciones">
</div>
<div class="row" id="crear">
</div>
<div class="row" id="registros">
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#dependientes').click(function () {
$.get('#Url.Action("Create","Dependientes")', function (data) {
$('#crear').replaceWith(data);
});
});
});
$(function () {
$('#dependientes').click(function () {
$.get('#Url.Action("Mostrar","Dependientes")', function (data) {
$('#registros').replaceWith(data);
});
});
});
</script>
Partial View _Mostrar
#model List<projectD.Models.dependiente>
#{
ViewBag.Title = "_Mostrar";
}
<br />
<div class="container">
<div class="row">
#foreach (var item in Model)
{
<div class="card" style="width: 20rem; display:inline-block; margin-top:10px">
<img class="card-img-top" src="~/Content/images/familia.png" alt="Card image cap" width="50" height="50">
<div class="card-block">
<h4 class="card-title">Dependiente</h4>
<p class="card-text">
#item.nombre
<br />
#item.apellidoPaterno
<br />
#item.apellidoMaterno
<br />
#item.CURP
</p>
#Html.ActionLink("Detalle", "Details", new { id = item.idDependiente }, new {#class= "btn btn-primary"})
</div>
</div>
}
</div>
</div>
I have a project with a main view, which has a menu to the left when selecting each option to the right render two partial views each with its controller the first to add records and the second to display them.
main screen
What I want to do is that when I click on add record, only the partial views are updated and the URL is not reloaded since I would lose the menu option in which I am.
I hope you can support me
I am using Bootstrap carousel slider script inside Repeater but its not working proper.I have projects database table i want to display this projects in slide 3 project by one slider each slide has 3 project . my code display one project per slide i don't know how to make it please help me .
Each slide : 1 2 3 then second one 4 5 6 at the same row with slider
this link has the same slide i want slider i want like it
<!-- Begin Carousel -->
<div class="row">
<div id="realto-carousel-afee" class="carousel slide">
<div class="carousel-navigation pull-right"> <a class="serif italic pull-left view-all-carousel" href="properties-grid-layout-2">All</a> <a class="left carousel-control pull-left" href="#realto-carousel-afee" data-slide="prev"><i class="fa fa-angle-left"></i></a> <a class="right carousel-control pull-right" href="#realto-carousel-afee" data-slide="next"><i class="fa fa-angle-right"></i></a> </div>
<div class="carousel-inner">
<asp:Repeater runat="server" ID="ProjectsRepater">
<ItemTemplate>
<div <%# Container.ItemIndex == 0 ? "class=\"item active\"" : "class=\"item\"" %>>
<div class="col-lg-4 col-md-4 col-sm-4 col-sx-12">
<div class="box-container">
<div class="holder"> <a class="overlay" href="" title=""> <span class="more"> <i class="fa fa-zoom-in"></i> </span>
<div class="prop_img"> <img width="370" height="210" src="150w" sizes="(max-width: 370px) 100vw, 370px" /> </div>
</a> <span class="prop-tag"></span>
<div class="prop-info">
<h3 class="prop-title">
<asp:Label ID="ProjId" runat="server" Visible="false" Text='<%# Eval("ID")%>'></asp:Label>
<asp:Label Text='<%# Eval("ProjectName")%>' ID="lblProjName" runat="server"></asp:Label>
</h3>
<ul class="more-info clearfix">
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important"></span>
<label id="lblArea" runat="server" class="qty pull-right">2</label>
</li>
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important"></span> <span id="lblPaymentsSystem" runat="server" class="qty pull-right">2</span> </li>
<li class="info-label clearfix"> <span class="pull-left" style="float:right !important"></span> <span id="lblReceivedDate" runat="server" class="qty pull-right">2</span> </li>
</ul>
</div>
<!-- prop-info -->
</div>
<!-- holder -->
</div>
<!-- box-container -->
</div>
</div>
</ItemTemplate>
</asp:Repeater>
protected void Page_Load(object sender, EventArgs e)
{
// RepeterData();
ProjectsRepater.DataSource = GetAllProjecct();
ProjectsRepater.DataBind();
}
public class Proj
{
public int ID { get; set; }
public string ProjectName { get; set; }
}
public List<Proj> GetAllProjecct()
{
List<Proj> listproj = new List<Proj>();
SqlConnection con = new SqlConnection(System.Web.Configuration.WebConfigurationManager.ConnectionStrings ["AlamarConnectionString"].ConnectionString);
SqlCommand com = new SqlCommand("Select ID,ProjectName from Projects", con);
con.Open();
SqlDataReader reader = com.ExecuteReader();
while (reader.Read())
{
Proj cnt = new Proj();
cnt.ID = Convert.ToInt32(reader["ID"]);
cnt.ProjectName = Convert.ToString(reader["ProjectName"]);
listproj.Add(cnt);
}
return listproj;
}
See this codepen, I think this will solve your problem
HTML
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="slide slide1">slide 1 content here</div>
</div>
<div class="col-xs-4">
<div class="slide slide2">slide 2 content here</div>
</div>
<div class="col-xs-4">
<div class="slide slide3">slide 3 content here</div>
</div>
</div>
</div>
</div>
<div class="item">
<div class="container">
<div class="row">
<div class="col-xs-4">
<div class="slide slide4">slide 4 content here</div>
</div>
<div class="col-xs-4">
<div class="slide slide5">slide 5 content here</div>
</div>
<div class="col-xs-4">
<div class="slide slide6">slide 6 content here</div>
</div>
</div>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
CSS
.slide {
height: 200px;
color: #fff;
font-size: 20px;
}
.slide1 {
background: red;
}
.slide2 {
background: yellow;
}
.slide3 {
background: blue;
}
.slide4 {
background: orange;
}
.slide5 {
background: green;
}
.slide6 {
background: violet;
}
http://codepen.io/Arshmeet/pen/BQKrOb
Follow a complete example of carousel that calls ajax in controller to populate 3 slides. I call just 1 record each calling for better performance but you can change.
View:
<div class="carousel slide" id="main-slide" data-ride="carousel">
<ol class="carousel-indicators text-center">
<li data-target="#main-slide" data-slide-to="0" class="active"></li>
<li data-target="#main-slide" data-slide-to="1"></li>
<li data-target="#main-slide" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<a href="" id="home1-link1">
<img id="home1-imagem1" alt="" title="" src="" width="20" height="20" class="img-responsive center-block">
<div class="carousel-caption" id="home1-caption1"><div id="home1-legenda1"></div></div>
</a>
</div>
<div class="item">
<a href="" id="home1-link2">
<img id="home1-imagem2" alt="" title="" src="" width="20" height="20" class="img-responsive center-block">
<div class="carousel-caption" id="home1-caption2"><div id="home1-legenda2"></div></div>
</a>
</div>
<div class="item">
<a href="" id="home1-link3">
<img id="home1-imagem3" alt="" title="" src="" width="20" height="20" class="img-responsive center-block">
<div class="carousel-caption" id="home1-caption3"><div id="home1-legenda3"></div></div>
</a>
</div>
</div>
<div class="slides-control">
<a title="Imagem Anterior" id="tras-home1-slide" class="carousel-control" href="#main-slide" data-slide="prev">
<i class="fa fa-angle-left"></i></a>
<a title="Imagem Posterior" id="frente-home1-slide" class="direita carousel-control" href="#main-slide" data-slide="next">
<i class="fa fa-angle-right"></i></a>
</div>
</div>
#section scripts {
<script type="text/javascript">
$(document).ready(function () {
var nrReg = 0;
var pag = "";
var i = 1;
var selecaoJquery = "";
var removeuTerceiroSlide = false;
function slide1() {
$.ajax({
url: "/Image/Slide",
type: "POST",
data: { "nrRegistro": nrReg },
ifModified: true,
cache: true,
async: true,
dataType: "json",
success: function (data) {
if (i == 2 && data.length == 0) {
$("#item-main-slide3").remove();
$("#carousel-indicator3").remove();
removeuTerceiroSlide = true;
return;
}
else if (i == 3 && data.length == 0) {
$("#item-main-slide3").remove();
$("#carousel-indicator3").remove();
if (removeuTerceiroSlide == true) {
$("#item-main-slide2").remove();
$("#carousel-indicator2").remove();
}
return;
}
if (i > 1) {
selecaoJquery = "#carousel-indicator" + i;
$(selecaoJquery).show();
}
selecaoJquery = '#home1-legenda' + i;
$(selecaoJquery).html(data[0].DescricaoLegenda);
selecaoJquery = '#home1-link' + i;
if (data[0].URLPagina == null) {
$(selecaoJquery).attr('href', '/lista/produtos');
}
else {
$(selecaoJquery).attr('href', '/produto/' + data[0].URLPagina);
}
selecaoJquery = '#home1-imagem' + i;
$(selecaoJquery).attr("src", data[0].EnderecoImagem).attr("title", data[0].Descricao)
.attr("alt", data[0].DescricaoAlternativa).attr("width", data[0].Largura).attr("height", data[0].Altura);
selecaoJquery = '#home1-caption' + i;
$(selecaoJquery).css('background-color', data[0].CorFundoLegenda);
i++;
}
});
};
nrReg = 1;
slide1();
nrReg = 2;
setTimeout(slide1(), 400);
nrReg = 3;
setTimeout(slide1(), 900);
$('#main-slide').carousel({ interval: 6000 });
});
</script>
}
Controller (/Image/Slide):
[HttpPost]
public async Task<JsonResult> Slide(int nrRegistro)
{
var recs = (from d in db.Imagem
where d.IdPostagemImagem == 1 &&
d.EnderecoImagem.Length > 0
orderby d.IdImagem
select new
{
d.IdImagem,
d.DescricaoLegenda,
d.EnderecoImagem,
d.CorFundoLegenda,
d.CorFundoLegendaMobile,
d.Descricao,
d.Largura,
d.Altura,
d.DescricaoAlternativa,
d.PosicaoHorizontalLegenda,
d.Produto.URLPagina
});
if (nrRegistro > 1)
{
nrRegistro--;
recs = recs.Skip(nrRegistro).Take(1);
}
else
recs= recs.Take(1);
return Json( await recs.ToListAsync());
}
I'm having two pages inbox.aspx and compose.aspx
by ajax I'm loading the compose page inside a div in inbox page
so I'm facing a problem with form coz I'm using form in master page for inbox and in compose page
when I'm loading compose page i will have two nested form :(
i tried to omit it but the page won't load without it specially when i put asp control inside it
till now every things worked without an error but in compose page i have link button when i click it I'm having an error
(too much recursion,Empty string passed to getElementById())
and it is not firing , but asp:button tag is working perfectly
here is the code
inbox.aspx
<div class="row email">
<div id="list-toggle" class="col-md-2">
<ul class="list-unstyled">
<li class="composeBtn">
<a href="javascript:;" data-title="Compose" class="btn Compose btn-danger">Compose
</a>
</li>
</ul>
<ul class="emailNav nav nav-pills nav-stacked margin-bottom-10">
<li class="inbox active">
<a href="javascript:;" data-title="Inbox">
<i class="fa fa-inbox fa-fw"></i>Inbox (2)
</a>
</li>
<li class="starred">
<a href="javascript:;" data-title="Starred">
<i class="fa fa-star fa-fw"></i>Starred
</a>
</li>
<li class="sent">
<a href="javascript:;" data-title="Sent">
<i class="fa fa-mail-forward fa-fw"></i>Sent Items
</a>
</li>
<li class="draft">
<a href="javascript:;" data-title="Draft">
<i class="fa fa-files-o fa-fw"></i>Drafts
</a>
</li>
<li class="spam">
<a href="javascript:;" data-title="Spam">
<i class="fa fa-ban fa-fw"></i>Spam
</a>
</li>
<li class="trash">
<a href="javascript:;" data-title="Trash">
<i class="fa fa-trash-o fa-fw"></i>Trash
</a>
</li>
</ul>
</div>
<div class="col-md-10">
<div class="emailContent"></div>
</div>
</div>
javascript
var Inbox = function () {
var main_content = $('.emailContent');
/*-----------------------------------------------------------------------------------*/
/* Show single email view
/*-----------------------------------------------------------------------------------*/
var showSingleEmail = function (el, name, resetMenu) {
alert('');
var url = 'inbox_email.html';
main_content.html('');
toggleButton(el);
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function(res)
{
toggleButton(el);
main_content.html(res);
App.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
}
/*-----------------------------------------------------------------------------------*/
/* Show WYSIWYG Editor
/*-----------------------------------------------------------------------------------*/
var showWYSIWYG = function () {
alert('');
function initToolbarBootstrapBindings() {
var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier',
'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times',
'Times New Roman', 'Verdana'],
fontTarget = $('[title=Font]').siblings('.dropdown-menu');
$.each(fonts, function (idx, fontName) {
fontTarget.append($('<li><a data-edit="fontName ' + fontName +'" style="font-family:\''+ fontName +'\'">'+fontName + '</a></li>'));
});
$('a[title]').tooltip({container:'body'});
$('.dropdown-menu input').click(function() {return false;})
.change(function () {$(this).parent('.dropdown-menu').siblings('.dropdown-toggle').dropdown('toggle');})
.keydown('esc', function () {this.value='';$(this).change();});
$('[data-role=magic-overlay]').each(function () {
var overlay = $(this), target = $(overlay.data('target'));
overlay.css('opacity', 0).css('position', 'absolute').offset(target.offset()).width(target.outerWidth()).height(target.outerHeight());
});
if ("onwebkitspeechchange" in document.createElement("input")) {
var editorOffset = $('#editor').offset();
$('#voiceBtn').css('position','absolute').offset({top: editorOffset.top, left: editorOffset.left+$('#editor').innerWidth()-35});
} else {
$('#voiceBtn').hide();
}
};
function showErrorAlert (reason, detail) {
var msg='';
if (reason==='unsupported-file-type') { msg = "Unsupported format " +detail; }
else {
console.log("error uploading file", reason, detail);
}
$('<div class="alert"> <button type="button" class="close" data-dismiss="alert">×</button>'+
'<strong>File upload error</strong> '+msg+' </div>').prependTo('#alerts');
};
initToolbarBootstrapBindings();
$('#editor').wysiwyg({ fileUploadError: showErrorAlert} );
}
/*-----------------------------------------------------------------------------------*/
/* Show Inbox view
/*-----------------------------------------------------------------------------------*/
var showInbox = function (el, name) {
alert('');
var url = 'inbox_main.html';
main_content.html('');
toggleButton(el);
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function(res)
{
toggleButton(el);
main_content.html(res);
App.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
}
/*-----------------------------------------------------------------------------------*/
/* Show email reply view
/*-----------------------------------------------------------------------------------*/
var showEmailReply = function (el) {
alert('');
var url = 'inbox_email_reply.html';
main_content.html('');
toggleButton(el);
$.ajax({
type: "GET",
cache: false,
url: url,
dataType: "html",
success: function(res)
{
toggleButton(el);
main_content.html(res);
handleCCControl();
handleCCBCC();
showWYSIWYG();
$('#editor').html($('#reply-content').html());
$('#reply-content').hide();
App.initUniform();
$('#editor').focus();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
}
/*-----------------------------------------------------------------------------------*/
/* Show Compose view
/*-----------------------------------------------------------------------------------*/
var showCompose = function (el) {
alert('');
var url = 'InboxCompose.aspx';
main_content.html('');
//toggleButton(el);
//
$.ajax({
type: "POST",
cache: false,
url: url,
//dataType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(res)
{
// $(".emailContent").load("InboxCompose.aspx #EmailComposeContent");
// toggleButton(el);
//$(".emailContent").load("InboxCompose.aspx");
main_content.html(res);
// showWYSIWYG();
// handleCCBCC();
// $('#editor').focus();
// App.initUniform();
},
error: function(xhr, ajaxOptions, thrownError)
{
toggleButton(el);
},
async: false
});
// App.setPage("Teacher"); //Set current page
// App.setAction("ComposeEmail"); //Set current page
// App.init(); //Initialise plugins and elements
}
/*-----------------------------------------------------------------------------------*/
/* Show Compose view
/*-----------------------------------------------------------------------------------*/
var handleCCBCC = function () {
alert('');
$('.emailCompose .address').on('click', '.emailCC', function () {
handleCCControl();
});
$('.emailCompose .address').on('click', '.emailBCC', function () {
handleBCCControl();
});
}
/*-----------------------------------------------------------------------------------*/
/* Show Compose view
/*-----------------------------------------------------------------------------------*/
var handleCCControl = function () {
alert('');
var the = $('.emailCompose .address .emailCC');
var input = $('.emailCompose .inputCC');
the.hide();
input.show();
$('.close', input).click(function () {
input.hide();
the.show();
});
}
/*-----------------------------------------------------------------------------------*/
/* Show Compose view
/*-----------------------------------------------------------------------------------*/
var handleBCCControl = function () {
alert('');
var the = $('.emailCompose .address .emailBCC');
var input = $('.emailCompose .inputBCC');
the.hide();
input.show();
$('.close', input).click(function () {
input.hide();
the.show();
});
}
/*-----------------------------------------------------------------------------------*/
/* Toggle button
/*-----------------------------------------------------------------------------------*/
var toggleButton = function (el) {
alert('');
if (typeof el == 'undefined') {
return;
}
if (el.attr("disabled")) {
el.attr("disabled", false);
} else {
el.attr("disabled", true);
}
}
return {
init: function () {
alert('');
///* Show main inbox screen */
//$('.emailNav > li.inbox > a').click(function () {
// showInbox($(this), 'inbox');
//});
/* Show compose screen */
$('.email .composeBtn').on('click', 'a.Compose', function () {
showCompose($(this));
});
///* Show email reply screen */
//$('.email').on('click', '.replyBtn', function () {
// showEmailReply($(this));
//});
///* Show single email screen */
//$('.emailContent').on('click', '.viewEmail', function () {
// showSingleEmail($(this));
//});
///* Handle CC control links */
//$('.emailCompose .address').on('click', '.emailCC', function () {
// handleCCControl();
//});
///* Handle BCC control links */
//$('.emailCompose .address').on('click', '.emailBCC', function () {
// handleBCCControl();
//});
///* Show main inbox for the first load */
//$('.emailNav > li.inbox > a').click();
}
};
}();
Compose.aspx
<html>
<body>
<form id="form" runat="server" method="get">
<div id="EmailComposeContent" class="emailCompose form-horizontal">
<div class="emailField" >
<label class="control-label pl-none">
<span>To:</span>
</label>
<div class="fields col-md-11">
<asp:TextBox type="hidden" class="bigdrop js-data-example-ajax col-md-9 selectDynamic noborder" runat="server"
data-groupname="ToGroup" data-groupcontrol="ToGroupList"
ID="TextBoxToIDs" data-url="InboxCompose.aspx/GetXMLData" value="16340"></asp:TextBox>
<div class="col-md-3">
<ul id="ToGroupList" class="pagination pagination-sm mb-none mt-none">
<li id="ParentGroup" class="anchor Sections "
onclick="setSection(this);">
<span class='f-lightergray'><span data-original-title="Parent" data-title="P" class="text">P</span>
<input id='RadioParentGroup' name="ToGroup" checked="checked" type="radio" value="3" style="display: none" /></span>
</li>
<li id="StudentGroup" class="anchor Sections "
onclick="setSection(this);">
<span class='f-lightergray'><span data-original-title="Student" data-title="S" class="text">S</span>
<input id='RadioStudentGroup' name="ToGroup" type="radio" value="2" style="display: none" /></span>
</li>
<li id="AdviserGroup" class="anchor Sections "
onclick="setSection(this);">
<span class='f-lightergray'><span data-original-title="Adviser" data-title="A" class="text">A</span>
<input id='RadioAdviserGroup' name="ToGroup" type="radio" value="5" style="display: none" /></span>
</li>
</ul>
</div>
</div>
</div>
<div class="emailField">
<label class="control-label ">
Title:</label>
<div class="fields col-md-9">
<asp:TextBox CssClass="form-control" ID="TextBoxTitle" runat="server" type="text" ></asp:TextBox>
</div>
</div>
<div class="emailField">
<label class="control-label ">
Expiry Date:</label>
<div class="fields col-md-4">
<asp:TextBox CssClass="form-control datepicker" ID="TextBoxExpiryDate" runat="server" type="text" ></asp:TextBox>
</div>
<label class="control-label ">
Publish Date:</label>
<div class="fields col-md-4">
<asp:TextBox CssClass="form-control datepicker" ID="TextBoxPublishDate" runat="server" type="text" ></asp:TextBox>
</div>
</div>
<div class="emailField">
<div class="divide-20"></div>
<div id="alerts"></div>
<div class="btn-toolbar" data-role="editor-toolbar" data-target="#editor">
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font"><i class="fa fa-font"></i><b class="caret"></b></a>
<ul class="dropdown-menu">
</ul>
</div>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Font Size"><i class="fa fa-text-height"></i> <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a data-edit="fontSize 5"><font size="5">Huge</font></a></li>
<li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li>
<li><a data-edit="fontSize 1"><font size="1">Small</font></a></li>
</ul>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="bold" title="Bold (Ctrl/Cmd+B)"><i class="fa fa-bold"></i></a>
<a class="btn btn-default" data-edit="italic" title="Italic (Ctrl/Cmd+I)"><i class="fa fa-italic"></i></a>
<a class="btn btn-default" data-edit="strikethrough" title="Strikethrough"><i class="fa fa-strikethrough"></i></a>
<a class="btn btn-default" data-edit="underline" title="Underline (Ctrl/Cmd+U)"><i class="fa fa-underline"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="insertunorderedlist" title="Bullet list"><i class="fa fa-list-ul"></i></a>
<a class="btn btn-default" data-edit="insertorderedlist" title="Number list"><i class="fa fa-list-ol"></i></a>
<a class="btn btn-default" data-edit="outdent" title="Reduce indent (Shift+Tab)"><i class="fa fa-outdent"></i></a>
<a class="btn btn-default" data-edit="indent" title="Indent (Tab)"><i class="fa fa-indent"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="justifyleft" title="Align Left (Ctrl/Cmd+L)"><i class="fa fa-align-left"></i></a>
<a class="btn btn-default" data-edit="justifycenter" title="Center (Ctrl/Cmd+E)"><i class="fa fa-align-center"></i></a>
<a class="btn btn-default" data-edit="justifyright" title="Align Right (Ctrl/Cmd+R)"><i class="fa fa-align-right"></i></a>
<a class="btn btn-default" data-edit="justifyfull" title="Justify (Ctrl/Cmd+J)"><i class="fa fa-align-justify"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default dropdown-toggle" data-toggle="dropdown" title="Hyperlink"><i class="fa fa-link"></i></a>
<div class="dropdown-menu input-append">
<input class="span2" placeholder="URL" type="text" data-edit="createLink"/>
<button class="btn btn-default" type="button">Add</button>
</div>
<a class="btn btn-default" data-edit="unlink" title="Remove Hyperlink"><i class="fa fa-scissors"></i></a>
</div>
<div class="btn-group">
<a class="btn btn-default" title="Insert picture (or just drag & drop)" id="pictureBtn"><i class="fa fa-picture-o"></i></a>
<input type="file" data-role="magic-overlay" data-target="#pictureBtn" data-edit="insertImage" />
</div>
<div class="btn-group">
<a class="btn btn-default" data-edit="undo" title="Undo (Ctrl/Cmd+Z)"><i class="fa fa-undo"></i></a>
<a class="btn btn-default" data-edit="redo" title="Redo (Ctrl/Cmd+Y)"><i class="fa fa-repeat"></i></a>
</div>
<input type="text" data-edit="inserttext" id="voiceBtn" x-webkit-speech="">
</div>
<div id="editor">
Write email here…
</div>
</div>
<div class="emailComposeButtons">
<button class="btn btn-default">Discard Draft</button>
<button class="btn btn-default"><i class="fa fa-paperclip"></i> Attach Files</button>
<asp:LinkButton type="submit" runat="server" OnClick="Send_Click" ID="SendBtn" CssClass="btn btn-info"><i class="fa fa-check-square-o"></i> Send</asp:LinkButton>
<asp:LinkButton runat="server" OnClick="Unnamed_Click" ID="sdzs">sfsfsfsf</asp:LinkButton>
<asp:Button ID="btn" OnClick="btn_Click" runat="server"/>
<i class="fa fa-check-square-o" onclick=" document.getElementById('btn').click();"></i>
</div></div>
</form>
</body>
</html>
c#
protected void btn_Click(object sender, EventArgs e)
{
BusinessLayer.EmailsController oEmailsController = new BusinessLayer.EmailsController();
oEmailsController.Title = TextBoxTitle.Text;
oEmailsController.PublishedDate = DateTime.Parse(TextBoxPublishDate.Text);
oEmailsController.ExpiryDate = DateTime.Parse(TextBoxExpiryDate.Text);
oEmailsController.FromGroupID = 1;
string toIDs = TextBoxToIDs.Text;
oEmailsController.FromID = Convert.ToInt32(System.Web.HttpContext.Current.User.Identity.Name.Split('$')[2]);
oEmailsController.SendStatus = (int)Enumeration.EmailSendStatus.send;
oEmailsController.ToLevelGroupID = (int)Enumeration.EmailSendStatus.send;
Response.Redirect("inbox.aspx", false);
}
Try Replacing href="javascript:;" to href="javascript:void(0);" in your tags
I need to throw anywhere from 2 elements and up into an array that I can then jQuery.Ajax post to my MVC controller.
My issue is how to put them into an acceptable array or object that I can then pass to the MVC partial view?
I have classes setup I think will work for the buttons and jQuery btnMoveUp, btnMoveDown
I need to pass the data-procedureid and data-sortid to my MVC controller.
And for bonus points another part I think I will be stuck on. If they click the "Move Up" button. I need to grab the element above it and switch their sort orders. Or the "Move Down" button need to grab the element below it and switch their sort orders.
I'm hoping this will be as easy as jQuery(".btnMoveDown").next(".btnMoveDown").attr("data-sortorder") but i haven't tested this possibility.
Here is my future aJax:
$(".btnMoveUp").click(function () {
var currSortOrder = jQuery(this).data('sortorder');
// find the element above this one and grab the sort order
// switch the sort orders
$.ajax({
url: "YourController/GetData",
type: "get",
data: // What can I pass here that my MVC partial view can then use?
success: function (result) {
$("#procedures").html(result);
}
});
}
Here is the code:
<ul class="commentlist">
#{
int i = 1;
//foreach (var item in #Model.IPACS_Processes.IPACS_Procedures)
foreach (var item in #Model.IPACS_Procedures)
{
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left" />
<div class="comment-info">
<h4>
<a href="#Url.Action("ViewProcedure", new { id = item.procedureID })">
#item.name</a></h4>
<h5>
<small>Owner: </small>#item.owner</h5>
<br />
<p>
#item.description
</p>
<br />
<p>
#if (i > 1)
{
<a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="#item.procedureID" data-sortorder="#i"><span class="iconfa-double-angle-up icon-white">
</span>Move Up</a>
}
#if (i < #Model.IPACS_Procedures.Count)
{
<a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="#item.procedureID" data-sortorder="#i"><span class="iconfa-double-angle-down">
</span>Move Down</a>
}
#{i++;}
</p>
</div>
</li>
<br style="clear: both;" />
}
}
</ul>
Here it is generated:
<ul class="commentlist">
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
<div class="comment-info">
<h4>
<a href="/MasterList/ViewProcedure/123">
XYZ Process Server</a></h4>
<h5>
<small>Owner: </small>Some Dude</h5>
<br>
<p>
Enter Description for XYZProcess Server Procedure
</p>
<br>
<p>
<a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="122" data-sortorder="1"><span class="iconfa-double-angle-down">
</span>Move Down</a>
</p>
</div>
</li>
<br style="clear: both;">
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
<div class="comment-info">
<h4>
<a href="/MasterList/ViewProcedure/122">
XYZ2 Process Server</a></h4>
<h5>
<small>Owner: </small>Some Dude</h5>
<br>
<p>
Enter Description for XYZ2 Process Server Procedure
</p>
<br>
<p>
<a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="123" data-sortorder="2"><span class="iconfa-double-angle-up icon-white">
</span>Move Up</a>
<a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="123" data-sortorder="2"><span class="iconfa-double-angle-down">
</span>Move Down</a>
</p>
</div>
</li>
<br style="clear: both;">
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
<div class="comment-info">
<h4>
<a href="/MasterList/ViewProcedure/121">
XYZ3 Process Server</a></h4>
<h5>
<small>Owner: </small>Some Dude</h5>
<br>
<p>
Enter Description for XYZ3 Process Server Procedure
</p>
<br>
<p>
<a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="124" data-sortorder="3"><span class="iconfa-double-angle-up icon-white">
</span>Move Up</a>
<a href="javascript:void(0);" class="btn btn-small btnMoveDown" data-procedureid="124" data-sortorder="3"><span class="iconfa-double-angle-down">
</span>Move Down</a>
</p>
</div>
</li>
<br style="clear: both;">
<li class="span6">
<img src="../../Images/thumbs/doc.png" alt="" class="pull-left">
<div class="comment-info">
<h4>
<a href="/MasterList/ViewProcedure/120">
XYZ4 Process Server</a></h4>
<h5>
<small>Owner: </small>Some Dude</h5>
<br>
<p>
Enter Description for XYZ4 Process Server Procedure
</p>
<br>
<p>
<a href="javascript:void(0);" class="btn btn-small btnMoveUp" data-procedureid="125" data-sortorder="4"><span class="iconfa-double-angle-up icon-white">
</span>Move Up</a>
</p>
</div>
</li>
<br style="clear: both;">
</ul>
I'm actually (literally) writing code like this right now. I am using jQuery UI to do the drag/drop re-ordering. (This code may be a little different then most other code examples).
jQuery/javascript
$(document).ready(function ()
{
$(".ui-sortable-container").sortable({
handle: ".handle",
stop: function (event, ui)
{
AJAX.postRouteUpdate();
}
});
var AJAX =
{
postRouteUpdate: function ()
{
// create object that matches MVC object
// not case sensitive
var request = {};
request.routeIDs = [];
var selector = ".ui-routes .ui-route";
// for each of my objects grab the routeid
// this is the new order of the routeids
// send them all in, it's just easier on the backend
// and allows for future multiple re-sorts before
// sending the request to the server
$(selector).each(function (index)
{
request.routeIDs.push($(this).data('routeid'));
// update the title value, as I have mine numbered
$(this).find('.title').text((index + 1).toString());
});
$.ajax({
url: '/Routes/UpdateSequence',
data: JSON.stringify(request),
type: 'GET',
success: function (result) {
$("#procedures").html(result);
}
});
}};
Model:
public class RouteUpdateModel()
{
public IEnumerable<int> RouteIDs { get; set; }
}
Controllers
public ActionResult UpdateSequence(RouteUpdateModel model)
{
this.db().UpdateSequence(model.RouteIDs);
return this.Partial(model);
}
View
#Model RouteUpdateModel
#foreach (var routeID in model.RouteIDs)
{
//do whatever
}
I have looked at:
The resizable control,
and this forum link,
all without finding the proper resolution.
I have a page (without a master page) that has 2 columns. Once column houses a menu structure, and the other a PDF viewer.
I want to be able to hide the menu, and expand the PDFviewer to the full page.
Unfortunately, I currently only have the Hide() option working.
Here is some code:
Style Sheet.css
body {
}
.wrapper {
margin: 0 auto;
}
.left {
width: 25%;
float: left;
background: #f4f4f4;
overflow: hidden;
}
.right {
width: 75%;
float: right;
margin-top: -20px;
padding-top: -20px;
}
Default.aspx
<div class="wrapper">
<div runat="server" id="left" class="left">
<div style="padding-top: 10px">
<asp:Label runat="server" Text="File List" Font-Size="20px" Font-Bold="True"></asp:Label>
- <a id="uploadLink" href="Upload.aspx">Upload</a>
<br />
<br />
<!-- Menu structure -->
</div>
</div>
<div class="right" id="right">
<a id="showh1">+</a>
<a id="hideh1">-</a>
<div style="border: 1px solid grey;">
<iframe runat="server" id="pdfHolder" width="100%" seamless="seamless" title="Doc"></iframe>
</div>
</div>
<asp:Label runat="server" ID="lbltest" Text=" ---- " Visible="False"></asp:Label>
</div>
Javascript snippet on Default.aspx
<script type="text/javascript">
$(document).ready(function () {
$('#hideh1').click(function () {
$('div.left').hide("Drop");
});
$('#showh1').click(function () {
$('div.left').show("Drop");
});
});
</script>
How can I correctly do this?
Try this:
<script type="text/javascript">
$(document).ready(function () {
$('#hideh1').click(function () {
$('div.left').hide("Drop");
$('div.right').css("width", "100%");
});
$('#showh1').click(function () {
$('div.left').show("Drop");
$('div.right').css("width", "75%");
});
});
</script>