I have a loop that retrieves and assignes my data to my elements in the form.
So far it works great. But how can I grab the src from Local Storage and populate image src?
Local Storage:
Key = smallImage1_1
Value = file:///var/mobile/Applications/66294192-6BFD-458B-B571-89ABA5F7F7E8/tmp/cdv_photo_049.jpg
JS:
$(document).ready(function() {
if (localStorage) {
localStorage.setItem("flag", "set");
// Browser supports it
$(".stored").change(function () {
var data = $(this).val();
var thisName = $(this).attr('name');
var thisValue = $(this).val();
localStorage.setItem(thisName, thisValue);
});
// Test if there is already saved data
if (localStorage.getItem("flag") == "set") {
// Same iteration stuff as before
var data = $("#formID").serializeArray();
//only way we can select is by the name attribute, but jQuery is down with that.
$.each(data, function (i, obj) {
$("[name='" + obj.name + "']").val(localStorage.getItem(obj.name));
});
}
}
// save url to local storage
function onPhotoDataSuccess1_1(imageURI) {
var smallImage1_1 = document.getElementById('smallImage1_1');
smallImage1_1.src = imageURI;
var thisValue = smallImage1_1.src;
var thisName = smallImage1_1.name;
localStorage.setItem(thisName, thisValue);}
HTML:
<li class="odd">
<h2>Are there Par levels in place?</h2>
<input name="k11" id="k11" tabindex="1" class="stored" type="text" placeholder="Notes..." >
<div class="bottom">
<div class="ynDropdown" name="k12"></div>
<div class="ratingDropdown" name="k13"></div>
<img style="width:38px;height:38px;" id="smallImage1_1" class="camera" src="../img/camera.png" onclick="capturePhoto1_1();" name="smallImage1_1"/>
<img style="width:38px;height:38px;" id="smallImage1_2" class="camera" src="../img/camera.png" onclick="capturePhoto1_2();" name="smallImage1_2"/>
<img style="width:38px;height:38px;" id="smallImage1_3" class="camera" src="../img/camera.png" onclick="capturePhoto1_3();" name="smallImage1_3"/>
<span class="clear"></span>
</div>
</li>
You can select all required images and set src for each, based on its name:
$('#formID .bottom img').each(function()
{
$(this).attr('src', localStorage.getItem($(this).attr('name')));
});
Related
Every time a selection is made from a dropdown menu, specific data is pulled from facebook and added to different divs. I am trying to update the contents of the div every time a different selection is made, however at the minute, the contents are just appended on after the initial contents.
This is the code that gets data based on a selection and creates the list from the returned data
<script>
city = document.getElementById("citySelection")
city.addEventListener("change", function() {
var selected = this.value;
var eventsList = document.getElementById("events");
if (selected == "None") {
eventsList.style.display = "none";
} else {
eventsList.style.display = "block";
};
if (selected == 'Bristol') {
getBristolEvents();
};
if (selected == 'Leeds') {
getLeedsEvents();
};
if (selected == 'Manchester') {
getManchesterEvents();
};
if (selected == 'Newcastle') {
getNewcastleEvents();
};
});
function createList(response, listId) {
var list = document.createElement('UL')
for (var i = 0; i < 10; i++) {
var events = response.data[i].name
var node = document.createElement('LI');
var textNode = document.createTextNode(events);
node.appendChild(textNode);
list.appendChild(node)
listId.appendChild(list);
}};
</script
This is the div being targeted:
<html>
<div id="events" style="display: none">
<div id="eventsDiv" style="display: block">
<div id="eventsListOne">
<h3 id='headerOne'></h3>
</div>
<div id="eventsListTwo">
<h3 id='headerTwo'></h3>
</div>
<div id="eventsListThree">
<h3 id='headerThree'></h3>
</div>
</div>
</div>
</div>
</html>
I have tried resetting the innerHtml of the div every time the function to get the data from facebook is called:
<script>
function getEventsThree(fbUrl, title) {
var listId = document.getElementById('eventsListThree');
var headerThree = document.getElementById('headerThree');
listId.innerHtml = "";
headerThree.append(title)
FB.api(
fbUrl,
'GET', {
access_token
},
function(response) {
listId.innerHtml = createList(response, listId)
}
)};
</script>
However, that still doesn't reset the contents of the div.
I've looked at other response but they all use jquery which I am not using.
Can anyone advise on the best way to fix this? Thanks.
I think your Hennessy approach is fine. Generate the inner content, then set .innerHTML.
At least one of your problems, maybe the only one, appears to be that you set .innerHTML to the return value of createList, but that function does not return anything.
View1.cshtml:
<script>
var selectedImage;
function select(image) {
var images = document.querySelectorAll('img');
var index = 0, length = images.length;
for (; index < length; index++) {
images[index].classList.remove('selected');
}
selectedImage = image.id;
image.classList.add('selected');
var image = document.getElementById(selectedImage);
var audioId = image.getAttribute('data-audio')
var audioElement = document.getElementById(audioId);
// Check browser supporta
if (typeof (Storage) !== "undefined") {
// Store
localStorage.setItem("audiourl", audioElement);
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("audiourl");
}
<div>
#foreach (var item in Model)
{
<audio id="audio1" src="#Url.Content(item.Letter_Record)"></audio>
<audio id="audio2" src="#Url.Content(item.Letter_Word_Record)"></audio>
<img id="img1" data-audio="audio1" src="#Url.Content(item.Letter_Pic)" alt="" onclick="select(this)" />
<img id="img2" data-audio="audio2" src="#Url.Content(item.Letter_Word)" alt="" onclick="select(this)" />
</div>
This is view1 here is an audiourl in the javascript that i have to pass in view2.cshtml in a c# function. i have to pass an object of javascript from view 1 to view 2 and store this as an argument . the code i have used above is storing the value in local storage but how to retrieve this value in a variable of another view so that i can call it my function of view 2 ?
How can I get value of textbox appended with image tag. There is list of images with class="hi" and textbox with class multiple.
<div id="images">
<img src="www.xyz.com/qwert.jpg" class="hi">
<input type="text" class="multiple">
<img src="www.xyz.com/qwerty.jpg" class="hi">
<input type="text" class="multiple">
<img src="www.xyz.com/qwertww.jpg" class="hi">
<input type="text" class="multiple">
</div>
How can I get src and value of textbox ?
Script I tried:
var values = "";
$(".hi, .multiple").each(function () {
imageURI = $(this).attr('src'); // I am getting imageURI
???? //How can I get texbox value?
});
$(".hi").each(function () {
var imageURI = $(this).attr('src');
var textBoxVal = $(this).next().val();
});
$(".hi").each(function () {
var imageURI = $(this).attr('src');
var textBoxVal = $(this).next('input').val();
});
Try this:
var values = "";
$(".hi, .multiple").each(function () {
imageURI = $(this).attr('src'); // I am getting imageURI
textBoxVal = $(this).val();
});)
So, the following works - but can I replace the references 'img11', 'name11' and 'prof11' with something like 'this' so I don't have to assign id's every time I use this code?
<div onclick="changeStored(img11); changeName(name11); changeProf(prof11) ">
<div style="float:left">
<img id="img11" style="max-height:80px;" src="Pictures/Smiley.png">
</div>
<div style="float:left;">
<p id="name11">Name: Jane Doe</p>
<p id="prof11">Profession: Something</p>
</div>
</div>
I will post the functions just for completeness:
function changeStored(img){
storeOnClick = img.src;
alert(storeOnClick);
}
function changeName(img){
name = document.getElementById("name11").innerHTML;
alert(name);
}
function changeProf(img){
prof = document.getElementById("prof11").innerHTML;
alert(prof);
}
And no I can't just put the onclick event in the img or p because I need all 3 values to pass back to the functions when the user clicks anywhere in the div.
I think you can do something like this:
html
<div class="info">
<div style="float:left">
<img class="myimg" style="max-height:80px;" src="Pictures/Smiley.png">
</div>
<div style="float:left;">
<p class="myname">Name: Jane Doe</p>
<p class="myprof">Profession: Something</p>
</div>
</div>
js
var _divs = document.querySelectorAll('.info');
function changeAll() {
for (var i = 0; i < _divs.length; i++) {
var myimg = _divs[i].querySelector('.myimg'),
myname = _divs[i].querySelector('.myname'),
myprof = _divs[i].querySelector('.myprof')
// img
var storeOnClick = myimg.src;
alert(storeOnClick);
// name
var name = myname.innerHTML;
alert(name);
// profession
var prof = myprof.innerHTML;
alert(prof);
}
}
EDIT
To make this happen on 'click':
window.onload = function () {
var _divs = document.querySelectorAll('.info');
for (var i = 0; i < _divs.length; i++) {
_divs[i].addEventListener("click", function () { changeInfo(this) }, false);
}
}
function changeInfo(el) {
var myimg = el.querySelector('.myimg'),
myname = el.querySelector('.myname'),
myprof = el.querySelector('.myprof')
// img
var storeOnClick = myimg.src;
alert(storeOnClick);
// name
var name = myname.innerHTML;
alert(name);
// profession
var prof = myprof.innerHTML;
alert(prof);
}
You could still use the changeAll() if you wanted to do this for all info divs on page..
of course run your js after html has loaded..
I have a container that has a Google maps API on one tab and images on another. When a location is selected from a list, I want to image to change in the other tab.
I have a hidden input field which stores a list of locations with ID's and images. When a list item is clicked on, there's a div which has the ID.
It looks like this:
<input id="storeLocatorData" name="storeLocatorData" type="hidden" value="[{"id":2,"name":"name","lat":51.111113,"lng":-1.3111121,"category":"test","address":"Company 1","address2":"Test Road","address3":"","city":"Bristol","postal":"B90 5BD","country":"UK","phone":"","email":{},"image":"1181","LocationPhoto":"http://url/media/2728/logo.png"},{"id":3,"name":"name","lat":51.1113243,"lng":-1.331121,"category":"test","address":"Company 1","address2":"Test Road","address3":"","city":"Bristol","postal":"B90 5BD","country":"UK","phone":"","email":{},"image":"1181","LocationPhoto":"http://url/media/2728/header.png"}]/>
I want to find the text of the div (ID) then find the associated image from the list, then set the src of the image to the new selected image.
How would I parse the list and grab the url in image based on #loc-id text and then set #location-image?
Here's what I have so far:
$('#list').click(function () {
//Change the src of img
$(this).find('#loc-id').text();
$('#location-image').attr('src', newVal);
});
Here's the full HTML:
<div id="map-container">
<div class="tabs mobile-hide">
<ul class="tab-links">
<li class="active"><a class="tab-link-text" href="#tab1">Location Map</a></li>
<li><a class="tab-link-text" href="#tab2">Location Photo</a></li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab active">
<div id="panel-map">
<div id="map"></div>
</div>
</div>
<div id="tab2" class="tab">
<img id="location-image" class="location-photo" src=""/>
</div>
</div>
</div>
</div>
var jsonMarkers = new List<object>
();
foreach (dynamic l in this.Locations)
{
var media = Model.MediaById(l.image);
jsonMarkers.Add(new
{
id = l.LocationId,
name = l.address1,
lat = l.latitude,
lng = l.longitude,
address = l.address1,
address2 = l.address2,
address3 = l.address3,
city = l.city,
postal = l.postcode,
country = "UK",
phone = l.telephoneNumber,
email = l.bookingAfterEmail,
image = l.image,
LocationPhoto = url + media.NiceUrl
});
}
#Html.Hidden("storeLocatorData", Json.Encode(jsonMarkers));
Thanks!
You can parse the array with JSON, as such:
// Store a parsed array
var parsedArray = JSON.parse(document.getElementById('storeLocatorData').value);
// When we select the item
$('#list').click(function () {
//Change the src of img
var targetID = $(this).find('#loc-id').text(); // Get the ID
// Since your array of objects isn't indexed, we need to loop to find the correct one
var foundObject = null;
for (var key in parsedArray) {
if (parsedArray.hasOwnProperty(key) && parsedArray[key].id == targetID) {
foundObject = parsedArray[key];
break;
}
}
// If we found the object, extract the image and set!
if (!foundObject)
return;
var imageSrc = foundObject.LocationPhoto; // From the object
$('#location-image').attr('src', imageSrc); // Set the new source
});