Solved

Catch and format to json with Jquery

Posted on 2015-01-08
2
23 Views
Last Modified: 2016-05-12
Good day people, i'm having some problems with collecting the data i am passing via jquery's ajax post method.
So far i achieve to connect to the backend servlet with no parameters. No i must pass the data collected in a json (or any avaible) format.

the tags in html are the following

<ul class="user-tags"> 
<li value="124506">
<span class="acc">100</span>
<span class="skill">java</span>
<div >
	<input class="btn" type="button" value="+" />
</div>
<span>
	<strong>
		other stuff
	</strong>
</span>
</li>
<li value="24869701">
	<span class="acc">105</span>
	<span class="skill">sql</span>
	<div>
		<input class="btn" type="button" value="+" />
	</div>
	<span>
	<strong>
		other stuff
	</strong>
	</span>
</li>
</ul>

Open in new window


I would like to send those <span> when the proper button is clicked, if possible on json or any other viable format.
each <li> element has a value, and a <span> with the values i want to send....

how do i collect the clicked row values with jquery???
i am not a ninja on front-end things.. yet!
0
Comment
Question by:JavierVera
2 Comments
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40539280
This should get you started: http://jsbin.com/zewige/1/edit?html,js,output

I've also changed the 'value' attribute of the <li> tags to a data attribte as you can't have 'value' as an attribute

var items = [];

$(function() {
  $('.btn').on('click', function(e) {
    var me = $(e.target);
    // disabled the button to allow only once
    me.prop('disabled', 'disabled');
    
    var parent = me.parents('li');
    
    items.push({
      acc: parent.find('.acc').text(),
      skill: parent.find('.skill').text(),
      val: parent.data('value')
    });
    
    console.dir(items);
    
  });

  $('#submit').on('click', function() {
    $.ajax({
      url: '/your/url',
      data: {
        values: JSON.stringify(items)
      }
    });
  });
});

Open in new window

0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now