How to do this in jQuery - javascript

I have the following code:
var tempIdx = document.getElementById('cityBuild').selectedIndex;
var tempBuilding = document.getElementById('cityBuild').options[tempIdx].value;
// Do stuff with tempBuilding
I spent some time trying to do it in jQuery under the assumption it'd be easier, it wasn't. I tried what was given at this site but is never returned any of the values. Am I doing something wrong or is this something that jQuery simply doesn't do?
The item is a select box (single selection only) and I want to get the value from it.

jQuery knows how to work with select elements. You can get the value as any other input:
var value = $('#cityBuild').val();

Little variation to Eran answer:
var value = $('#cityBuild option:selected').val();
EDIT: now Eran is in the right. :)

Related

Change textbox value in javascript

I want to update the value of text box from where I'm getting initial value to add product to cart.
Now I'm applying round function & I want to update the value of text box that is because I'm using ajax & if I'm applying round function, user must know how system calculated everything.
Here's my simple code:
<script>
$(document).ready(function(){
$(document).delegate('.purchasenow','click', function(e){
var buynow=this;
var productid = $(this).attr('id');
var quantity = $('.quo_'+productid).val();
var quantity = Math.round(quantity);
alert(quantity); //This gives the value
$('.quo_'+productid).value = quantity; //This is not working
});
});
Can anyone tell why it's not working? It's very simple but I'm not able to find out the cause.
Have you tried
$('.quo_'+productid).val(quantity);
The jQuery selector returns a wrapped object, not the actual DOM element. I don't think wrapped object has the .value property
you are almost correct the only thing why it is not working because your syntax is wrong
this is the correct syntax for jQuery
$('.quo_'+productid).val(quantity);
if you want it in javascript
var txt = document.getElementById("quo_"+productid);
txt.value = quantity;

jquery offset method doesn't always work / exist

Good morning and happy new year everyone!
I've run into a snag on something and need to figure out a solution or an alternative, and I don't know how to approach this. I actually hope it's something easy; meaning one of you all have dealt with this already.
The problem is that I'm doing rollovers that contain information. They're divs that get moved to the absolute location. Now I've tried this with jquery 1.6 - 1.9.1. Of course this has to work in multiple browsers.
What needs to happen is on rollover show a div, and when you rollout of that div, make it hide.
...
// .columnItem is class level and works
$(".columnItem").mouseleave(function() {
$(this).css("display", "none");
});
...
$(".column").mouseenter(function() {
var currentItem = $(this)[0]; // this is where the problem is
// hide all .columnItems
$(".columnItem").css("display", "none");
// i get this error: Object #<HTMLDivElement> has no method 'offset' (viewing in chrome console)
var offsetTop = currentItem.offset().top;
var columnInfoPanel = $("#column" + currentItem.innerText);
});
So the immediate thought of some would be don't use $(this)[0]. Instead, I should use $(this), and you are correct! Where the other problem comes into play is by removing the array index, currentItem.innerText is now undefined.
The only thing I can think of is I'll have to mix both, but it seems like there should be a way to use the selector and get both options.
What have you all done?
Thanks,
Kelly
Replace:
var currentItem = $(this)[0];
With:
var currentItem = $(this).eq(0);
This creates a new jQuery object containing only the first element, so offset will work.
Then you can use either currentItem[0].innerText or currentItem.text(), whichever you prefer.
Skip the [0] at the beginning as you are saying.
But then change the last line to:
var columnInfoPanel = $("#column" + currentItem[0].innerText);
De-referencing the jQuery selector gives you the DOM-object.
If you want to stick to pure jQuery, the .text() / .html() methods will give you the same functionality.

JQuery: image src variable clean up

