How to get text from a <span> element <span> value is calculated by a Javascript

Question

0.00/5 (No votes)

See more:

Hi i currently have created a Jquery selectable.

I want to store the values of the selected elements
my code is as follows

XML

<head>
  <meta charset="utf-8">
  <title>jQuery UI Selectable - Display as grid with TouchPunch</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script>
/*!
 * jQuery UI Touch Punch 0.2.3
 *
 * Copyright 2011–2014, Dave Furfero
 * Dual licensed under the MIT or GPL Version 2 licenses.
 *
 * Depends:
 *  jquery.ui.widget.js
 *  jquery.ui.mouse.js
 */
!function(a){function f(a,b){if(!(a.originalEvent.touches.length>1)){a.preventDefault();var c=a.originalEvent.changedTouches[0],d=document.createEvent("MouseEvents");d.initMouseEvent(b,!0,!0,window,1,c.screenX,c.screenY,c.clientX,c.clientY,!1,!1,!1,!1,0,null),a.target.dispatchEvent(d)}}if(a.support.touch="ontouchend"in document,a.support.touch){var e,b=a.ui.mouse.prototype,c=b._mouseInit,d=b._mouseDestroy;b._touchStart=function(a){var b=this;!e&&b._mouseCapture(a.originalEvent.changedTouches[0])&&(e=!0,b._touchMoved=!1,f(a,"mouseover"),f(a,"mousemove"),f(a,"mousedown"))},b._touchMove=function(a){e&&(this._touchMoved=!0,f(a,"mousemove"))},b._touchEnd=function(a){e&&(f(a,"mouseup"),f(a,"mouseout"),this._touchMoved||f(a,"click"),e=!1)},b._mouseInit=function(){var b=this;b.element.bind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),c.call(b)},b._mouseDestroy=function(){var b=this;b.element.unbind({touchstart:a.proxy(b,"_touchStart"),touchmove:a.proxy(b,"_touchMove"),touchend:a.proxy(b,"_touchEnd")}),d.call(b)}}}(jQuery);
</script>
<style>
  #feedback { font-size: 1.4em; }
  #selectable .ui-selecting { background: #FECA40; }
  #selectable .ui-selected { background: #F39814; color: white; }
  #selectable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
  #selectable li { margin: 3px; padding: 1px; float: left; width: 100px; height: 80px; font-size: 4em; text-align: center; }
  .resultarea {
            background: #cedc98;
            border-top: 1px solid #000000;
            border-bottom: 1px solid #000000;
            color: #333333;
            font-size:14px;
         }
  </style>
  <script>
  $(function() {
    $( "#selectable" ).selectable();
  });
  </script>
   <script>
         $(function() {
            $( "#selectable" ).selectable({
               selected: function() {
                   var result = $("#result").empty();
                   var label = $("#label").empty();
                  $( ".ui-selected", this ).each(function() {
                     var index = $( "#selectable li" ).index( this );
                     result.append(" #" + (index + 1));
                     label.append(" #" + (index + 1));
                  });
               }
            });
         });
      </script>
</head>
<body>

<ol id="selectable">
  <li class="ui-state-default" Id="1">1</li>
  <li class="ui-state-default" Id="2">2</li>
  <li class="ui-state-default" Id="3">3</li>
  <li class="ui-state-default" Id="4">4</li>
  <li class="ui-state-default" Id="5">5</li>
  <li class="ui-state-default" Id="6">6</li>
  <li class="ui-state-default" Id="7">7</li>
  <li class="ui-state-default" Id="8">8</li>
  <li class="ui-state-default" Id="9">9</li>
  <li class="ui-state-default" Id="10">10</li>
  <li class="ui-state-default" Id="11">11</li>
  <li class="ui-state-default" Id="12">12</li>
  <li class="ui-state-default" Id="13">13</li>
  <li class="ui-state-default" Id="14">14</li>
  <li class="ui-state-default" Id="15">15</li>
  <li class="ui-state-default" Id="16">16</li>
  <li class="ui-state-default" Id="17">17</li>
  <li class="ui-state-default" Id="18">18</li>
  <li class="ui-state-default" Id="19">19</li>
  <li class="ui-state-default" Id="20">20</li>
  <li class="ui-state-default" Id="21">21</li>
  <li class="ui-state-default" Id="22">22</li>
  <li class="ui-state-default" Id="23">23</li>
  <li class="ui-state-default" Id="24">24</li>
</ol>
 <span class="resultarea">Selected Product</span>>
      <span id="result" class="resultarea"></span>

I have added a label to the page as well with an id="label"
How can i get the label to display the value which is shown in the

<span id="result" class="resultarea"></span>

Posted 5-Jan-15 21:45pm

isi19

Add a Solution

Comments

Neetin_1809 6-Jan-15 3:57am

In Jquey UOu Can Simly Use $('#result').innerHTML();

Pradip R 6-Jan-15 4:48am

Have you take a look at the API documentation?

jaket-cp 6-Jan-15 11:07am

what is the generated markup of the additional label you have mentioned?

isi19 7-Jan-15 0:43am

<asp:label id="label" runat="server" >

jaket-cp 7-Jan-15 4:52am

Okay, that is server side mark up.
I have put in a solution, have a look, it should help you out.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

jaket-cp · Answer 1 · 2015-01-06T22:51:00

For the following server side control the generated id on the client side will not be label.

ASP.NET

<asp:label id="label" runat="server" xmlns:asp="#unknown">
</asp:label>

You should be able to modify the code as below for an easy fix.

JavaScript

//var label = $("#label").empty();
//to get the generated ClientID for label
var label = $("#<%= label.ClientID %>").empty();
//note: use view source (or inspect element) in web browser to see the id of the element

Alternatively you could use the controls ClientIDMode property/attribute to set the ClientID for the control.

Please read the following links to get a grasp of what is happening on the server and client side when it comes to id generation and how to use ClientIDMode:
http://msdn.microsoft.com/en-us/library/system.web.ui.control.clientid(v=vs.110).aspx[^]
ASP.NET 4.0 Client ID Feature[^]