Trouble integrating PHP inside a jQuery script

Question

I am having trouble integrating php into jQuery. I am trying to enter in these three lines into a jQuery script.

PHP script (1)

$jquery=NULL;
$h=1;
for($i=1;$i<=3;$i++){
    $jquery .= '
    $("#Line'.$h.'Ball'.$i.'").val(texts['.($i-1).']);';
}

This code generates text:

$("#Line1Ball1").val(texts[0]);

$("#Line1Ball2").val(texts[1]);

$("#Line1Ball3").val(texts[2]);

jQuery Script


$(document).ready(function(){
    var limit = 3;
    $("div.SelectionAreaNumbersOne").on("click", "div", function(e){
        e.preventDefault();
        if($("div.SelectionAreaNumbersOne .selectednumber").length >= limit) {

            if($("div.SelectionAreaNumbersOne .selectednumber").length == limit) {
                var texts= $("div.SelectionAreaNumbersOne .selectednumber").map(function() { return $(this).text(); }).get();
                '.$jquery.'
            }

            if($(this).hasClass("selectednumber")) { $(this).toggleClass("selectednumber"); }
        }else{
            $(this).toggleClass("selectednumber");
        }
    });
});
';
?>

However typing out the lines manually in PHP does. Rather than creating the lines dynamically.

PHP script (2), that does work.

    $jquery = '
$("#Line1Ball1").val(texts[0]);
$("#Line1Ball2").val(texts[1]);
$("#Line1Ball3").val(texts[2]);
';

What am I doing wrong?

Update

echo PHP 1

ReSedano · Accepted Answer

As I said in my comment, removing all repetitions, the code works.

The biggest intervent was to remove from your loop the jQuery functions creating only one function that works with every SelectionAreaNumbers div in your page.

I changed your PHP loop

$jquery=NULL;
$h=1;
for($i=1;$i<=3;$i++){
    $jquery .= '
    $("#Line'.$h.'Ball'.$i.'").val(texts['.($i-1).']);';
}

with a jQuery ones:

var texts = $(".selectednumber", $thisArea).map(function () {
    return $(this).text();
}).get();

$.each(texts, function (i, val) {
    $("input[id$='Ball" + (i + 1) + "']", $thisArea).val(val);
})

This is the jQuery script (I tried to change as little as possible from yours):

$(document).ready(function () {
    var limit = ;

    $(".SelectionAreaNumbers").on("click", "div", function (e) {

        e.preventDefault();
        var $this = $(this);
        var $thisArea = $(this).closest(".SelectionAreaNumbers");

        if ($(".selectednumber", $thisArea).length >= limit) {
            if ($this.hasClass("selectednumber")) {
                $this.toggleClass("selectednumber");
            }
        } else {
            $this.toggleClass("selectednumber");
        }

        if ($(".selectednumber", $thisArea).length == limit) {

            var texts = $(".selectednumber", $thisArea).map(function () {
                return $(this).text();
            }).get();

            $.each(texts, function (i, val) {
                $("input[id$='Ball" + (i + 1) + "']", $thisArea).val(val);
            })
        }
    });
});

