jquery error NS_ERROR_XPC_BAD_CONVERT_JS: in FF works but not on Chrome

Question

I'm using jquery for adding fields to a form, "repeatable" fields with "add more" button

The code is

       $(".add-attacker-scores").click(function() { 

            count = count + 1;

            $('#atacker_score_items').append('<li><span class="sort hndle"><label>team :<input type="text" name="attacker_scores[' + count + '][team]" size="30" value=""/></label><label>flags :<input type="text" name="attacker_scores[' + count + '][flags]" size="10" value=""/></label><label>phone homes :<input type="text" name="attacker_scores[' + count + '][phone]" size="10" value=""/></label><label>Injects :<input type="text" name="attacker_scores[' + count + '][injects]" size="10" value=""/></label><span class="remove">Remove</span></li>');

            var temp = <? echo implode('',explode("\n",Print_attacker_scores('count') )); ?>;
                temp = temp.replace(/count/g, count);
                $('#atacker_score_items').append(temp);

            return false;
        });

The code for Print_attacker_scores is

function Print_attacker_scores($cnt, $p = null) {
if ($p === null){
    $a = $b = $c = $d = '';
}else{
    $a = $p['team'];
    $b = $p['flags'];
    $c = $p['phone'];
    $d = $p['injects'];
}
return  <<<HTML
<li><span class="sort hndle"></span>
    <label>team :
    <input type="text" name="attacker_scores[$cnt][team]" size="30" value="$a"/>
    </label>

    <label>flags :
    <input type="text" name="attacker_scores[$cnt][flags]" size="10" value="$b"/></label>

    <label>phone homes :
    <input type="text" name="attacker_scores[$cnt][phone]" size="10" value="$c"/></label>

    <label>injects :
    <input type="text" name="attacker_scores[$cnt][injects]" size="10" value="$d"/></label>

    <span class="remove">Remove</span>
</li>
HTML
;
}

In firefox its working but in chrome it doesn't work.

Then i realized that it throws an error: NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild]

Why is happening this? I've copied the code from around the web but i can fix it because i don't understand this lines:

var temp = <? echo implode('',explode("\n",Print_attacker_scores('count') )); ?>;
                temp = temp.replace(/count/g, count);

so this is reading the html generated by the Print_scores_function and creating an array with each line.Then generates a string with all the items in the array. Then replaces the count number¿? i don't understand why it is doing this. Maybe there's a another way of doing it more simple?

(/count/g, count) is a regular expression?

What am i doing wrong?

Need a little more info in order to help... Is `#atacker_score_items` an `
` or `
`? — andyb, Nov 26 '12 at 16:31
So you do know that the JavaScript contains PHP and this must be interpreted by a Web server with a PHP processor module? The `echo` line is PHP. Commenting that out and leaving the first `$('#atacker_score_items').append(...)` seems to work as expected in Chrome - see [**demo**](http://jsfiddle.net/xjwr9/) — andyb, Nov 26 '12 at 16:44
sure, its a wp website and this code goes in the admin area.i removed these lines before but it still doesn't work — Oterox, Nov 26 '12 at 17:15
removing these lines throws now this error: SyntaxError: invalid label flags : — Oterox, Nov 26 '12 at 17:28

score 1 · Accepted Answer · edited May 23 '17 at 12:04

This is not a complete answer since I cannot reproduce the jQuery error. However as it stands you seem to be calling PHP from JavaScript which will not work since the scripting languages exist on different parts of the stack.

As I see it, there are two ways of doing this.

The PHP way

Have a PHP file which generates the JavaScript function like so:

<?php
function Print_attacker_scores($cnt, $p = null) {
  if ($p === null){
    $a = $b = $c = $d = '';
  } else{
    $a = $p['team'];
    $b = $p['flags'];
    $c = $p['phone'];
    $d = $p['injects'];
  }

  $html = <<<HTML
<li><span class="sort hndle"></span>
<label>team :<input type="text" name="attacker_scores[$cnt][team]" size="30" value="$a"/></label>
<label>flags :<input type="text" name="attacker_scores[$cnt][flags]" size="10" value="$b"/></label>
<label>phone homes :<input type="text" name="attacker_scores[$cnt][phone]" size="10" value="$c"/></label>
<label>injects :<input type="text" name="attacker_scores[$cnt][injects]" size="10" value="$d"/></label>
<span class="remove">Remove</span>
</li>
HTML;

  return preg_replace('/\s\s+/', ' ', $html);
}
?>
<script type="text/javascript">
var count = 0;

$(".add-attacker-scores").click(function() {
  count++;

  var temp = '<? echo Print_attacker_scores('count'); ?>';
  temp = temp.replace(/count/g, count);
  $('#atacker_score_items').append(temp);

    return false;
});
</script>

where I have added quotes around the var temp = assignment since you require the markup as a JavaScript string. The function now also removes any newlines since the function was returning an invalid multi-line JavaScript string - see Remove new lines from string

You are correct that the temp.replace(/count/g, count) is replacing all occurrences (the g part) of the word "count" with the JavaScript variable count, which is incremented each time the function is called.

This PHP script, when served by a Web server with a PHP processor module results in the valid JavaScript:

<script type="text/javascript">
var count = 0;
$(".add-attacker-scores").click(function() {
  count ++;

  var temp = '<li><span class="sort hndle"></span> <label>team :<input type="text" name="attacker_scores[count][team]" size="30" value=""/></label> <label>flags :<input type="text" name="attacker_scores[count][flags]" size="10" value=""/></label> <label>phone homes :<input type="text" name="attacker_scores[count][phone]" size="10" value=""/></label> <label>injects :<input type="text" name="attacker_scores[count][injects]" size="10" value=""/></label> <span class="remove">Remove</span> </li>';
  temp = temp.replace(/count/g, count);
  $('#atacker_score_items').append(temp);

    return false;
});
</script>

that I have used with the HTML

<ul id="atacker_score_items" class="custom_repeatable ui-sortable"></ul>
<a href="#" class="add-attacker-scores">add more</a>

to create this demo

The (pure) JavaScript way

Use your existing function which already contains the generated HTML and handles the "count" → number variable replacement. In this version you do not need the PHP function call or regular expression.

var count = 0;

$(".add-attacker-scores").click(function() { 
    count++;

    $('#atacker_score_items').append('<li><span class="sort hndle"><label>team :<input type="text" name="attacker_scores[' + count + '][team]" size="30" value=""/></label><label>flags :<input type="text" name="attacker_scores[' + count + '][flags]" size="10" value=""/></label><label>phone homes :<input type="text" name="attacker_scores[' + count + '][phone]" size="10" value=""/></label><label>Injects :<input type="text" name="attacker_scores[' + count + '][injects]" size="10" value=""/></label><span class="remove">Remove</span></li>');

    return false;
});

Hope this helps! Please let me know if you are still getting the JavaScript error as I could not reproduce the problem.

it works perfect!!!! Now the wordpress admin section i was working on works like a charm.Awesome, thank you very much :) — Oterox, Nov 26 '12 at 21:14
Ah, sorry I did not explain that. It's a ["Here-Document"](http://en.wikipedia.org/wiki/Here_document), or more commonly known as PHP [heredoc](http://www.php.net/manual/en/language.types.string.php#language.types.string.syntax.heredoc) - a convenient way of specifying a string literal — andyb, Nov 26 '12 at 22:24

jquery error NS_ERROR_XPC_BAD_CONVERT_JS: in FF works but not on Chrome

1 Answers1