如何在自调用jquery函数中获取php值?

1u4esq0p  于 5个月前  发布在  PHP
关注(0)|答案(5)|浏览(59)

我有一个页面,在foreach循环中生成n个链接:

...some html and php code

<?php foreach ($tables as $table):?>

... some elements generated ...

<td><a  onclick="setPortalId(<?php echo $table['id']?>);$('#fileupload').trigger('click');" class="btn-success btn-sm"><i class="icon-plus white bigger-125"></i>Add / Change</a></td>

... another elements ...

<?php endforeach;?>

字符串
正如你所看到的,每个链接中的onclick事件执行2个js函数,第一个函数设置一个js var,其php值为$table“id”],因为我需要这个值来确定我的zend路由,最后一个函数将输入文件上传到类型文件:

<input id="fileupload" type="file"  class="hidden" multiple="" name="files[]">


在我的剧本里有这样一段话:

<script src="/js/vendor/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for    XHR file uploads -->
<script src="/js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="/js/jquery.fileupload.js"></script>
<!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>            

<script>
var idPortal;

function setPortalId(valor) {
    idPortal = valor;
}


/*jslint unparam: true */
/*global window, $ */
$(function () {
 'use strict';
 // Change this to the location of your server-side upload handler:

var url = '/precos/upload/id/'+ idPortal;
$('#fileupload').fileupload({
    url: url,
    dataType: 'json',
    done: function (e, data) {
        $.each(data.result.files, function (index, file) {
            $('<p/>').text(file.name + " adicionado").appendTo('#files');
            window.alert(file.name + " Adicionado.");
        });
    },
    progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
            'width',
            progress + '%'
        );
    }
}).prop('disabled', !$.support.fileInput)
    .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>


我的问题是我怎样才能在最后一个自调用函数中得到点击链接的idPortal?有什么建议吗?

cidc1ykv

cidc1ykv1#

这是一个糟糕的设计。你应该尽量让你的JS不显眼,也就是说。不要使用像onclick这样的事件处理程序属性。通过JS附加事件处理程序。有时这是不切实际的,但我没有看到任何证据表明这是这样的情况。
我在PHP端要做的是添加一些类和一个数据属性,我可以从JS中挂钩:

<?php foreach ($tables as $table):?>
    <td>
        <a data-portal-id="<?php echo $table['id']?>" class="btn-success btn-sm btn-upload"><i class="icon-plus white bigger-125"></i>Add / Change</a>
    </td>
<?php endforeach;?>

字符串
现在在JS端,我将简单地从点击的链接中读取data-portal-id,使用它来设置文件上传器上的URL,然后触发点击以开始上传工作流:

$(selectorForTheTable).on('click', 'a[data-portal-id].btn-upload', function (e) {
    // pull the portalId from the link's data-portal-id attribute
    var portalId = $(this).data('portalId'),
        $uploader = $('#fileupload');
         
    // set the url for the upload based on out portalId
    $uploader.fileupload('option', 'url', '/precos/upload/id/'+ portalId);
    
    // invoke the click
    $('#fileupload').trigger('click');
});


这里缺少的一件事是,您可能希望设置一些东西,以便当上传器关闭或所有上传完成时,URL被设置回null或无关紧要的URL。这将有助于确保客户端上发生的错误不会错误地将文件上传到错误的端点。
Here is an example Fiddle可以像小提琴一样工作:-)

klsxnrf1

klsxnrf12#

你需要让你的url全局化,并在以后的上下文中更新它。

var idPortal;
var url;

function setPortalId(valor) {
   idPortal = valor;
   url = '/precos/upload/id/'+ idPortal;
}

字符串

hk8txs48

hk8txs483#

分离PHP(服务器端业务逻辑)和JavaScript(非业务关键型GUI增强器**)的最简单方法是将PHP中的所有变量放入DOM中,然后再使用它:

<script>
var phpValues = <?php echo json_encode($yourPhpValuesArrayOrObject); ?>;
</script>

....

<script>

字符串
与HTML内部的业务数据(=语义结构)相连接的属性应该使用前面提到的data-*属性。

bgibtngc

bgibtngc4#

你是在页面第一次加载时设置url,而不是在用户点击链接后。将其添加到setPortalId函数中:

function setPortalId(valor) {
    idPortal = valor;
    url = '/precos/upload/id/'+ idPortal;
}

字符串

gc0ot86w

gc0ot86w5#

谢谢大家,但我用另一种方法来获得正确的值点击element.like是说,该函数是自调用的页面加载,所以在这一刻的全局var仍然null.我作为使用blueimp jquery文件上传,所以阅读的文档我看到,是可能的发送另一个值在apply请求只是添加新闻输入的形式.与此我解决了我的问题.

相关问题