In PHP, I removed only your ID (except those in your input, don't worry ;-) ).

This is all your file with php code:





    
    
    
    

    
        




    This Script works



        ';

            $DisplayMaximumTickets = 3;
            $CompanyStarterSettings['DrawNumberofBalls'] = 3;
            $CompanyStarterSettings['DrawBallStartNumber'] = 1;
            $CompanyStarterSettings['DrawBallFinishNumber'] = 40;
            $NoTickets = 3;

                $FirstConvertNumbertoWord = 'One';
                $SecondConvertNumbertoWord = 'Two';
                $ThirdConvertNumbertoWord = 'Three';
                $SelectedTicketsOption[$NoTickets] = 'checked';

        for($h=1;$h<=$DisplayMaximumTickets;$h++){

            $TicketOption_Group = 'TicketOptionGroup1';

            echo '
        
        
            
            
        

                ';

            echo '
                
            
                
                    
                        ';

                    for($j=$CompanyStarterSettings['DrawBallStartNumber'];$j<=$CompanyStarterSettings['DrawBallFinishNumber'];$j++){
                        echo ''.$j.'';
                    }

                    for($i=1;$i<=$CompanyStarterSettings['DrawNumberofBalls'];$i++){
                        echo ''; 
                    }


                echo '
                        
 
                    
 

                
 
            
 


            
                

                
                
               
 
            
 
         
 ';

        }

        echo '
        
            
        
 
        ';
?>

Finally, I put here a compiled version so you can see it works.

$(document).ready(function () {
	var limit = 3;

	$(".SelectionAreaNumbers").on("click", "div", function (e) {

		e.preventDefault();
		var $this = $(this);
		var $thisArea = $(this).closest(".SelectionAreaNumbers");

		if ($(".selectednumber", $thisArea).length >= limit) {
			if ($this.hasClass("selectednumber")) {
				$this.toggleClass("selectednumber");
			}
		} else {
			$this.toggleClass("selectednumber");
		}

		if ($(".selectednumber", $thisArea).length == limit) {

			var texts = $(".selectednumber", $thisArea).map(function () {
				return $(this).text();
			}).get();

			$.each(texts, function (i, val) {
				$("input[id$='Ball" + (i + 1) + "']", $thisArea).val(val);
			})
		}
	});
});

.NumberSelecton {
	background: #fff;
	position: relative;
	top: 39%;
	left: 20%;
	width: 292px;
}

.NumberTicketsContainer {
	position: absolute;
	top: 38%;
	left: 2%;
	width: 49%;
}

.NumberTicketsContainer P {
	margin: 0;
	text-align: center;
	font-size: large;
	letter-spacing: -1px;
}

.NumberTicketsContainer strong {
	font-weight: normal;
}

.NumberSelectonContainer {
	position: relative;
	width: 100%;
}

.NumberSelectonContainer .TextArea {
	position: absolute;
	top: 10px;
	left: 0px;
	width: 100px;
}

.NumberSelectonContainer .SelectionArea {
	position: relative;
}

.NumberSelectonContainer .SelectionArea .SelectionAreaNumbers {
	text-align: center;
	border: 1px solid #222;
}

.NumberSelectonContainer .SelectionArea .SelectionAreaNumbers .GridNumber {
	display: inline-block;
	text-align: center;
	width: 27px;
	height: 48px;
	line-height: 47px;
	font-weight: 900;
	cursor: pointer;
	border: 1px solid #222;
}

.NumberSelectonContainer .SelectionArea .SelectionAreaNumbers .selectednumber {
	background: #222;
	color: #fff;
}




This Script works

  
    
      
        
        
      
       
      
        
          
            
              1
              2
              3
              4
              5
              6
              7
              8
              9
              10
              11
              12
              13
              14
              15
              16
              17
              18
              19
              20
              21
              22
              23
              24
              25
              26
              27
              28
              29
              30
              31
              32
              33
              34
              35
              36
              37
              38
              39
              40
              
              
              
            
             
          
           

        
         
      
      

      
        
           
        
         
      
       
    
    
    
      
        
        
      
       
      
        
          
            
              1
              2
              3
              4
              5
              6
              7
              8
              9
              10
              11
              12
              13
              14
              15
              16
              17
              18
              19
              20
              21
              22
              23
              24
              25
              26
              27
              28
              29
              30
              31
              32
              33
              34
              35
              36
              37
              38
              39
              40
              
              
              
            
             
          
           

        
         
      
      

      
        
           
        
         
      
       
    
    
    
      
        
        
      
       
      
        
          
            
              1
              2
              3
              4
              5
              6
              7
              8
              9
              10
              11
              12
              13
              14
              15
              16
              17
              18
              19
              20
              21
              22
              23
              24
              25
              26
              27
              28
              29
              30
              31
              32
              33
              34
              35
              36
              37
              38
              39
              40

Maybe it is not the definitive solution for you, but I think it is a good starting point to finish your work. With this I just wanted to show you that, removing all repetitions, your code works.

Trouble integrating PHP inside a jQuery script

Update

Answers (2)

Related Questions