I am using the bootstrap touchspin script from http://www.virtuosoft.eu/code/bootstrap-touchspin/.
Everything works quite well to set the value - but I'm struggling to find out how to retrieve the newest value when I stop downspinning. If I am not wrong, the doc is not mentioning that either. Also, using Google and this site, I did not find out any answer on how to solve my issue.
var i = $("input[name='demo7']"),
demoarea = $("#demo7textarea"),
text = "";
i.on("touchspin.on.stopspin", function () {
writeLine("touchspin.on.stopspins" + "new value " + i.value );
});
What am I missing? I hope my question is clear.
Many thanks for your help.
Finally, I got the answer from the developer.
Should be :
... $(this).val() instead of i.val()
Related
Is there any dirty flag in the Kendo-Grid? In the old JQuery version there was one, but in the Angular version I don't see anything like that: https://www.telerik.com/kendo-angular-ui/components/grid/
And if no, how can I get to know about changes?
As far as I know, trackBy is something you could use in that case.
I guess you could find the following link helpful
https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#toc-trackby
Please make a demo if you like to see if it works for you and check more things.
The data items has a dirty field.
var grid = $("#grid").data("kendoGrid");
var data = grid._data;
$.each(data, function (index, item) {
if(item.dirty)
{
// do something
var foo = "kung";
}
});
I've successfully implemented google map direction service api : https://developers.google.com/maps/documentation/javascript/directions with 'draggble' option enabled. Is it possible to change the text label of Drag button (screenshot attached) on hovering the route ? At present it says: 'Drag to change route'. I need to modify it. I checked the documentation: https://developers.google.com/maps/documentation/javascript/reference, but couldn't find anything for this.
The current code is similar to: https://developers.google.com/maps/documentation/javascript/examples/directions-draggable
Please help me. Thanks in advance!
Update: I just got a down vote for: "There are either too many possible answers, or good answers would be too long for this format. Please add details to narrow the answer set or to isolate an issue that can be answered in a few paragraphs.". The code is available in the provided url and I think there can be only one solution available using google map api. If there's any additional information needed, please add a comment.
Probably my answer will be downvoted, but maybe it will be useful for you. Let's say it's just an idea. So you may change the tooltip of the route after the direction has been changed.
directionsDisplay.addListener('directions_changed', function() {
directionsDisplay.gd.b.setTitle('This is your new tooltip for the route.');
});
But unfortunately at the time of the directions_changed event there are no markers yet, so somehow you should delay setting their title:
for (var i = 0; i < directionsDisplay.b.G.length; i++){
directionsDisplay.b.G[i].setTitle('Marker ' + i + ' tooltip');
}
UPDATE:
A more general code:
directionsDisplay.addListener('directions_changed', function() {
setRouteTitle(directionsDisplay, 'The new tooltip');
});
function setRouteTitle(dirsDispl, newTitle){
var ddObjKeys = Object.keys(dirsDispl);
for (var i = 0; i < ddObjKeys.length; i++){
var obj = dirsDispl[Object(ddObjKeys)[i]];
var ooObjKeys = Object.keys(obj);
for (var j = 0; j < ooObjKeys.length; j++){
var ooObj = obj[Object(ooObjKeys)[j]];
if ((ooObj) && (ooObj.hasOwnProperty('title')) && (ooObj.hasOwnProperty('shape')) && (ooObj.shape.type == 'circle')){
ooObj.setTitle(newTitle);
}
}
}
};
Hope this helps.
I'm hoping someone can help a javascript noob with a caching problem. I'm making a site in Wordpress and I've got a caching plugin installed. I need one div (that's on the sidebar of every page) NOT to be cached as it contains an image and text that is randomly generated on each page load. I've done a lot of reading and testing out of various online solutions, but I can't get one to work. I read that the best way to get around this is to give the div a random ID via Date.now(), but I can't get that to work either. So I found something close, yet it, too, doesn't work (posted below). The div doesn't show on screen, yet its contents show up fine in my source code.
Can anyone fix it for me or suggest something? I am a complete noob when it comes to javascript. Thank you for reading! :)
<script type='text/javascript'>
function randomString(length) {
var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz'.split('');
if (! length) {
length = Math.floor(Math.random() * chars.length);
}
var str = '';
for (var i = 0; i < length; i++) {
str += chars[Math.floor(Math.random() * chars.length)];
}
return str;
}
var randomId = "x" + randomString(8);
document.write('<div id="' + randomId + '">[autonav display="images,title, page, excerpt" pics_only="0" postid="11" attachment="1" orderby="rand" count=1]</div>');
</script>
I have a country dropdown and I set the selected attribute to US. I can clearly see select="selected" into select OPTION having value US in firebug. But neither firefox or chrome shown US as selected.
I have code for populate & selected country as follows.
var countryData = getCountryData();
var html = '<option value="">Select Country</option>';
$.each(countryData, function(key,value) {
if(defaultValue == value.id)
{
html = html + '<option value="'+value.id+'" selected="selected">'+value.name+'</option>';
}
else
{
html = html + '<option value="'+value.id+'">'+value.name+'</option>';
}
});
countryField.html(html);
If it is really possible for any reason to browser not shown the selected even we set the attribute selected.
UPDATE : Ok guys, As I was expecting it must be conflicted by other code. And that is the case . I am using bootstrapValidator and a special call "resetForm" which did this behavior. However one thing I did not understand why still html select in firebug shown selected attribute ? But at last I placed this code after resetForm call. Thanks to all for suggestions & help.
I had this peculiar problem of multiple select not selecting the selected values. What I ended up doing is select them with JS (I have jQuery in my app, so that makes it easier) like so:
$('#select_element').find('option[selected="selected"]').each(function(){
$(this).prop('selected', true);
});
I know this is ugly, and it should be avoided, but if nothing works, this WILL work.
you dont need to set selected="selected", selected itself is sufficient
<option value="anything" selected>anything</option>
Also check, is your HTML markup is correct. You are closing the <option> with </value>. It is wrong, should be <option></option>
EDIT
If the above solution is not working, you could set it through JavaScript:
document.getElementById("idOfSelect").selectedIndex = "1";//index starts from 0
This works for me but you can try this:
countryField.html(html).trigger('change');
you don't need selected="selected" just value.id + ' selected>' + ...
also it should be not
lastly, check that
defaultValue == value.id
in the debugger.
I had a similar issue but in my case it was not JS, but the GET variable value of another option matched the name of an option and that didn't work.
So: https://example.com?section=instruments&instruments=0 failed. Renaming to unique names fixed it for me.
used jssor slider , i have some pages with same jssor slider , some pages are working fine , but some pages comes Outer container 'null' not found. bug , can any one help on this ?
I had a similar problem, so did some digging to see what the issue was.
The setup starts with the initial call, here's the snippet from the demo site
http://www.jssor.com/development/index.html
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
which, among setting up all kinds of utility functions- more importantly does this
function JssorSlider(elmt, options) {
var _SelfSlider = this;
...
// bunch of other functions
...
$JssorDebug$.$Execute(function () {
var outerContainerElmt = $Jssor$.$GetElement(elmt);
if (!outerContainerElmt)
$JssorDebug$.$Fail("Outer container '" + elmt + "' not found.");
});
}
so at this point, it's trying to collect the string you passed, which is the elmt variable- which is for what? Well let's take a look at that $GetElement function in jssor.js
_This.$GetElement = function (elmt) {
if (_This.$IsString(elmt)) {
elmt = document.getElementById(elmt);
}
return elmt;
};
So, really, what it comes down to is this line for finding the element.
elmt = document.getElementById(elmt);
So the base of this error is
"We tried to use your string to find a matching ID tag on the page and it didn't give us a valid value"
This could be a typo, or another line of code modifying/removing the DOM.
Note that there are some scripts try to remove or modify element in your page.
Please right click on your page and click 'Inspect Element' menu item in the context menu.
Check if the 'outer container' is still there in the document. And check if there is another element with the same id.
Check if "Slider1_Container" is present or Used.
In my case, I didn't have it in my html, but still I had added the js.
Removing js resolved my issue.