jquery .map is not working on IE 10 - internet-explorer-10

I have this jquery code:
$("#tf_zoom").live("click", function () {
var n = $(".tf_thumbs").find("img").attr("src");
var modelid = n.substr(43);
$.post("models/get_gallery", {
"modelid": modelid
}, function (data) {
var imagespathes = $(data).map(function (key, url) {
return ({
href: '<?php echo base_url();?>assets/uploads/files/' + url
});
});
console.log(imagespathes);
$.fancybox.open(imagespathes);
}, "json");
});
and this is my html:
<div id="tf_thumbs" class="tf_thumbs">
<span id="tf_zoom" class="tf_zoom"></span>
<img id="dynam" src="<?php echo base_url();?>assets/uploads/files/<?php echo $firstthumb;?>" alt="Thumb1"/>
</div>
Okay, now my problem is that this code is not functioning on IE 10 and surprisingly it's working like a charm on IE 9, IE 8, IE 7 besides FF and Google Chrome
I read many things about this issue but nothing worked for me.
So, is there any solution for it.
your help is really appreciated.
Update 1 : I am using jquery version 1.7

Perhaps this hint will help you:
I have noticed that .map( $("select").get(0).options ) will not work in IE10 but .map( $("select:first >option") ) will. This is because in ie10 .options returns a select node with an iteration of options.
So see what data is returning in IE10, perhaps it too is not an array. And if so perhaps you can do something like $(new Array(data)).map(... which will satisfy all browsers

You should be using static map function for this:
$.map(data, function(obj, index){...})
See documentation here.
// If data looks like this: [{ url: 'TestUrl' }]
// This should work:
var imagespathes = $.map(data, function(element){
return { href: '<?php echo base_url();?>assets/uploads/files/' + element.url };
});

Related

Vuejs Filter add Span

I'm filtering with vuejs, only the output I want is written in the ".00" span in the comma. how can i do it?
html
1.500 ,00
component
<p class="amount">{{ 1500 | toTL }}</p>
filter
Vue.filter('toTL', function (value) {
return new Intl.NumberFormat('tr-TR', { currency: 'TRY', minimumFractionDigits: 2}).format(value);
});
output
1.500,00
I declared you value in the data() function like so :
data () {
return {
number: '1500,00',
newNumber: [],
}
},
What I did to make this work is make a created function like so :
created() {
this.newNumber = this.number.split(',')
},
Then, in the frontend (your p and span) :
<p>{{ newNumber[0] }}<span>,{{newNumber[1]}}</span></p>
What I did is turn a value into an array by using the split() function.
There is probably a way better solution but this is what I came up with in a short amount of time, I hope it helps.

How to insert a js array into html using innerHTML?

In order to build a more clean code, i would like to delete an unordered list from html file and insert instead a js array using innerHTML. The problem is that i am new to html/css/js and I have a lot of difficulties in typing the correct syntax and understanding the logic.
In my html file i had a div with id="listOfBeaches "containing a list with beaches. if i delete the ul and I try to insert instead a js array i don't get any result.
<div id="listOfBeaches">
<ul>
<li><h3>Horseshoe Bay</h3></li>
<li><h3>Trunk BAy</h3></li>
<li><h3>El Nido</h3></li>
<li><h3>Reethi Rah</h3></li>
<li><h3>Maundays Bay</h3></li>
</ul>
</div>
I try to replace this html code with the following js code
let beaches= [
{
name: 'Horseshoe Bay',
url: './Horseshoe.html',
},
{
nume: 'Trunk BAy',
url: './Trunk-bay.html',
},
{
name: 'El Nido',
url: './El-Nido.html'
},
{
name: 'Reethi Rah',
url: './Rheeti-Rah.html'
},
{
name: 'Maundays Bay',
url: './Maundays-BAy.html'
}
];
let myBeaches = '';
for (let i = 0; i < beaches.length; i++){
myBeaches = beaches[i].name;
}
document.getElementById('listOfBeaches').innerHTML(myBeaches);
The result should be a list of beaches at the top of my webpage
Can I get any help from you guys?
If you were to look at the output of document.getElementById('listOfBeaches').innnerHTML you would see that it would contain
<ul>
<li><h3>Horseshoe Bay</h3></li>
<li><h3>Trunk BAy</h3></li>
<li><h3>El Nido</h3></li>
<li><h3>Reethi Rah</h3></li>
<li><h3>Maundays Bay</h3></li>
</ul>
So as such, you'll need to build up a similar html entry if you want to replace it using the innerHtml method. You could do something as such:
https://jsfiddle.net/nshe1qL8/

WebdriverIO: what is the equivalent of elementIdHtml?

How do I get an element's inner HTML from an elementId using browser object?
Is there something like elementIdHtml available in the WebdriverIO API?
The getHTML link for v4 is returning 403 Forbidden.
my goal is that i need to get all text inside all a._3cnp from an elementId
example html
<div class="container">
<a class="_3cnp">first link</a>
<a class="_3cnp">second link</a>
<a class="_3cnp">third link</a>
</div>
need to convert that to ["first link", "second link", ..]
i have the .container elementId already
this is what i did
.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.then(buttonElem => {
console.log('->', buttonElem)
console.log('-->', buttonElem.getHTML)
buttonElem.getHTML().then(x => console.log('---->', x))
return buttonElem.value
})
result of elementIdElements is
buttonElem
{ sessionId: '2e2f144c8895a03da1b8df92f4613a33',
status: 0,
value:
[ { ELEMENT: '0.6603119466268468-24',
'element-6066-11e4-a52e-4f735466cecf': '0.6603119466268468-24' } ],
selector: 'a._3cnp' }
but buttonElem.getHTML is undefined
im using webdriverio standalone from botium-webdriverio-connector
LE:
Change your code accordingly to the following:
.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.then(buttonElem => {
// buttonElem's 'value' will contain a list of all the matching elements
// thus, you have to call getHTML() on each item from 'value'
// the following will return the HTML of the first matching element
console.log('\nPrint element HTML: ' + buttonElem.value[0].getHTML());
return buttonElem.value[0].getHTML();
})
A better approach would be to loop between them & print the HTML:
.then(() => browser.elementIdElements(someElementId, 'a._3cnp'))
.value.forEach(buttonElem => {
console.log('\nPrint element HTML: ' + buttonElem.getHTML());
return buttonElem.getHTML();
})
The .getHTML() property is scoped to all the ELEMENT objects. For the sake of more didactical approach, I'm going to consider the task to be manipulating the HTML code found in a series of list items (<li>), from am unordered list (<ul>).
So you can do the following:
browser.getHTML('ul.ourList li.ourListItems') (this will return a list of all the <li>'s HTML code)
browser.element('ul.ourList li.ourListItems').getHTML() (this will return the first <li>'s HTML code)
$('ul.ourList li.ourListItems').getHTML() (this is the equivalent of the command above, only a relaxed version)
If you need to iterate through all the <li>s & get the HTML, do this:
let locator = 'ul.ourList li.ourListItems';
browser.elements(locator).value.forEach(elem => {
let elemHTML = elem.getHTML();
console.log( JSON.stringify(elemHTML) );
elemHTML.doSomethingWithIt();
})
where, elem will is an object with the following format:
{ ELEMENT: '0.285350058261731-1',
'element-6066-11e4-a52e-4f735466cecf': '0.285350058261731-1',
selector: 'ul li.fw-item.fz-16.lh-36.pos-r',
value: { ELEMENT: '0.285350058261731-1' },
index: 0
}

dojo1.8 - tried to register but . . . already registered - building select widget

Hi I had a trouble figuring out where select's id is registered at attempted once more.
Possible causes:-
1) ParseOnload and Parser.parse() on the same page
2) Giving the same id to another new select
3) Registering the same select with new id
I could not figure what cause the select to registered twice.
...
...
<div id='main_bContainer' data-dojo-type='dijit/layout/BorderContainer' data-dojo-props='design:"sidebar"'>
<div id='paneA' class='cP_Left' data-dojo-type='dijit/layout/ContentPane' data-dojo-props='region:"left"'>
<div id='surfaceElement1' style='border:1px solid #ccc; margin-bottom:5px; width:317px; height:55px;'><!--these dimensions here in this line override the dimensions as set by createSurface function-->
<div id='node_meterSelect'></div>
</div>
<div id='surfaceElement2' style='border:1px solid #ccc; width:317px; height:200px;'><!--these dimensions here in this line override the dimensions as set by createSurface function-->
<div id='node_cardSelect'></div>
</div>
</div>
<div id='paneB' class='cP_Right' data-dojo-type='dijit/layout/ContentPane'data-dojo-props='region:"center"'>
<!--<div id='surfaceElement3' style='border:1px solid #ccc;'> <!--width:520px; height:400px;'><!--it's the size-->
<!--</div>-->
</div>
</div>
...
...
...
var meter_Select = new Select
({store:memoStore1,
style:{width:'140px'},
}, "node_meterSelect");
meter_Select.startup();
on(meter_Select, 'change', function(evt)
{
console.debug('Selected Card = '+ meter_Select.value);
request.post('listofcards.php',{data:{cardX : meter_Select.value},
handleAs:"json"}).then(function(response)
...
...
The error is "
Error: Tried to register widget with id==node_meterSelect but that id is already registered"
What could be the problem? please advise.. Thanks in advance.
i found your solution. You do not map all the require values to the right variables ! So registry and combobox are not mapped right ! you map "combobox" on "on".
Take a look at this jsfiddle:
http://jsfiddle.net/ejEGr/7/
Your function head with missing parameters:
function (parser, ready, dom, domConstruct, gfx, declare,
_WidgetBase, Memory, Select, ObjectStore, request, on)
After correction:
function (parser, ready, dom, domConstruct, gfx, declare,
_WidgetBase, Memory, Select, ObjectStore, request,box,registry, on)
So i had to add box & registry and now everything should work fine.
Here is a working jsfiddle based on your code:
http://jsfiddle.net/JxpRC/2/
Maybe you used the id somewhere else in your code ?
require(["dijit/form/Select",
"dojo/data/ObjectStore",
"dojo/store/Memory","dojo/domReady!"
], function(Select, ObjectStore, Memory){
var store1 = new Memory({
data: [
{ id: "foo", label: "Foo" },
{ id: "bar", label: "Bar" }
]
});
var os = new ObjectStore({ objectStore: store1 });
var meter_Select = new Select
({store:os,
style:{width:'140px'},
}, "node_meterSelect");
meter_Select.startup();
})

View pictures or images inside Jquery DataTable

May I know if it is possible to put pictures or images into the rows of DataTables (http://datatables.net/) and how does one goes in doing it?
yes, simple way (Jquery Datatable)
<script>
$(document).ready(function () {
$('#example').dataTable({
"processing": true, // control the processing indicator.
"serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
"info": true, // control table information display field
"stateSave": true, //restore table state on page reload,
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], // use the first inner array as the page length values and the second inner array as the displayed options
"ajax":{
"url": "#string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/Home/AjaxGetJsonData",
"type": "GET"
},
"columns": [
{ "data": "Name", "orderable" : true },
{ "data": "Age", "orderable": false },
{ "data": "DoB", "orderable": true },
{
"render": function (data, type, JsonResultRow, meta) {
return '<img src="Content/Images/'+JsonResultRow.ImageSrcDB+'">';
}
}
],
"order": [[0, "asc"]]
});
});
</script>
[edit: note that the following code and explanation uses a previous DataTables API (1.9 and below?); it translates easily into the current API (in most cases, just ditch the Hungarian notation ("fnRowCallback" just becomes "rowCallback" for example) but I have not done so yet. The backwards compatibility is still in place I believe, but you should look for the newer conventions where possible]
Original reply follows:
What Daniel says is true, but doesn't necessarily say how it's done. And there are many ways. Here are the main ones:
1) The data source (server or otherwise) provides a complete image tag as part of the data set. Don't forget to escape any characters that need escaping for valid JSON
2) The data source provides one or more fields with the information required. For example, a field called "image link" just has the Images/PictureName.png part. Then in fnRowCallback you use this data to create an image tag.
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var imgLink = aData['imageLink']; // if your JSON is 3D
// var imgLink = aData[4]; // where 4 is the zero-origin column for 2D
var imgTag = '<img src="' + imgLink + '"/>';
$('td:eq(4)', nRow).html(imgTag); // where 4 is the zero-origin visible column in the HTML
return nRow;
}
3) Similar to above, but instead of adding a whole tag, you just update a class that has the image as a background. You would do this for images that are repeated elements rather than one-off or unique pieces of data.
You mean an image inside a column of the table?
Yes, just place an html image tag
like this
<img src="Images/PictureName.png">
instead of putting data (some string) into a column just put the above html tag....
Asp.net core DataTables
The following code retrieve the image from a folder in WWWroot and the path in the DB field ImagePath
{
"data": "ImagePath",
"render": function (data) {
return '<img src="' + data + '" class="avatar" width="50" height="50"/>';
}
}
In case the Name of the picturefile is put together out of one or more informations in the table, like in my case:
src="/images/' + Nummer + Belegnummer + '.jpg"
you can make it that way:
var table = $('#Table').DataTable({
columnDefs: [
{
targets: 0,
render: getImg
}
]
});
function getImg(data, row, full) {
var Nummer = full[1];
var Belegnummer = full[4];
return '<img src="/images/' + Nummer + Belegnummer + '.jpg"/>';}
The picture is in the first column, so Targets = 0 and gets the Information from the same row.
It is necessary to add the parameters data and row.
It is not necessary to outsource it into a seperate function, here getImg, but it makes it easier to debug.