Solved

Catch and format to json with Jquery

Posted on 2015-01-08
2
39 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 43

Accepted Solution

by:
Rob 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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article discusses four methods for overlaying images in a container on a web page
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 style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

696 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