JavaScript

Re: Jquery, changing span values with HTML5 data attr inside a div

11-Feb-16 9:50

So I have this row that's a cart item. And inside the row are column divs with spans for values.
I manage to isolate the div row, and I'm trying to find the the spans and change the values.

I tried each, but it seems to grab all the elements, and not step through each one.
I'm stumped on this.

So my HTML looks like this, and I want to change the value of span data-qty attr and the inner html inside the span tag.

<div class="cartRecord" onclick="service_selectItem(17);" data-serviceid="1" data-cartid="17">
   <div class="cartQty">
       <span data-qty="7">7</span>
   </div>
   <div class="cartSKU" id="1000">
       <span>1000</span>   </div>
   <div class="cartDescription">
       <span>Diagnose and repair hardware or software</span>
   </div>
   <div class="cartPrice">
       <span>95.00</span>
   </div>
   <div class="cartTotal">
       <span data-total="665">665.00</span>
   </div>
</div>

This is what I have going, if my thoughts are way off track I'm open to suggestions.

success: function (data) {

    if (data !== null) {
    var dRecord = $('div.cartRecord[data-cartID="' + _cartID + '"]');
    if (dRecord !== null) {
        dRecord.each(function(index, element) {

            alert($(this).html()); // I get all the elements here, just wanted one

            // So this does work because I don't have a single element
            if ($(this).is('span')) {
                alert($(this).html());
                if ($(this).attr('data-qty')) {
                    alert($(this).html());
                    $(this).data('data-qty', data.Qty).html(data.Qty);
                }
            }
            // And of course this doesn't work
            if ($(this).is('span')) {
                alert($(this).html());
                if ($(this).attr('data-total')) {
                    alert($(this).html());
                    $(this).data('data-total', data.Total).html(data.Total);
                }
            }

        });

    }
}

Richard Deeming11-Feb-16 10:17

Richard Deeming

11-Feb-16 10:17

The each function iterates through all of the elements matched by the selector - ie: the div elements with the specified data attribute. It doesn't iterate over the descendants of the matched items, which is what you're trying to do.

You don't actually need to iterate over the descendants. You can just find the relevant span elements and update them directly:

JavaScript

var dRecord = $('div.cartRecord[data-cartID="' + _cartID + '"]');
dRecord.find("span[data-qty]").html(data.Qty).data("qty", data.Qty);
dRecord.find("span[data-total]").html(data.Total).data("total", data.Total);

Also worth noting that the return from the $ function will never be null. If there are no matching elements, you'll still get a jQuery object back, with a length of zero.

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: Jquery, changing span values with HTML5 data attr inside a div

jkirkerx11-Feb-16 10:54

Re: Jquery, changing span values with HTML5 data attr inside a div

11-Feb-16 10:54

I feel stupid now. That's sort of how I found the the data I needed in another function.
very simple and elegant.

I didn't think of or forget about find.
I added the dRecord Check as length instead of null or undefined. Maybe I don't need it.

The data-qty and data-total didn't change, but I can figure that out.

success: function(data) {

    if (data !== null) {
        var dRecord = $('div.cartRecord[data-cartID="' + _cartID + '"]');
        if (dRecord.length > 0) {
            dRecord.find("span[data-qty]").html(data.Qty).data("data-qty", data.Qty);
            dRecord.find("span[data-total]").html(data.Total.formatMoney(2, '.', ',')).data("data-total", data.Total);
        }
    } else {
        $("#serviceUpdate").removeClass('btn btn-default').addClass('btn btn-danger');
    }

}

Oh this MVC and the Twitter Bootstrap CSS is hard to implement, but getting better at it. And faster.

Thanks Richard, I was completely off the rails on this. Wink | ;)

Nathan Minier12-Feb-16 1:55

Re: Jquery, changing span values with HTML5 data attr inside a div

12-Feb-16 1:55

Just to throw on the pile a little more, have you considered using a data-binding framework like Knockout, Backbone, or Angular? They do have the benefit of working on data as if it's at the base data level, rather than having to reverse-engineer the data from a rendered view.

jkirkerx12-Feb-16 6:30

Re: Jquery, changing span values with HTML5 data attr inside a div

12-Feb-16 6:30

No I haven't considered it. I heard of Angular but have no clue what it is.

Nathan Minier wrote:
rather than having to reverse-engineer the data from a rendered view.

But I rendered the content in the view with JQuery after the GET call.
I mean I used jQuery to download the cart items and construct the HTML for it.
Then wrote this post to update the item qty and total price.

Feel free to elaborate ... Wink | ;)

Nathan Minier12-Feb-16 7:03

Re: Jquery, changing span values with HTML5 data attr inside a div

12-Feb-16 7:03

Well, general JavaScript and jQuery do not support any sort of data binding, so when data is modified for any reason you may miss it, or use JavaScript to walk the DOM until you locate the appropriate element.

Data binding frameworks eliminate this necessity. You can use them to bind a JavaScript variable to an element on the DOM. This means that when a value is updated either from an AJAX call or from user interaction, the change reflects in both the script and on the DOM.

For instance, I could rewrite your sample as:

HTML

<html ng-app="myApp">
...
<div ng-controller="myCartController">
<div class="cartRecord" ng-click="doSomething()">
   <div class="cartQty">
       <input type="text" ng-model="model.quantity" />
   </div>
   <div class="cartSKU">
       <span>{{model.SKU}}</span>   </div>
   <div class="cartDescription">
       <span>{{model.Description}}</span>
   </div>
   <div class="cartPrice">
       <span>{{model.price | currency : '$' : 2}}</span>
   </div>
   <div class="cartTotal">
       <span>{{model.total}}</span>
   </div>
