I'm working on asp.net mvc3 application with razor view. The business logic I must implement is more complicated than my answer but as you can guess my knowledge on JS/jQuery is very poor so I take this step by step.
From the controller I get a list with all the pictures I have to show in my view and then display them like this :
#foreach (var image in ViewBag.DocumentPicture)
{
if (image != null)
{
<img src="file:\\5.3.2.7\upload\#image.Name" alt="docImg" style="width: 190px; height: auto"/>
#Ajax.ActionLink("Delete", "DeletePicture", new { documentImageID = image.Id },
new AjaxOptions
{
Confirm = "Are you sure?",
//OnComplete = "$('#blah').attr('src', '#').attr('style', 'display:none;'); $('#Image1').attr('src', '#').attr('style', 'display:none;'); $('#DelPic').attr('style', 'display:none;');"
})
}
}
I don't want to reload my entire view so I just want ti remove the image from the view once it's deletion is confirmed. I don't know if I could just make it hidden or something else would be better, but hope it's not that difficult of a task I just don't have much knowledge on JS/jQuery.
P.S
Here is the rendered HTML :
<div id="document-image-gallery">
<img src="file:\\5.3.2.7\upload\10005\docPicTest1.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=26">Delete</a>
<img src="file:\\5.3.2.7\upload\10005\docPicTest2.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=27">Delete</a>
<img src="file:\\5.3.2.7\upload\10005\docPicTest3.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=28">Delete</a>
<img src="file:\\5.3.2.7\upload\10005\docPicTest4.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=29">Delete</a>
<img src="file:\\5.3.2.7\upload\10005\docPicTest5.jpg" alt="docImg" style="width: 190px; height: auto"/>
<a data-ajax="true" data-ajax-confirm="Are you sure?" href="/Forms/DeletePicture?documentImageID=30">Delete</a>
</div>
I'd rather use a standard link:
#foreach (var image in ViewBag.DocumentPicture)
{
if (image != null)
{
<div>
<img src="file:///5.3.2.7/upload/#image.Name" alt="docImg" style="width: 190px; height: auto" />
#Html.ActionLink("Delete", "DeletePicture", new { documentImageID = image.Id }, new { #class = "delete" })
</div>
}
}
that I would unobtrusively AJAXify:
<script type="text/javascript">
$(document).on('click', '.delete', function() {
if (confirm('Are you sure?')) {
$.ajax({
url: this.href,
type: 'POST',
context: this,
success: function(result) {
$(this).closest('div').remove();
}
});
}
return false;
})
</script>
This allows us to capture the link that was clicked inside the success callback of the AJAX request, find the closest containing div and remove it from the DOM. Obviously to avoid mixing HTML and markup it a real world application the javascript snippet shown in my answer should be placed in a separate js file that you could simply reference from your view.
In CSHTML
#foreach (var image in ViewBag.DocumentPicture)
{
if (image != null)
{
<img src="file:\\5.3.2.7\upload\#image.Name" alt="docImg" style="width: 190px; height: auto"/>
#Ajax.ActionLink("Delete", "DeletePicture", new { documentImageID = image.Id },
new AjaxOptions
{
Confirm = "Are you sure?",
OnComplete = "DeleteImage"
})
}
}
JavaScript function
function DeleteImage() {
$(this).prev().remove(); //get previous sibling http://api.jquery.com/prev/
}
Related
I'm building an electron app and I created a div menu with spans in it that contain their own Iframe HTML. I want to be able to click on a specific span and for it to display its Iframe. Right now when I have more than one Iframe in the HTML file, it displays them over each other. Here is my HTML:
<div class="menu">
<img src="./images/group-30.png" class="logo"></img>
<span class="menu_spans" id="tasks">
<img src="images/group-47.png" class="tasks-img"></img>
<!--<iframe src="tasks.html"></iframe>-->
</span>
<span class="menu_spans" id="add-tasks">
<img src="images/group-55.png" class="add-tasks-img">
<iframe src="addTasks.html" scrolling="no" allowtransparency="yes" style="width:1020px; height: 574px; position: relative; top:-350%; left: 57px; border:none;"></iframe>
</span>
<span class="menu_spans" id="billing">
<img src="images/group-60.png" class="billing-img">
<!--<iframe src="billing.html" scrolling="no" allowtransparency="yes" style="width: 1020px; height: 574px; position: relative; top:-269px; left: 57px; border: none;"></iframe>-->
</span>
<span class="menu_spans" id="proxies">
<img src="images/group-61.png" class="proxies-img">
<!--<iframe src=""></iframe>-->
</span>
etc...
I've tried something like this but it doesn't work:
let menu_spans = document.querySelectorAll(".menu_spans");
for (var i = 0; i < menu_spans.length; i++) {
menu_spans[i].addEventListener('click', () => {
console.log(this.id);
});
}
I've coded this before in jQuery a while ago but im not sure how to do it in just regular js.
Any help is appreciated thank you!
You could use something like this:
let menu_spans = document.querySelectorAll(".menu_spans");
for (var i = 0; i < menu_spans.length; i++) {
menu_spans[i].addEventListener('click', smth, false);
}
function smth() {
console.log(this.id);
}
Here is JavaScript code which properly reads id of clicked element, so you can use the id of element to set iframe thing in future.
let menu_spans = document.querySelectorAll(".menu_spans");
for (var i = 0; i < menu_spans.length; i++) {
menu_spans[i].addEventListener('click', (event) => {
if (event.currentTarget.nodeName === "SPAN") {
console.log(event.currentTarget.id);
return true;
}
});
}
Link to fiddle: fiddle
I have a table that have checkboxes inside. after select it how to return a sum of values from table in modal before confirm the form? and how to render the ajax response from controller?
in my view
$("#envia-vendas").ajaxForm({
url: '../vendas/confirmar',
type: 'post',
success: function (data) {
$('#myModal').modal('show');
console.log(data);
},
in my controller
//dostuf
if($this->request->is('ajax')){
$sum = $sum;
$this->render('ajax/confirmado', 'ajax');
echo 'bal';
$this->set('text', 'test');
$this->set('_serialize', ['text']);
}
how to print the result in the view without reloading page?
What this fiddle does is grabs all of your inputs, then pops up a modal after the values and names have been injected for confirmation.
It should give you a good starting point. What this is setup to do is give you the confirmation screen without the need for additional server calls.
Just set your action to the route that you want to pass the information to for server interactions.
HTML
<form id="test-form" method="post" action="your/action/here">
<input type="text" name="test" value="" />
<input type="submit" name="submit-form" value="submit" />
</form>
<div class="modal">
<div class="form-info-wrapper">
</div>
<a class="confirm">Confirm Information</a>
</div>
CSS
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background: #FFF;
}
JS
jQuery(document).ready(function ($){
$('body').on('click', 'input[type=submit]', function (e) {
e.preventDefault();
var data = $(this).parent('form').serializeArray();
$('.form-info-wrapper').empty();
for(_data in data)
{
$('.form-info-wrapper').append(data[_data].name + ': ' + data[_data].value);
}
$('.modal').fadeIn();
});
$('.confirm').click(function (e){
e.preventDefault();
$('#test-form').submit();
});
});
https://jsfiddle.net/ojaeacps/2/
I have HTML code snippet:
<div class="main-photo" style="height: 304.875px;">
<img class="big-thumb" src="blob:http://localhost:8080/cf4ffcff-7322-44dc-8c46-3c29ef165378" style="top: -27px;">
</div>
I need result when mouse hover :
<div class="main-photo" style="height: 304.875px;">
<a class="fancybox fancybox.iframe" href="blob:http://localhost:8080/cf4ffcff-7322-44dc-8c46-3c29ef165378">
<img class="big-thumb" src="blob:http://localhost:8080/cf4ffcff-7322-44dc-8c46-3c29ef165378" style="top: -27px;">
</a>
</div>
I try something like this, use jQuery, when hover mouse over image (stub idea):
$('.main-photo').hover(function() {
$('.main-photo ').append()..attr('class', 'fancybox fancybox.iframe');
});
but not work.
You will need to wrap/unwrap the anchor element, also it will be better to derive the source of the anchor dynamically from the image
$('.main-photo').hover(function() {
var $img = $(this).find('img'),
$a = $('<a />', {
'class': 'fancybox fancybox.iframe',
href: $img.attr('src')
});
$img.wrap($a)
}, function() {
$(this).find('img').unwrap()
});
.main-photo {
border: 1px solid grey;
}
.fancybox {
border: 1px solid green;
background-color: lightblue;
display: inline-block;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-photo" style="height: 304.875px;">
<img class="big-thumb" src="//placehold.it/64X64" style="top: -27px;">
</div>
$('.main-photo').hover(function() {
$('.main-photo ').append()..attr('class', 'fancybox fancybox.iframe');
});
Try to change your code into this
$('.main-photo').hover(function() {
$('.main-photo ').append("<a class="fancybox fancybox.iframe" href="blob:http://localhost:8080/cf4ffcff-7322-44dc-8c46-3c29ef165378">");
$(".big-thumb").append("</a>");
});
You might want to try this:
$('.main-photo').hover(function() {
$(this).find("img").wrap('<a class="fancybox fancybox.iframe" href="blob:http://localhost:8080/cf4ffcff-7322-44dc-8c46-3c29ef165378"></a>');
}, function(){
$(this).find('img').unwrap();
});
I have this code:
var limit = 15;
$(document).ready(function() {
var data = 'clients=&categories=&keywords=&limit='+limit;
$.ajax({
type: 'POST',
url: 'index.php?ind=work&op=get_list',
data: data,
success: function (data) {
$('.list').html(data);
$('.thumb').click(function() {
alert($('.thumb').attr('id'));
});
}
});
});
This code returns stuff like this:
<div class="thumb" id="1" style="display: inline-block; width: 266px; padding: 15px; text-align: center;">
<img src="skin/images/work/thumbs/1.png">
</div>
<div class="thumb" id="2" style="display: inline-block; width: 266px; padding: 15px; text-align: center;">
<img src="skin/images/work/thumbs/2.png">
</div>
<div class="thumb" id="3" style="display: inline-block; width: 266px; padding: 15px; text-align: center;">
<img src="skin/images/work/thumbs/3.png">
</div>
But every time I click any of the divs, an alert shows "1" (no matter if I click div with id=1, div with id=2 or div with id=3). Could someone please tell me how to make an alert with the right div id every time I click that div? Thanx in advance.
You probably want this:
var limit = 15;
$(document).ready(function() {
var data = 'clients=&categories=&keywords=&limit='+limit;
$.ajax({
type: 'POST',
url: 'index.php?ind=work&op=get_list',
data: data,
success: function (data) {
$('.list').html(data);
$('.thumb').click(function() {
alert($(this).attr('id'));
});
}
});
});
$('.thumb').attr('id') returns the id of the first element with class thumb, no matter where it's called from.
$('.thumb').attr('id') returns the id of the first .thumb element, which is what you are seeing.
Change your event to use the element that was clicked:
$('.thumb').click(function(e) {
alert($(e.target).attr('id'));
});
No jquery. Pure javascript. I am using a Sharepoint html content editor. I have marked the sources to the images and urls as confidential. I am trying to get it so that when the user clicks on one of the images it triggers the function 'open(this)' and will create a popup window (modal) to a specific url. So far when the user clicks one of the two images it pops up the window but always to the confidential2 url. So when it should match the first case in the if statement of 'open(this)' it is not going to that url. And yes I have checked to make sure I have different urls. I switched the urls around too and it ALWAYS goes to confidential2!! Please help if you can.
<script type="text/javascript">
function opac(x) {
x.style.opacity=.5;
}
function opac_back(x) {
x.style.opacity=1;
}
</script>
<script type="text/javascript">
var options = {
url: theurl,
title: "Learning_Technology",
allowMaximize: true,
showClose: true,
width: 625,
height: 525,
dialogReturnValueCallback: silentCallback};
function open(x) {
var theurl;
if (x.id == "1") {
theurl = "confidential1";
} else if (x.id == "2") {
theurl = "confidential2";
} else {
}
SP.UI.ModalDialog.showModalDialog(options);
}
function silentCallback(dialogResult, returnValue) {
}
function refreshCallback(dialogResult, returnValue) {
SP.UI.Notify.addNotification('Operation Successful!');
SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
} </script>
<div style="background-color: rgb(237, 237, 237); width: auto; height: auto;">
<center><h2 style="color: green;">MyLearning Requests</h2></center>
<div style="height: auto; width: auto;">
<center><img width="164" height="42" border="0" id="1" name="button22694Img" src="confidential" onmouseout="opac_back(this)" onmouseover="opac(this)" alt="" style="opacity: 1;"/>
<img width="164" height="42" border="0" id="2" name="button27129Img" src="confidential" onmouseout="opac_back(this)" onmouseover="opac(this)" alt="" style="cursor: pointer; opacity: 1;"/>
</center>
</div>
</div>
You're calling open(this) on the link tag therefor this will be the link and not the image. As the link has no id attribute you're comparing undefined with "1" and "2" which will fail both. You will have to do some little DOM traversal to get the image in the link :)
function open(x) {
var theurl,
img = x.firstChild;
if (img.id == "1") {
theurl = "confidential1";
} else if (x.img == "2") {
theurl = "confidential2";
} else {
}
SP.UI.ModalDialog.showModalDialog(options);
}
You don't have any id attributes on the a tag
You are updating the var theurl but not updating options.url