0

I'm trying to create a button which dynamically add input and since I'm using Zend framework I use this method to get the input from the Form file : <?php echo $this->formm->getElement('refA'); ?>

but I get this error : Uncaught SyntaxError: Unexpected identifier

and the jquery function for that add button is : 

$(document).ready(function (){
    var j = "<?php echo $this->formm->getElement('refA'); ?>";
    $("#add-more").click(function(){   
        $(".row").append(j);
    });
});

and when I click on that error it shows me where I have the error it seems like that it uses: 

$(document).ready(function (){
    var j = "<label for="refA" class="optional">Article:</label>
             <select name="refA" id="refA" class="form-control">
               <option value="test1" label="test1">test1</option>
             </select>";
    $("#add-more").click(function(){   
        $(".row").append(j);
    });  
});

is it possible to get the code generated in single line so I can make the button to work ?

Ermenegildo
  • 1,286
  • 1
  • 12
  • 19
kkee
  • 15
  • 6

2 Answers2

1

Looks like it's a quoting issue - the data that PHP is chucking in there has double quotes which keep terminating your string. Try wrapping it in single quotes - with escapes for refA:


$(document).ready(function (){
    var j = '<?php echo $this->formm->getElement(\'refA\'); ?>';
    $("#add-more").click(function(){   
        $(".row").append(j);
    });
});

Ok, after doing some more digging, you need to get those quotes and spaces out before it. Unfortunately, I'm not a PHP guy - so I'm hoping that the syntax is right - the idea, is to get the data from refA and store it in $message - then get rid of any spaces and escape any quotes, then echo the value out to be set as 'j':

$(document).ready(function (){
   var j = '<?php $message = $this->formm->getElement("refA"); $message = preg_replace("/\r?\n/", "\\n", addslashes($message));echo $message?>'
   $("#add-more").click(function(){   
       $(".row").append(j);
   });
});

PHP methods found here: https://www.the-art-of-web.com/php/javascript-escape/

Another option that would completely take care of the issue would be to use es6 - template-strings (back-ticks) 


$(document).ready(function (){
    var j = `<?php echo $this->formm->getElement("refA"); ?>`;
    $("#add-more").click(function(){   
        $(".row").append(j);
    });
});

most modern browsers will nativity handle es6 Template Strings

Kyle
  • 1,463
  • 1
  • 12
  • 18
  • I tried it but it shows me this on visual studio code : syntax error, unexpected ''refA\'); ?>'' (T_CONSTANT_ENCAPSED_STRING), expecting identifier (T_STRING) – kkee Sep 06 '19 at 19:27
  • did you wrap the entire line in single quotes. then add the \ escape character in front and behind the refA? from that error it looks like you only escape the second one - as in instead of "refA" --- switch to \'refA\' - Let me know if that does the trick – Kyle Sep 06 '19 at 20:03
  • JS code is rendered client side, while PHP is rendered server side. Therefore, the quotes inside PHP **must not** be escaped. – Ermenegildo Sep 06 '19 at 21:03
  • I tried it but I got this : Uncaught ReferenceError: $ is not defined – kkee Sep 11 '19 at 12:36
  • aren't you using jQuery? – Andy Sep 12 '19 at 20:13
  • @Andy yes, he's using jQuery, but more than likely, he's loading it at the end of the page, while this snippet is places in the middle of the content (when jQuery hasn't still be defined) – Ermenegildo Sep 13 '19 at 09:41
  • @Kyle I really like the solution with template strings. I'm not using JS a lot and this is the first time I see them. I learned something, thanks! :) – Ermenegildo Sep 13 '19 at 09:42
  • @KhalilElhazmiri -- if this answer worked for you, could you please mark it as an accepted answer? – Andy Sep 14 '19 at 00:26
0

As said by Kyle, you're facing a quoting issue. But, unlike what he said, quotes inside PHP tag must not be escaped, since they are rendered server side.

This should do the trick: 

window.onload = function() {
    $(document).ready(function (){
        var j = '<?php echo  preg_replace("/\r|\n/", "", $this->formm->getElement('refA')); ?>';
        $("#add-more").click(function(){   
            $(".row").append(j);
        });
    });
}

Edit: looking at your screenshots and other comments, it seems that you are trying to access jQuery ($) before loading (I suppose you are loading all the JS dependencies at the end of the layout). Since you can't use PHP code in JS files, you have two options:

  1. You create a JS variable inside your template (ajouter.phtml), like var inputTemplate = <?php echo preg_replace(....);?>;, and use that variable in your JS file
  2. You make sure that that JS snippet is executed only when the page has been fully loaded (hence the use of window.onload = function(){}

Personally, I'd suggest you the first option. Inserting JS code inside the phtml is conceptually wrong, because if you somehow you decide to not use jQuery anymore, you won't have to go inside all templates to find those snippets.

Ermenegildo
  • 1,286
  • 1
  • 12
  • 19
  • Which error are you getting? If you are getting `T_CONSTANT_ENCAPSED_STRING`, please **check** that you are not escaping `refA` quotes. – Ermenegildo Sep 06 '19 at 22:12
  • in visual studio I don't get any error but I getting that Uncaught SyntaxError: Unexpected identifier error – kkee Sep 06 '19 at 22:19
  • Can you post the full error with its stack? and show the exact code that is generating that error? – Ermenegildo Sep 07 '19 at 08:12
  • "full error with its stack", not just the error message. – Ermenegildo Sep 10 '19 at 12:54
  • plus: "show the exact code that is generating that error" – Ermenegildo Sep 10 '19 at 12:55
  • this is the code that generating the error " formm->getElement('refA'); ?>" because normally this php code generate the form with – kkee Sep 10 '19 at 23:17
  • jQuery/JavaScript has nothing to do in this, if you are getting PHP Error. I repeat: can you please post the *full stack* error and the *exact* code that generate it? Because I tested the snippet I gave you, and it works. If I modify the snippet and I escape the quote, I get that error, but with a full stack, so.... Let us help you. – Ermenegildo Sep 11 '19 at 06:53
  • what is the stack I'm a quite beginner on this sorry ? – kkee Sep 11 '19 at 12:29
  • Join this chat: https://chat.stackoverflow.com/rooms/199313/how-can-i-get-the-code-to-be-in-single-line-when-viewing-the-source-code – Ermenegildo Sep 11 '19 at 13:05
  • I should have 20 reputation to chat give me your facebook so we can see the problem – kkee Sep 11 '19 at 22:49
  • Could you post a screenshot of the error page? and the screenshot of your code. – Ermenegildo Sep 12 '19 at 08:32
  • for the source code that the screenshot of it : https://imgur.com/QbTktXO / and for the error here is the screenshot : https://imgur.com/PQO2sBM / and where I have the error screenshot : https://imgur.com/UAEB0YN – kkee Sep 12 '19 at 13:24
  • The error shown in the screenshot isn't the one you said. You talked about `T_CONSTANT_ENCAPSED_STRING`, but there you are getting a js error. Take a look to the edited code. – Ermenegildo Sep 13 '19 at 09:28