I am trying to get div value using jquery in chrome console from this:
<div class="col-md-3">
<div class="vou-col" style="cursor: pointer">
<h4>Free Large Bucket</h4>
<span class="sku-info">Voucher123</span>
</div>
</div>
I am getting the following error:
$('.sku-info').val()
VM783:1
Uncaught TypeError: $(...).val is not a function
at :1:21
The Problems
.val() is used to get the value of an input element - i.e. what the user has typed into a text box. It won't work for this purpose.
However, it should still be defined, even if called on an HTML element (it would still return null, though, so you would still have a problem). The only reason for .val() to be not a function would be if you had not included jQuery - insure that you have a line like
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
in the <head> section of your webpage to include jQuery, otherwise none of the solutions below will work either.
The Solution
You want to get the internal HTML value of a <div>. So, you should use .text() or .html() instead of .val().
.text() will return the text in the <div>, without any HTML tags;
.html() will return all of the content of the <div>, including any HTML tags inside it.
Example
console.log($(".sku-info").text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="vou-col" style="cursor: pointer">
<h4>Free Large Bucket</h4>
<span class="sku-info">Voucher123</span>
</div>
</div>
$(".sku-info").attr('value')
should do the trick since this control is not an input
You can use .text()/.html() instead of .val() for this.. check updated snippet below.
console.log($('.sku-info').html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="vou-col" style="cursor: pointer">
<h4>Free Large Bucket</h4>
<span class="sku-info">Voucher123</span>
</div>
</div>
include jquery
var spanval = $('.sku-info').html();
alert(spanval);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-3">
<div class="vou-col" style="cursor: pointer">
<h4>Free Large Bucket</h4>
<span class="sku-info">Voucher123</span>
</div>
</div>
Problem
It seems that your jQuery is running in no conflict mode - so $ is the browser console's native function. This is often the case if using a version of jQuery which comes bundled with a CMS such as WordPress or Drupal.
Solution
You can use the full version:
jQuery(".sku-value").text();
We can infer this is the case because the error is ".val(...) is not a function" - if it were jQuery then .val would be a function.
Useful debugging tip
You can check to see if $ is jQuery by seeing if it has a version number
console.log($.fn.jquery)
If $ is jQuery then this will log a version number - something like "2.1.1". If $ jQuery is not jQuery, it'll log undefined.
Related
So this is what I have right now
http://jsfiddle.net/Wpn94/1755/
The first part of the javascript is just calling in the jQuery lib. Since I don't have acces to the original files I use a custom css, js plugin (mind this all in done in wordpress).
In the fiddle if you click on one the the 'meer' it only opens the one you've clicked. If you press 'minder'it nicely closes the one you've clicked.
Now to the issue, on my testing area if I click one of these buttons the other 5 open as well, which ofcource is not the intended use.
Is there any solution which could fix this? I'mn not able to link to the testing enviroment since it's about a product which isn't released yet, so sadly I do not have permissions to do so.
Possibly the issue:
$('.wrapper').find('a[href="#"]').on('click', function (e) {
or
$(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
I think the issue is in one of those two. Since I look for the wrapper class which all the 'buttons'have in common.
Any help would be greatly appreciated.
(structure of the element on the test area)
<div class="column withimage ">
<div class="column-inner">
<div class="image" style="background-image: url(http://eperium.com.testbyte.nl/wp-content/uploads/2016/08/Icoon_orientatie_v02.png)"></div>
<div class="txtwrap"><h4><center>ORIËNTATIE</center></h4>
<div class="wrapper">
<div class="small">
<p style="text-align: center;">
<span style="color: #000000; font-size: 16pt;">title</span><br>
<span style="color: #000000; font-size: 12pt;">text<br>more text week. </span></p>
</div>
<p style="text-align: center;"><a class="btn" href="#">Meer informatie</a></p>
</div>
What are you doing inside this function ?
$('.wrapper').find('a[href="#"]').on('click', function (e) {
You need to toogle your class on $(this) element, not to select all element with jquery again.
As closest doesn't seem to be reliable (maybe only in your test area) it is worth a try to navigate to the desired element with .parent()
$(this).parent().parent().find('.small, .big').toggleClass('small big');
If anyone is interested in the differences:
Difference between jQuery parent(), parents() and closest() functions.
According to this, closest should actually work but parent seems to be the saver way.
You can use Jquery's findByClass.
$('.className')
This will find all the elements use className.
I am trying to prepend html element into div in windows 8.1 phonegap application but its giving some weird output. Please see below code which I am using to prepend element.
var wrapper = $('.list');
wrapper.prepend("<div> Hello </div>");
It should give output like this
<div class="list">
<div> Hello </div>
</div>
But giving some weird output
<div class="list">
<head></head>
<body onload="startExec()">
<div> Hello </div>
</body>
</div>
Please get back on this as soon as possible.
Update
I am adding JavaScript Dynamic Content shim for Windows Store apps i.e winstore-jscompat. Is this issue coming because of shim?
Try This one
$('div.list').prepend("<div> Hello </div>");
I Know this is a bit late - but better late than never :)
You have pointed out the issue your self: The cause is winstore-jscompat.
Get the latest version that fixes this issue here: https://github.com/MSOpenTech/winstore-jscompat
I had this issue my self, and just verified that the newest version fixes it.
I have the following jQuery-tmpl template:
<script id="month-template" type="text/x-jquery-tmpl">
<div style="width:${width};">
<div>Hello</div>
</div>
</script>
It is used by the following script:
$("#month-template").tmpl({"width":30}).appendTo($("#containerId"));
I expect to see this output:
<div style="width:30;">
<div>Hello</div>
</div>
But I get this:
<div style="">
<div>Hello</div>
</div>
Is there some special way to embed attribute values in a template?
I am new to tmpl - maybe I have missed something obvious.
Use 30px instead of 30.
jQuery automatically converts integers to the correct CSS units when using .css() but since it's a template (not CSS-specific) you need to specify the units yourself.
Here is the piece of javascript that correctly identifies a UL element:
$(this.parentNode.nextSibling.nextSibling.children[0]);
The html it looks over is:
(with 'this' referring to the .cs_previousArrow as the initial selector)
<div id="cs_furlBar1">
<p class="cs_furlHeaderClosed">INVESTOR SERVICES</p>
<p class="cs_seeAllFurl">See all</p>
</div>
<div id="cs_investorServ" class="cs_hideOpen">
<div class="cs_previousArrow"><img class="previous_btn" src="images/previousArrow.gif" width="11" height="21" alt=""></div>
<div class="cs_vidThumbClip"></div>
in the div of cs_VidThumbClip, I use the load() action to insert a UL which has the class of cs_vidThumbList
So, the above javascript, after some bouts with Firebug, works but I'm thinking there must be a shorter (or better?) of selecting the same element.
The whole point of this is that I have 5 different divs each which will have its own content loaded to be scrolled so I wanted to avoid have the same code duped and then just the id changed.
Thanks
You can try
$('ul.cs_vidThumbList', $(this).parent().parent())
(For further background, this relates to the same piece of work as a previous question)
I'm creating a JavaScript based webchat system using jQuery to make life much easier. All the webchat JavaScript code is in an external js file, which is then referenced and instantiated by the html page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>WebchatV3</title>
<script type="text/javascript" src="/JavaScript/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="WebchatV3.js"></script>
<link rel="stylesheet" href="WebchatV3.css" />
</head>
<body>
<div id="WebchatSurround">
<div style="float:right;width:300px;">
<div id="MembersBox">
Members
<ul id="MembersList">
</ul>
</div>
<div id="QuestionsBox">
Questions
<div id="QuestionsList">
</div>
</div>
</div>
<div style="margin-right:310px;" id="ChatBox">
<div id="ChatData">
<ul id="ChatDataList"></ul>
</div>
<div id="ChatInput">
<div id="ChatInputCharRemainText">Characters remaining <span id="ChatInputCharRemain"></span></div>
<input type="text" maxlength="1000" id="ChatInputTextbox" />
</div>
</div>
</div>
<script type="text/javascript">
var webchat;
webchat = new AvonAndSomerset.WebchatV3(123, 'passcode', false);
</script>
</body>
</html>
In the JavaScript there is code to dynamically create a list of active chat members from a JSON query. This code creates a series of html DIVs and then injects this html into the 'QuestionsList' DIV present in the html.
Now here's the question :)
Within each question are elements with JavaScript onclick events that allows actions to be taken against the question shown. How can I create the onclick code without hard coding the reference to 'webchat' - is there an elegent and acceptable way?
My initial thoughts are to pass in the instance name of the 'webchat' instance when it's created, so it can then be used inside the JavaScript when creating dynamic JavaScript...
Example of code with hard coded reference to instantited 'webchat':
<div id="QuestionsBox">
Questions
<div id="QuestionsList">
<div class="Question">
<div class="QuestionInnerControls">
<img src="images/arrow_up.png" alt="" class="ControlIcon" onclick="webchat.Questions.Move(1,1);" >
<img src="images/arrow_down.png" alt="" class="ControlIcon" onclick="webchat.Questions.Move(1,-1);">
<img src="images/delete.png" alt="" class="ControlIcon" onclick="webchat.Questions.Delete(1);">
</div>
<div class="QuestionInnerText">
1) <b>Peter Bridger</b>: This is the question text
<br style="clear: right;">
</div>
</div>
</div>
</div>
While I think the live idea will most likely work for you, my initial thought was to create a template div in the initial stages of the code, and then use the clone(true) method to create dynamic copies of the template and its methods. Then within the javascript "loop" each copy could be customised as needed before being appended into the DOM.
http://docs.jquery.com/Manipulation/clone#bool
Your description is a bit in depth and I hope that I am following it correctly but it seems to me that you are trying to attach a click event(s) to all of the items as well as all of the items that will be created in the future. Rather than specifying the onclick event when creating the you should use the new jQuery feature that came out in jQuery 1.3+ that allows you to specify an event for every element that matches the Selector... even future elements like the ones you will be adding via json.
$("p").live("click", function(){
$(this).after("<p>Another paragraph!</p>");
});
http://docs.jquery.com/Events/live
Thanks for your input everyone, I've decided to pass in the instance name of the Webchat when instancing it:
var webchat;
webchat = new AvonAndSomerset.WebchatV3(123, 'passcode', false , 'webchat' );
Then inside the JavaScript I'm referencing the passed in referenced when dynamically building html with JavaScript in it:
onclick="' + this.instanceName + '.popupMemberDetailsShow(' + this.Members.collection[i].memberId + ');