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

<?php echo '
<script type="text/javascript">
$(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");
        }
    });
});
</script>';
?>

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

<script type="text/javascript">
$(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();

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

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

echo PHP 2

<script type="text/javascript">
$(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();

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

}

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

Here are my code scripts:

PHP1 (not working) Pastebin code https://pastebin.com/h3h3RzHc

PHP2 (does work) Pastebin code https://pastebin.com/fbZwAmJW

When you view the source code in your browser, what changes between the two different attempts? Are there any errors in your browser's debugging console? What is the exact client-side code being emitted by the non-working version? — David
– David, Commented Dec 7, 2018 at 13:36
@David Nothing changes, no errors ... no differences I can see — James
– James, Commented Dec 7, 2018 at 13:46
Clearly something must be different. "It doesn't work" doesn't really narrow down the problem. It sounds like you have some debugging to do in your client-side code. Using your browser's debugging tools, place a breakpoint at the code that's failing. When you step through that code in your browser's debugger, what happens? — David
– David, Commented Dec 7, 2018 at 13:49
"BUT it doesn't work ..." Show the actual results of that echo command — MihanEntalpo
– MihanEntalpo, Commented Dec 7, 2018 at 13:53
@James I think the first problem of your files is an HTML problem: you have plently of triple ID in your page. Also your <script>: you tripled all the functions. All these things create a great confusion to me... and also to the computer, I think. My advice is that you have to redo the page paying attention to all these things, avoiding all these repetitions. And if after this work, your functions still give you errors, re-write this question and we will try to help you! Come on, I give you +1 to encourage you! ;-) — ReSedano
– ReSedano, Commented Dec 7, 2018 at 17:55

MihanEntalpo · Accepted Answer · 2018-12-07 13:39:10Z

2

Instead of using '.$jquery.'
you should use: <?php echo $jquery; ?>

answered Dec 7, 2018 at 13:39

MihanEntalpo

2,1022 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

James Over a year ago

Sorry should have said the whole jQuery script is in <?php echo ' *** '.$jquery.' *** '; ?>

halfer · Accepted Answer · 2018-12-11 23:13:01Z

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 = <?php echo $CompanyStarterSettings['DrawNumberofBalls']; ?>;

    $(".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:

<!DOCTYPE html>
<html>
<head>

    <META http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <META NAME="description" CONTENT="">
    <META NAME="viewport" CONTENT="width=device-width, initial-scale=1">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <style>
        .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; }

    </style>    
</head>
<body>
<div id="Background">

    <h3>This Script works</h3>