I've been teaching myself how to use jquery the past few days, haven't used it much, i'm kinda still stuck in old ways (back 10 yrs ago lol) To get started i downloaded the JQuery Desktop from JQuery Desktop - Nathan Smith, to keep from repetitive use of image src links inevatibly making the file larger than what it needs to be. So while making the reference variables basically started to use the same stuff over again... i tried looking up to see how to compress it or clean it up some but kept running into dead ends for what i am trying to do... if anyone happens to know what i could do that would be awesome.
Code
enter code here
/* SAVES DATA SPACE ALSO CREATES QUICK REFFERENCE/VARIABLE */
var healthVar= 'assets/img/icons/health.png';
var emailVar = 'assets/img/icons/email.png';
var linkVar = 'assets/img/icons/link.png';
var noteVar = 'assets/img/icons/note2.png';
var videoVar = 'assets/img/icons/video1.png';
var xxxVar = 'assets/img/icons/xxx.png';
var socialVar = 'assets/img/icons/social.png';
var webdesktopVar = 'assets/img/icons/webdesktop.png';
var androidVar = 'assets/img/icons/android.png';
var devVar = 'assets/img/icons/development.png';
var secureVar = 'assets/img/icons/secure.png';
var signalVar = 'assets/img/icons/signal.png';
var setVar = 'assets/img/icons/settings.png';
var spamVar = 'assets/img/icons/spam.png';
var feedbackVar = 'assets/img/icons/feedback.png';
$("#health_Pic").attr("src", healthVar);$("#health_PicB").attr("src", healthVar);$("#health_PicC").attr("src", healthVar);
$("#email_Pic").attr("src", emailVar);$("#email_PicB").attr("src", emailVar);$("#email_PicC").attr("src", emailVar);
$("#link_Pic").attr("src", linkVar);$("#link_PicB").attr("src", linkVar);$("#link_PicC").attr("src", linkVar);
$("#note_Pic").attr("src", noteVar);$("#note_PicB").attr("src", noteVar);$("#note_PicC").attr("src", noteVar);
$("#video_Pic").attr("src", videoVar);$("#video_PicB").attr("src", videoVar);$("#video_PicC").attr("src", videoVar);
$("#social_Pic").attr("src",socialVar);$("#social_PicB").attr("src", socialVar);$("#social_PicC").attr("src", socialVar);
$("#webdesktop_Pic").attr("src",webdesktopVar);$("#webdesktop_PicB").attr("src",webdesktopVar);$("#webdesktop_PicC").attr("src",webdesktopVar);
$("#android_Pic").attr("src",androidVar);$("#android_PicB").attr("src",androidVar);$("#android_PicC").attr("src",androidVar);
$("#dev_Pic").attr("src",devVar);$("#dev_PicB").attr("src",devVar);$("#dev_PicC").attr("src",devVar);
$("#secure_Pic").attr("src",secureVar);$("#secure_PicB").attr("src", secureVar);$("#secure_PicC").attr("src", secureVar);
$("#signal_Pic").attr("src", signalVar);$("#signal_PicB").attr("src", signalVar);$("#signal_PicC").attr("src", signalVar);
$("#settings_Pic").attr("src", setVar);$("#settings_PicB").attr("src", setVar);$("#settings_PicC").attr("src", setVar);
$("#spam_Pic").attr("src",spamVar);$("#spam_PicB").attr("src", spamVar);$("#spam_PicC").attr("src", spamVar);
$("#feedback_Pic").attr("src", feedbackVar);$("#feedback_PicB").attr("src", feedbackVar);$("#feedback_PicC").attr("src", feedbackVar)
I have tried to do this:
$("#health_Pic","#health_PicB","#health_PicC").attr("src", healthVar);
With no luck, thanks for any info a head of time
Try:
$("#health_Pic,#health_PicB,#health_PicC").attr("src", healthVar);
The jQuery attr function takes only the first element obtained by the selector.
Get the value of an attribute for the
first element in the set of matched elements.
Use a loop to change multiple images src.
EDIT: After checking the docs and trying it myself, I found that using the .attr as a setter does set the value for all elements. Thanks j08691 for pointing this out.

Value of selected list

I have a select list with dynamic content such
Honorar, 120.00
Porti, 7.50
Spesen, 12.00
This values are stored x_ko_leistungsart. I am selecting only one option (no multi selection) and would like to have the values after comma such 120.00 for Honorar and 7.50 if the the option porti is selected.
I am using the following function to get these values. unfortunately it does not work. I get only the value 10 assiged...
Could you please have a look to the code where the mistake can be?
Regards
thanks
mpol_ch
function SelectAnsatz() {
document.fkostenedit.x_ko_ansatz.value = '10';
var Ansatz=0;
var splitted;
var elements = document.getElementsByName("x_ko_leistungsart[]");
splitted = elements.nextSibling.nodeValue.split(",");
Ansatz = parseFloat(splitted[1]);
document.fkostenedit.x_ko_ansatz.value = Ansatz.toFixed(2);
}
Take a look at document.getElementsByName("x_ko_leistungsart[]");
I'll give you a hint: The "value" you're getting from that is not what you're expecting. You can reduce at least two lines of code by expanding on the getElementByName function.
You can find more information here: http://www.w3schools.com/dom/dom_nodes_get.asp
I solves my problem with an onchange even on x_ko_leistungsart. Here is the function:
Thanks
mpol_ch
function SelectAnsatz(){
var x=document.getElementById("x_ko_leistungsart");Ansatz=x.options[x.selectedIndex].text.split(",");
document.fkostenedit.x_ko_ansatz.value = Ansatz[1];
}

What is wrong with this code in jquery

I am trying to get plain text out of value stored in variable like this
var lb = $(this).attr("htmllabel");
var text = $(this).html(lb);
alert(text);
When the alert popup it give result as object[Object] but I was expecting the actual string after application of the function.
Can anyone help me in this? Thanks.
$(this).html(lb)
This line is setting the html of whatever this is to whatever is stored in lb. It then returns the jquery object for chaining purposes.
If you want the html of this then you just call $(this).html() with no parameter.
Your code on the second line is setting something not getting something ...
Can you include your HTML and the actual data you want in the alert box and this might help shape the answer
Take a look at the documentation for the html method:
http://api.jquery.com/html/#html2
As you can see from the documentation your code is setting the html for this and then returning a jQuery object. What is it that you want to display exactly?
If you're simply looking to get the value of your custom attribute "htmllabel", you can do the following:
var val = $(this).attr("htmllabel");
alter(val);
As a side note; I would suggest naming custom attributes with data-*according to the HTML5 spec like this:
<div data-htmllable></div>
Your can then access the value of the attribute in two ways (jQuery 1.4.3+):
var val1 = $(this).attr('data-htmllabel');
var val2 = $(this).data('htmllabel');
// Outputs same value //
alert(val1);
alert(val2);
I hope this helps!

Categories

Resources