javascript code does not run with x-tmpl or x-jQuery-tmpl template

Question

I Have this template for (xupload) blueimp plugin:

<script id="template-upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
    <td class="preview"><span class="fade"></span></td>
    <td class="title"><label>Title: <input type="text" name="title" required></label></td>
    <td class="name"><span>{%=file.name%}</span></td>
    <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
    {% if (file.error) { %}
        <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
    {% } else if (o.files.valid && !i) { %}
        <td>
            <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
        </td>
        <td class="start">{% if (!o.options.autoUpload) { %}
            <button class="btn btn-primary">
                <i class="icon-upload icon-white"></i>
                <span>Start</span>
            </button>
        {% } %}</td>
    {% } else { %}
        <td colspan="2"></td>
    {% } %}
    <td class="cancel">{% if (!i) { %}
        <button class="btn btn-warning">
            <i class="icon-ban-circle icon-white"></i>
            <span>Cancel</span>
        </button>
    {% } %}</td>
</tr>
{% } %}
</script>

I am trying to run this javascript code, it doesnt work, but when i run it inside console for firbug its work, what is the way to make it run when page load complete

<script type="text/javascript">
jQuery(document).ready(function(){
    $("input[type=text]").focus(function(){
        alert('some text');
    });
});
</script>

In my case, I am using yii extension (select2) this extension generate javascript select:

<script id="template-upload" type="text/x-jQuery-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
<tr class="template-upload fade">
    <td class="preview">
        <span class="fade"></span>
    </td>
    {% if (file.error) { %}
        <td class="error" colspan="2"><span class="label label-important">Error</span> {%=file.error%}</td>
    {% } else if (o.files.valid && !i) { %}
        <td>
            <label><?php echo CHtml::label('Keywords', 'keywords'); ?></label>
            <?php
                echo CHtml::textField('tags',$selected,array('id'=>'tags'));
                $this->widget('ext.select2.ESelect2',array(
                  'selector'=>'#tags',
                  'options'=>array(
                    'tags'=>$tags,
                    'width'=>'400px;',
                  ),
                ));
            ?>
        </td>
        <td>
            <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
        </td>
        <td class="start">{% if (!o.options.autoUpload) { %}
            <button class="btn btn-primary">
                <i class="icon-upload icon-white"></i>
                <span>Start</span>
            </button>
        {% } %}</td>
    {% } else { %}
        <td colspan="2"></td>
    {% } %}
    <td class="cancel">{% if (!i) { %}
        <button class="btn btn-warning">
            <i class="icon-ban-circle icon-white"></i>
            <span>Cancel</span>
        </button>
    {% } %}</td>
</tr>
{% } %}
</script>

i tryed to put this javascript before and after the template, still same, its work when i run it using firebug console — user1942792, Mar 12 '13 at 08:11
then call the function after appening the dynamically generated input.. can you post the appended part of the input here — bipen, Mar 12 '13 at 08:17
you can see the code in my project, i just edit on the code above — user1942792, Mar 12 '13 at 08:35

score 0 · Answer 1 · edited Feb 16 '20 at 08:10

Sorry, there is a high grade of asynchronous Problems.

MVC There are two MVCs encapsuled (what is ok),

Primary is DB (Model), HTML(View), PHP(Controller) - Server-side.
Secondary is JSON/AJAX(Model), Template(View), JavaScript(Controller) - Client-side.

The first MVC is ok, the second is bad practice.

You call Model from primary MVC in secondary-view static - instead of lead it from primary-MVC through secondary-controller(Javascript) to the secondary-view!
alert("some text"); is bound once (at the first visit of this page) to all input-fields that are visible (input's in templates are not attached). Please understand that this code does not trigger "alert" to input-texts that later gets rendered.

Generally, you will be succeeded by separate the Primary-PHP from the Secondary-Template, therefore you must lead the information through Primary-Controller, Primary-View, Secondary-Model, Secondary-Controller to the Secondary-View!

I know this is a lot of work but the only way to clean up.

javascript code does not run with x-tmpl or x-jQuery-tmpl template

1 Answers1