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
Related
I'm trying to use Slider Revolutions tabs to redirect to a page.
The buttons (tabs) have this structure:
<div data-liindex="1" data-liref="rs-12" class="tp-tab selected" style="width: 170px; height: 50px; left: 190px; top: 0px;"><span class="tp-tab-title">ARMENIA</span></div>
The buttons defer from eachother by data-liindex parameter. 0, 1, 2,...
I tried this code but cannot figure out how to getElement by the custom id.
<script type="text/javascript">
document.getElementById("1").onclick = function () {
location.href = "www.google.com";
};
</script>
I cannot alter the button code though. Its generated by Slider Revolution so I cannot add parameters to it any more than what it is now.
If you want to select element with data- attribute you can do like:
document.querySelector("[data-liindex='1']");
Or you want to select the element by ID you can add the id to the tag you want to select:
<div data-liindex="1" data-liref="rs-12" class="tp-tab selected" style="width: 170px; height: 50px; left: 190px; top: 0px;"><span class="tp-tab-title">ARMENIA</span></div>
document.querySelector('#1')
Simplified the HTML for the demo. Does this help? (NOTE: Commented out the location.href for the demo)
let arrayUrl = [
"www.google.com",
"www.bing.com",
"www.yahoo.com"
];
document.addEventListener('DOMContentLoaded', function() {
// Add Click Listeners
Array.from(document.getElementsByClassName('tp-tab')).forEach(el => {
el.addEventListener('click', function(event){
console.log(`${event.target} - ${event.target.dataset.liindex}`);
let url = arrayUrl[ event.target.dataset.liindex ];
console.log(url);
// location.href = url;
});
});
});
<div data-liindex="0" data-liref="rs-12" class="tp-tab">ARMENIA
</div>
<div data-liindex="1" data-liref="rs-12" class="tp-tab">Canada
</div>
<div data-liindex="2" data-liref="rs-12" class="tp-tab">Europe
</div>
This code did the job. Need to be inserted in the SETTINGS of the current slider, not in the slides separatly.
jQuery(document).ready(function ($) {
$('body').on('click', '.tp-tab', function () {
switch($(this).attr("data-liindex")) {
case "1":
window.location.href = "https://google.com/";
break;
case "2":
window.location.href = "https://blizzard.com/";
break;
default:
break;
}
});
});
I'm unable to create a alert box with having a link that you can click on to open up the link. This message should popup as a alert with the word "System Form" being a url link to click on it and how to make "System Form" underlined url in a alert message?:
Example Alert message: "Please complete System Form and get a signature approval before attaching the form."
You can not modify the system alert message, but you can use jQuery to make your own alerts, that can contain icons and hyperlinks. Try below snippet, please modify css as per your need.
$(document).ready(function(){
$('#btnTest').click(function(){
ShowCustomDialog();
});
});
function ShowCustomDialog()
{
ShowDialogBox('Warning',' Record updated successfully.','Ok','', 'GoToAssetList',null);
}
function ShowDialogBox(title, content, btn1text, btn2text, functionText, parameterList) {
var btn1css;
var btn2css;
if (btn1text == '') {
btn1css = "hidecss";
} else {
btn1css = "showcss";
}
if (btn2text == '') {
btn2css = "hidecss";
} else {
btn2css = "showcss";
}
$("#lblMessage").html(content);
$("#dialog").dialog({
resizable: false,
title: title,
modal: true,
width: '400px',
height: 'auto',
bgiframe: false,
hide: { effect: 'scale', duration: 400 },
buttons: [
{
text: btn1text,
"class": btn1css,
click: function () {
$("#dialog").dialog('close');
}
},
{
text: btn2text,
"class": btn2css,
click: function () {
$("#dialog").dialog('close');
}
}
]
});
}
.showcss{ display:block;}
.hidecss{ display:none;}
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/black-tie/jquery-ui.css">
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<body>
<input type="button" id ="btnTest" value="Test"/>
<div id="dialog" title="Alert message" style="display: none">
<div class="ui-dialog-content ui-widget-content">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0"></span>
<label id="lblMessage">
</label>
</p>
</div>
</div>
</body>
There is no way to insert a hyperlink in a javascript alert. It would be a better idea to use a confirm dialog like this:
var goToSystemForm = confirm('Please complete System Form and get a signature approval before attaching the form. Would you like to be directed there now?');
if (goToSystemForm){
window.location.href = 'https://www.stackoverflow.com';
}
else{
//do something else or nothing?
}
I have this code that detects when a click inside the iframe.
Within the 'if', if the click, I create a cookie.
But the cookie is being created as I enter the page, not only when there is a click.
How can I make the cookie is created only when the click event happen?
focus();
var listener = addEventListener('blur', function() {
if(document.activeElement = document.getElementById('bloco')) {
message.innerHTML = 'Creat a cookie visits';
jQuery.cookie('visits', 1 , { expires: 7, path: '/' });
}else {
message.innerHTML = 'fail';
}
removeEventListener(listener);
});
bloco {
width: 300px;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<div id="message"></div>
<div id="bloco">
<iframe src="//example.com" width="300" height="400"></iframe>
</div>
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/
}
I am trying to find a way to switch an image on click.
I have two images.
I have one page, on this page I have one of the images displayed.
If I click on the image, I would like the other image to be loaded in its place.
I know a bit about html and css, and a bit less about php. I am assuming the correct way to go about this would be the use of javascript. Unfortunately, I know nothing about this.
Here is my code so far, what I want to do, is have .../page-2.jpg loaded when this image is clicked.
$pageContent = '
<h2>Promotions</h2>
<div class="promo-img">
<img src="'.$docPath.'/page-1.jpg" alt="Page 1" name="Page 1" width="100%" height="150%" id="page1" style="background: #FFF; display:block;" />
</div>
';
Any input here would be greatly appreciated, Thanks!
#Dennis
Where am I going wrong with this?
$pageContent = '
<h2>Promotions</h2>
<div class="promo-img"><img id="promoImage" src="'.$docPath.'/page-1.jpg" alt="Page 1" width="100%" height="150%" style="background: #FFF; display:block;"
onClick="document.getElementById(\'promoImage\').onclick = function() {
if(this.src == \''.$docPath.'/page-1.jpg\'){
this.src = \''.$docPath.'/page-2.jpg\';
} else {
this.src = \''.$docPath.'/page-1.jpg\';
}
};" /></div>
';
Okay, This does not seem to have an onclick effect?
$pageContent = '
<h2>Promotions</h2>
<div class="promo-img"><img id="promoImage" src="'.$docPath.'/page-1.jpg" alt="Page 1" width="100%" height="150%" style="background: #FFF;" /></div>
<script type="text/javascript">
document.getElementById(\'promoImage\').onclick = function() {
if(this.src == \''.$docPath.'/page-1.jpg\'){
this.src = \''.$docPath.'/page-2.jpg\';
} else {
this.src = \''.$docPath.'/page-1.jpg\';
}
};
</script>
';
HTML:
<img id="image" src="first.jpg">
Javascript: (click to switch)
document.getElementById("image").onclick = function() {
if(this.src == "first.jpg"){
this.src = "second.jpg";
} else {
this.src = "first.jpg";
}
};
Javascript: (hover to switch)
document.getElementById("image").onmouseover = function() {
this.src = "second.jpg";
};
document.getElementById("image").onmouseout = function() {
this.src = "first.jpg";
};
These are the simplest techniques. There are "better" solutions using jQuery or CSS that separate code from the HTML.