<?php
    function ConvertNumbertoWord($NumbertoWord) {
        switch($NumbertoWord){
            CASE 1:     $NumbertoWord="One";        break;
            CASE 2:     $NumbertoWord="Two";        break;
            CASE 3:     $NumbertoWord="Three";      break;
            CASE 4:     $NumbertoWord="Four";       break;
            CASE 5:     $NumbertoWord="Five";       break;
            CASE 6:     $NumbertoWord="Six";        break;
            CASE 7:     $NumbertoWord="Seven";      break;
            CASE 8:     $NumbertoWord="Eigth";      break;
            CASE 9:     $NumbertoWord="Nine";       break;
            CASE 10:    $NumbertoWord="Ten";        break;
            CASE 11:    $NumbertoWord="Eleven";     break;
            CASE 12:    $NumbertoWord="Twelve";     break;
            CASE 13:    $NumbertoWord="Thirteen";   break;
            CASE 14:    $NumbertoWord="Fourteen";   break;
            CASE 15:    $NumbertoWord="Fifteen";    break;
        }
        return $NumbertoWord;
    }

    echo '
        <div id="NextDrawCountDown"></div>
        <form name="" id="" method="POST" action="" onSubmit="return validateFields()">';

            $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 '
        <div class="TicketContainer">
        <div class="Header">
            <div class="headerone"></div>
            <div class="headertwo"></div>
        </div>

                <div class="NumberTicketsContainer">';

            echo '
                </div>
            <div class="NumberSelecton">
                <div class="NumberSelectonContainer">
                    <div class="SelectionArea">
                        <div class="SelectionAreaNumbers">';

                    for($j=$CompanyStarterSettings['DrawBallStartNumber'];$j<=$CompanyStarterSettings['DrawBallFinishNumber'];$j++){
                        echo '<div class="GridNumber" >'.$j.'</div>';
                    }

                    for($i=1;$i<=$CompanyStarterSettings['DrawNumberofBalls'];$i++){
                        echo '<input type="text" name="LineNumbers[]" id="Line'.$h.'Ball'.$i.'" class="test" style="width:50px;" />'; 
                    }


                echo '
                        </div> <!-- Endof SelectionAreaNumbers -->
                    </div> <!-- Endof SelectionArea -->

                </div> <!-- Endof NumberSelectonContainer -->
            </div> <!-- Endof NumberSelecton-->


            <div class="WinnerDetailsContainer">
                <div class="WinnersAdvancePlay">

                <div class="Footer">
                </div>
               </div> <!-- Endof WinnersAdvancePlay -->
            </div> <!-- Endof WinnerDetailsContainer -->
         </div> <!-- Endof Class TicketContainer -->';

        }

        echo '
        <div id="SubmitTickets">
            <p class="right"><input type="submit" name="SubmitTicketButton" id="SubmitTicketButton" class="SubmitTicketButton" value="Button" /></p>
        </div> <!-- Endof SubmitTickets -->
        </form>';
?>

    <script type="text/javascript">
        $(document).ready(function(){
            var limit = <?php echo $CompanyStarterSettings['DrawNumberofBalls']; ?>;

            $(".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);
                    })
                }
            });
        });
    </script>
