CODEWITHSUNDEEP
phpjavascriptjquery
Oterox
Oterox

Reputation: 658

jquery error NS_ERROR_XPC_BAD_CONVERT_JS: in FF works but not on Chrome

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?

Upvotes: 1

Views: 124

Answers (1)

andyb
andyb

Reputation: 43823

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.

Upvotes: 1

Related Questions