</div>
</div>

<script type="text/javascript">
angular.module('myApp',[])
   .controller('myCartController',['$scope',function($scope){
      $scope.model = MethodToGetModelFromAJAX();

      $scope.model.total = $scope.model.price * $scope.model.quantity;

      $scope.doSomething = function(){
         // do something!
      }
   }
</script>
</html>

Never mind the Angular-specific syntax, that code will allow you to populate the HTML via AJAX, update the quantity and recalculate the total, format the currency, and will even "do something!" on click.

jkirkerx12-Feb-16 8:17

Re: Jquery, changing span values with HTML5 data attr inside a div

12-Feb-16 8:17

That sounds and looks cool!
That may reduce my development time, after the learning curve.

So this is what most folks are using today? and is well accepted?
I'm pretty far behind on MVC, and need to catch up.

Nathan Minier12-Feb-16 8:34

Re: Jquery, changing span values with HTML5 data attr inside a div

12-Feb-16 8:34

It seems to go one of two ways (in the ASP.NET world).

The first is .NET MVC where the majority of the work is done server-side, so data-binding in JavaScript isn't terribly important. The problem is that it relies on postbacks and viewstate. In those formats state is tracked on the server so JavaScript needs are generally fairly minimal.

The other common pattern is the Single-Page Application using WebAPI and a data-binding framework (mine's Angular, hence the example). You use flat HTML as templates and only serve data from your controllers. This approach getting more common, because it can do a very solid job of acting like a native application. State resides on the client in this format, and the ASP.NET modules just provide data.

Hybrid approaches like the one you describe, where you use MVC with AJAX, do happen, but by and large people lean one way or the other due to the complexity of managing state on both server and client side.

Richard Deeming12-Feb-16 8:41

Richard Deeming

12-Feb-16 8:41

Nathan Minier wrote:
.NET MVC ... it relies on postbacks and viewstate.

I think you're getting confused between WebForms and MVC. Smile | :)

"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer

Re: Jquery, changing span values with HTML5 data attr inside a div

Nathan Minier12-Feb-16 8:57

Re: Jquery, changing span values with HTML5 data attr inside a div

12-Feb-16 8:57

Meh, ViewData.

Session cookie is still sort of the same thing though. Ish.

I won't debate it, though, or you'll start quoting GUIDs at me from memory.

jkirkerx12-Feb-16 9:13

JTable Add New Record button

12-Feb-16 9:13

This particular view I'm working on is a single form, Order Form, which collects the

Customer
Billing and Shipping Address
Cart Items
Sub totals
Shipping and etc

all on 1 form or view.

I respect your knowledge, and rather than take days to study it and research, I'll just ask
Should I adopt Angular for this view?

Member 1231770910-Feb-16 0:25

how to open the JTable Add new Record form in button click in another form

10-Feb-16 0:25

JavaScript

<button type="button" class="btn btn-primary" id="create">create</button>
                     <div id="createDoctor" style="width:99%;"></div>

and is:
<pre lang="Javascript">$('#create').click(function(){
$('#createDoctor').jtable('showCreateForm');
}); </script></pre>

its not opening the JTable add new Record form. this is in content page
in footer page i was add
<pre lang="Javascript"><script src="${baseURL}/lte/plugins/jQuery/jQuery-2.1.4.min.js"></script>

<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" type="text/javascript"></script></pre>

Am struggling a lot any help plz......

Member 123177099-Feb-16 23:02

working with showCreateForm() in jtable

9-Feb-16 23:02

JavaScript

<div id='create'/>

and how to write the code to open new Record form in button click

My Vote of 1

Keith Barrow12-Feb-16 4:57

Keith Barrow

12-Feb-16 4:57

If you want help, you'll need to be more specific - asking a question on an Internet forum (such as CodeProject) is a skill, and one that needs to be learned. The first thing to think about is the person reading your question and run through a mental check-list:

Have I stated what I tried and why/how it failed? This avoids dead-end solutions where people suggest the same thing. It also shows you, as a questioner, have tried something. People on this forum are answering for free, and don't waste time helping people who are too lazy to do their own work, they do want to help those who have tried an got stuck
Have I provided enough information for people in the forum to be able to answer the question - this is where your question really falls down. Remember we don't know what you are doing and,as mind-reading isn't feasible, you need to provide the information we need -"how to write the code to open new Record" immediately begs several questions: what do you mean by open - from a DB, as show the form to create a record?; What is a record? By open do you mean open or create?

As you haven't supplied any code - we can't even give you a help to start. At this point break down the problem - for example "How do I react to a button click in JS" - then google it (plenty of resources on that) if you can't do it yourself, then ask again here. By using these smaller steps you'll be able to build up a bigger system.

KeithBarrow.net[^] - It might not be very good, but at least it is free!

Member 123177099-Feb-16 19:23

Re: working with showCreateForm() in jtable

9-Feb-16 19:23

hi,

am having

JavaScript

<div id="create"/>

then in script

JavaScript

$('create').jtable('showCreateForm');

its not opening the jtable add new record form.

how to solve it

thanks in advance..

modified 10-Feb-16 3:47am.

F-ES Sitecore9-Feb-16 22:42

F-ES Sitecore

9-Feb-16 22:42

$('#create').jtable('showCreateForm');

Re: working with showCreateForm() in jtable

Member 123177099-Feb-16 22:55