CODEWITHSUNDEEP
javascriptjquery
noneJavaScript
noneJavaScript

Reputation: 845

Javascript results to div

Q1: My point is create many buttons as many rows of array. Like this, only one button appears.

<script type="text/javascript">
var myArray = [];

$('#button').click(function(){

var value1 = $('#value1').val();
var value2 = $('#value1').val();
var value3 = $('#value1').val();
var newArray = []; 
var newArray[0] = value1;
var newArray[1] = value2;
var newArray[2] = value3;
myArray.push(newArray);

$("#save").append(
    $("<button>").click(function() {
        myFunction.apply(null, myArray);
    }).text("Click me!")
   );
   });

});

function myFunction(value1,value2,value3)
{
var jsonData = $.ajax({
url: "file.php?value1=" + value1 + "&value2=" + value2 + "&value3=" + value3
dataType: "json",
async: false
}).responseText;
(...)
}
//edited: problem maybe found. I said buttons dont do anything because of this.
OUTPUT: file.php?value1=paul,23,USA&value2=undefined&value3=undefined
//it seems that value1 gets all values :s
</script>


<div id ="save"></div>

Im looking for a solution that return someting like this:

eg:

<!--<button onclick="myFunction(name,age,country)">Click me</button>-->
<button onclick="myFunction(paul,23,USA)">Click me</button>
<button onclick="myFunction(john,23,USA)">Click me</button>

EDITED MY CODE WITH MORE DETAILS

Upvotes: 0

Views: 146

Answers (6)

Ry-
Ry-

Reputation: 224963

.html replaces, and your quotes are mismatched. But it doesn't matter - jQuery is better at manipulating the DOM than it is at manipulating strings. Try:

$("#save").append(
    $.map(myArray, function(item) {
        return $("<button>").click(function() {
                   myFunction.apply(null, item);
               }).text("Click me");
    })
);

Here's a demo.

Upvotes: 4

Akhil Sekharan
Akhil Sekharan

Reputation: 12683

Did you mean this:

    <div  id="save">
    </div>      
    <script type="text/javascript">
        function addButtons(){
            for(i=0;i<myArray.length;i++)
            {
                var button = $('<button id="btn_'+i+'" onclick="myFunction(this);">Click me</button>')
                $(button).data('details',myArray[i]).appendTo("#save");
            }
        }
        function myFunction(element){
            alert($(element).data('details'));
        }
    </script>

Upvotes: 2

Mr.Tiger
Mr.Tiger

Reputation: 51

Why bothering with all the JQuery and complicated code, just use simple way to implement this 

<script type="text/javascript" >
    var myArray = ["New York", "Boston", "San Jose", "Los Angeles"];

    var strHTML = "";
    for(i=0;i<myArray.length;i++)
    {
        strHTML += "<button onclick='myFunction("+i+")'>Click me</button>";
    }       

    $("#save").innerHTML = strHTML;

    function myFunction(index)
    {
        alert(index);
        // do your logic here with index
    }
</script>

Upvotes: 0

Paul Phillips
Paul Phillips

Reputation: 6259

You're only seeing one button because the .html() method replaces the html of the element. It doesn't append.

Luckily, jQuery has a method for the behavior you want, fittingly called append. Change it to look like this:

for(i=0;i<myArray.length;i++)
{
  var button = $("<button>Click me</button>");
  $("#save").append(button) ;
}

I intentionally left the onclick behavior out of that snippet. You can write it in the html of the button you create, as you have been, or you can do it with jQuery - the second method is preferable, and would look like this:

for(i=0;i<myArray.length;i++)
{
  var button = $("<button>Click me</button>")
               .click(function(){
                    // call the actual function you want called here
               });
  $("#save").append(button);
}

Upvotes: 2

Lwyrn
Lwyrn

Reputation: 1911

for(i=0;i<myArray.length;i++){
    //Create a new DOM button element ( as jQuery object )
    // Set the current button index, and add the click action
    var button = $('<button />').data('myindex', i).click(function(){
        var myArrayItem = myArray[$(this).data('myindex')];
        alert(myArrayItem);
    }).html('My label n. '+i);
    $('#save').append(button)
}

Upvotes: 0

Nandakumar V
Nandakumar V

Reputation: 4625

This is because you are replacing the html in the $("#save") in the loop . Try
$("#save").append("<button onclick="myFunction('"+myArray[i]+"')">Click me</button>") ;

Upvotes: 1

Related Questions