</div>
</body>
</html>

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="Background">
<h3>This Script works</h3>
<div id="NextDrawCountDown"></div>
  <form name="" id="" method="POST" action="" onSubmit="return validateFields()">
    <div class="TicketContainer">
      <div class="Header">
        <div class="headerone"></div>
        <div class="headertwo"></div>
      </div>
      <div class="NumberTicketsContainer"> </div>
      <div class="NumberSelecton">
        <div class="NumberSelectonContainer">
          <div class="SelectionArea">
            <div class="SelectionAreaNumbers">
              <div class="GridNumber" >1</div>
              <div class="GridNumber" >2</div>
              <div class="GridNumber" >3</div>
              <div class="GridNumber" >4</div>
              <div class="GridNumber" >5</div>
              <div class="GridNumber" >6</div>
              <div class="GridNumber" >7</div>
              <div class="GridNumber" >8</div>
              <div class="GridNumber" >9</div>
              <div class="GridNumber" >10</div>
              <div class="GridNumber" >11</div>
              <div class="GridNumber" >12</div>
              <div class="GridNumber" >13</div>
              <div class="GridNumber" >14</div>
              <div class="GridNumber" >15</div>
              <div class="GridNumber" >16</div>
              <div class="GridNumber" >17</div>
              <div class="GridNumber" >18</div>
              <div class="GridNumber" >19</div>
              <div class="GridNumber" >20</div>
              <div class="GridNumber" >21</div>
              <div class="GridNumber" >22</div>
              <div class="GridNumber" >23</div>
              <div class="GridNumber" >24</div>
              <div class="GridNumber" >25</div>
              <div class="GridNumber" >26</div>
              <div class="GridNumber" >27</div>
              <div class="GridNumber" >28</div>
              <div class="GridNumber" >29</div>
              <div class="GridNumber" >30</div>
              <div class="GridNumber" >31</div>
              <div class="GridNumber" >32</div>
              <div class="GridNumber" >33</div>
              <div class="GridNumber" >34</div>
              <div class="GridNumber" >35</div>
              <div class="GridNumber" >36</div>
              <div class="GridNumber" >37</div>
              <div class="GridNumber" >38</div>
              <div class="GridNumber" >39</div>
              <div class="GridNumber" >40</div>
              <input type="text" name="LineNumbers[]" id="Line1Ball1" class="test" style="width:50px;" />
              <input type="text" name="LineNumbers[]" id="Line1Ball2" class="test" style="width:50px;" />
              <input type="text" name="LineNumbers[]" id="Line1Ball3" class="test" style="width:50px;" />
            </div>
            <!-- Endof SelectionAreaNumbers --> 
          </div>
          <!-- Endof SelectionArea --> 

        </div>
        <!-- Endof NumberSelectonContainer --> 
      </div>
      <!-- Endof NumberSelecton-->

      <div class="WinnerDetailsContainer">
        <div class="WinnersAdvancePlay">
          <div class="Footer"> </div>
        </div>
        <!-- Endof WinnersAdvancePlay --> 
      </div>
      <!-- Endof WinnerDetailsContainer --> 
    </div>
    <!-- Endof Class TicketContainer -->
    <div class="TicketContainer">
      <div class="Header">
        <div class="headerone"></div>
        <div class="headertwo"></div>
      </div>
      <div class="NumberTicketsContainer"> </div>
      <div class="NumberSelecton">
        <div class="NumberSelectonContainer">
          <div class="SelectionArea">
            <div class="SelectionAreaNumbers">
              <div class="GridNumber" >1</div>
              <div class="GridNumber" >2</div>
              <div class="GridNumber" >3</div>
              <div class="GridNumber" >4</div>
              <div class="GridNumber" >5</div>
              <div class="GridNumber" >6</div>
              <div class="GridNumber" >7</div>
              <div class="GridNumber" >8</div>
              <div class="GridNumber" >9</div>
              <div class="GridNumber" >10</div>
              <div class="GridNumber" >11</div>
              <div class="GridNumber" >12</div>
              <div class="GridNumber" >13</div>
              <div class="GridNumber" >14</div>
              <div class="GridNumber" >15</div>
              <div class="GridNumber" >16</div>
              <div class="GridNumber" >17</div>
              <div class="GridNumber" >18</div>
              <div class="GridNumber" >19</div>
              <div class="GridNumber" >20</div>
              <div class="GridNumber" >21</div>
              <div class="GridNumber" >22</div>
              <div class="GridNumber" >23</div>
              <div class="GridNumber" >24</div>
              <div class="GridNumber" >25</div>
              <div class="GridNumber" >26</div>
              <div class="GridNumber" >27</div>
              <div class="GridNumber" >28</div>
              <div class="GridNumber" >29</div>
              <div class="GridNumber" >30</div>
              <div class="GridNumber" >31</div>
              <div class="GridNumber" >32</div>
              <div class="GridNumber" >33</div>
              <div class="GridNumber" >34</div>
              <div class="GridNumber" >35</div>
              <div class="GridNumber" >36</div>
              <div class="GridNumber" >37</div>
              <div class="GridNumber" >38</div>
              <div class="GridNumber" >39</div>
              <div class="GridNumber" >40</div>
              <input type="text" name="LineNumbers[]" id="Line2Ball1" class="test" style="width:50px;" />
              <input type="text" name="LineNumbers[]" id="Line2Ball2" class="test" style="width:50px;" />
              <input type="text" name="LineNumbers[]" id="Line2Ball3" class="test" style="width:50px;" />
            </div>
            <!-- Endof SelectionAreaNumbers --> 
          </div>
          <!-- Endof SelectionArea --> 

        </div>
        <!-- Endof NumberSelectonContainer --> 
      </div>
      <!-- Endof NumberSelecton-->

      <div class="WinnerDetailsContainer">
        <div class="WinnersAdvancePlay">
          <div class="Footer"> </div>
        </div>
        <!-- Endof WinnersAdvancePlay --> 
      </div>
      <!-- Endof WinnerDetailsContainer --> 
    </div>
    <!-- Endof Class TicketContainer -->
    <div class="TicketContainer">
      <div class="Header">
        <div class="headerone"></div>
        <div class="headertwo"></div>
      </div>
      <div class="NumberTicketsContainer"> </div>
      <div class="NumberSelecton">
        <div class="NumberSelectonContainer">
          <div class="SelectionArea">
            <div class="SelectionAreaNumbers">
              <div class="GridNumber" >1</div>
              <div class="GridNumber" >2</div>
              <div class="GridNumber" >3</div>
              <div class="GridNumber" >4</div>
              <div class="GridNumber" >5</div>
              <div class="GridNumber" >6</div>
              <div class="GridNumber" >7</div>
              <div class="GridNumber" >8</div>
              <div class="GridNumber" >9</div>
              <div class="GridNumber" >10</div>
              <div class="GridNumber" >11</div>
              <div class="GridNumber" >12</div>
              <div class="GridNumber" >13</div>
              <div class="GridNumber" >14</div>
              <div class="GridNumber" >15</div>
              <div class="GridNumber" >16</div>
              <div class="GridNumber" >17</div>
              <div class="GridNumber" >18</div>
              <div class="GridNumber" >19</div>
              <div class="GridNumber" >20</div>
              <div class="GridNumber" >21</div>
              <div class="GridNumber" >22</div>
              <div class="GridNumber" >23</div>
              <div class="GridNumber" >24</div>
              <div class="GridNumber" >25</div>
              <div class="GridNumber" >26</div>
              <div class="GridNumber" >27</div>
              <div class="GridNumber" >28</div>
              <div class="GridNumber" >29</div>
              <div class="GridNumber" >30</div>
              <div class="GridNumber" >31</div>
              <div class="GridNumber" >32</div>
              <div class="GridNumber" >33</div>
              <div class="GridNumber" >34</div>
              <div class="GridNumber" >35</div>
              <div class="GridNumber" >36</div>
              <div class="GridNumber" >37</div>
              <div class="GridNumber" >38</div>
              <div class="GridNumber" >39</div>
              <div class="GridNumber" >40</div>
              <input type="text" name="LineNumbers[]" id="Line3Ball1" class="test" style="width:50px;" />
              <input type="text" name="LineNumbers[]" id="Line3Ball2" class="test" style="width:50px;" />
              <input type="text" name="LineNumbers[]" id="Line3Ball3" class="test" style="width:50px;" />
            </div>
            <!-- Endof SelectionAreaNumbers --> 
          </div>
          <!-- Endof SelectionArea --> 

        </div>
        <!-- Endof NumberSelectonContainer --> 
      </div>
      <!-- Endof NumberSelecton-->

      <div class="WinnerDetailsContainer">
        <div class="WinnersAdvancePlay">
          <div class="Footer"> </div>
        </div>
        <!-- Endof WinnersAdvancePlay --> 
      </div>
      <!-- Endof WinnerDetailsContainer --> 
    </div>
    <!-- Endof Class TicketContainer -->
    <div id="SubmitTickets">
      <p class="right">
        <input type="submit" name="SubmitTicketButton" id="SubmitTicketButton" class="SubmitTicketButton" value="Button" />
      </p>
    </div>
    <!-- Endof SubmitTickets -->
  </form>
</div>

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.

Your answer lead me to find what was wrong with the code. This by Stack Overflow definitions led me to the answer and I have accepted. Thank you for your effort ReSedano, and to the others too. (If you are interested, $this.toggleClass("selectednumber"); has to come first in the function, otherwise it counts 2 selectednumbers when actually 3 have been selected. A silly oversight on my part. The repetition also help to obstruct the true error)

Collectives™ on Stack Overflow

Trouble integrating PHP inside a jQuery script

Update

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Update

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related