小编Cha*_*ynn的帖子

在新请求中中止先前的ajax请求

我有一个函数,在输入更改时运行ajax调用.

但是,在前一个ajax调用完成之前,有可能再次触发该函数.

我的问题是,在开始新的ajax调用之前,我将如何中止之前的ajax调用?不使用全局变量.(请参阅此处对类似问题的回答)

我当前代码的jsfiddle:

使用Javascript:

var filterCandidates = function(form){
    //Previous request needs to be aborted.
    var request = $.ajax({
        type: 'POST',
        url: '/echo/json/',
        data: {
            json: JSON.stringify({
                count: 1
            })
        },
        success: function(data){
            if(typeof data !== 'undefined'){
                jQuery('.count').text(data.count)
                console.log(data.count);
            }
        }
    });
};

if(jQuery('#search').length > 0){
    var form = jQuery('#search');
    jQuery(form).find(':input').change(function() {
        filterCandidates(form);
    });
    filterCandidates(form);
}
Run Code Online (Sandbox Code Playgroud)

HTML:

<form id="search" name="search">
    <input name="test" type="text" />
    <input name="testtwo" type="text" />
</form>
<span class="count"></span>
Run Code Online (Sandbox Code Playgroud)

javascript ajax jquery

67
推荐指数
3
解决办法
5万
查看次数

SVG相对于父<g>的位置文本

我需要相对于父母放置文本<g>.

目前,我有一个路径和一个文本元素包装在一个<g>.但是所有文本坐标都是相对于最外层的<g>.

<svg width="1000" height="550">
    <g transform="translate(500,275)" stroke-width="2" stroke="black">
        <g>
            <path d="M1.6838893488276108e-14,-275A275,275 0 0,1 238.15698604072065,137.49999999999994L0,0Z" id="path_0" style="fill: rgb(17, 17, 17);"></path>
            <text transform="translate(100, 100)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
        </g>
        <g>
            <path d="M238.15698604072065,137.49999999999994A275,275 0 0,1 -238.1569860407206,137.50000000000009L0,0Z" id="path_1" style="fill: rgb(34, 34, 34);"></path>
            <text transform="translate(100, 100)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
        </g>
        <g>
            <path d="M-238.1569860407206,137.50000000000009A275,275 0 0,1 -5.051668046482832e-14,-275L0,0Z" id="path_2" style="fill: rgb(51, 51, 51);"></path>
            <text transform="translate(100, 100)" class="tooltipText" stroke-width="0" fill="white" style="text-anchor: middle;">text</text>
        </g>
    </g>
</svg>
Run Code Online (Sandbox Code Playgroud)

svg

17
推荐指数
1
解决办法
2万
查看次数

Laravel 5在两列上有很多关系

是否可以在两列上建立hasMany关系?

我的表有两列,user_id和related_user_id.

我希望我的关系匹配任一列.

在我的模型中,我有

public function userRelations()
{
    return $this->hasMany('App\UserRelation');
}
Run Code Online (Sandbox Code Playgroud)

哪个运行查询:select * from user_relations where user_relations.user_id in ('17', '18').

我需要运行的查询是:

select * from user_relations where user_relations.user_id = 17 OR user_relations.related_user_id = 17 
Run Code Online (Sandbox Code Playgroud)

编辑:

我正在使用急切加载,我认为这会影响它的工作方式.

$cause = Cause::with('donations.user.userRelations')->where('active', '=', 1)->first();
Run Code Online (Sandbox Code Playgroud)

php laravel eloquent laravel-5

14
推荐指数
3
解决办法
2万
查看次数

Prestashop Guzzle冲突

我正在通过包含使用 6.0 的包来更新模块.

Prestashop 1.7使用较旧版本的Guzzle 5.

当我在Prestashop上安装插件时,包含的Guzzle版本与Prestashop冲突,导致以下错误.

未捕获的PHP异常InvalidArgumentException:"魔术请求方法需要URI和可选的选项数组"在/var/www/html/modules/package/vendorpackage/guzzlehttp/guzzle/src/Client.php第81行{"exception":"[object ](InvalidArgumentException(code:0):魔术请求方法需要在/var/www/html/modules/package/vendorpackage/guzzlehttp/guzzle/src/Client.php:81)"} []中的URI和可选选项数组

我找到了一些类似问题的其他例子:

基于这些,我对如何解决这个问题有一些想法.这些都不是正确的做法.当然有一种更清晰的方法来处理像这样的问题?

  • 从包含的包中删除Guzzle - 这是最简单的一个,我的问题是如果我删除这个依赖关系它停止了什么,说什么其他依赖关系不会在以后删除不能删除的行?

  • 可以检查Guzzle的包版本和交换调用取决于哪一个加载 - 类似于上面的问题我可以修复以确定我应该使用哪种类型的调用此错误,但我不能告诉其他问题这可能加注,我的代码最终可能会出现每个版本的语句.

  • 手动更改插件中guzzle的名称空间.所以我可以进入我的包的vendor文件夹并为包强制一个特定的命名空间,我猜这将解决我的问题,但我正在失去安装可重用包的重点.

  • Fork Guzzle并参考该版本.我可以将guzzle插入并将其作为VCS包包含在插件中.这里的问题是我必须继续保持前进.

php prestashop composer-php guzzle prestashop-1.7

8
推荐指数
1
解决办法
570
查看次数

重新调整大小调整容器内的网格项目,使一个tile保持不变

我有一个网格,设计有固定的宽度和高度.见下图.

在此输入图像描述

此网格必须适用于所有屏幕尺寸,同时将网格中的项目保持在相同位置.

我的代码目前根据设计的原始宽度/高度调整这些项目的大小,并使它们适合新的宽度/高度.

虽然它们在下面的示例中没有正确定位,但计算确实有效.

我遇到的困难是,我需要中心网格图块(504x504)是静态的,其他要考虑的是调整.

目前所有项目,包括中心调整,我只想停止中心调整,其他项目删除/添加差异到他们的宽度/高度.

这是一个棘手的解释,让我知道我是否可以添加更多细节.

const initalWidth = 1043;
const initialHeight = 708;

const resize = (baseDimension, newDimension, itemDimension) => {
  const diff = ((baseDimension - newDimension) / baseDimension) * 100;

  return (Math.ceil(diff) / 100) * itemDimension;
}


const update = () => {
  const newWidth = jQuery(document).width();
  const newHeight = jQuery(document).height();

  jQuery('.grid').css({
    width: newWidth,
    height: newHeight
  })
  
  jQuery('.grid-item').each((i, item) => {
    const itemWidth = jQuery(item).data('width');
    const itemHeight = jQuery(item).data('height');

    const widthDiff = resize(initalWidth, newWidth, itemWidth);
    const heightDiff …
Run Code Online (Sandbox Code Playgroud)

javascript css jquery

6
推荐指数
1
解决办法
627
查看次数

JavaScript 日期比较在 IE8 中失败

我有一个函数可以将日期从 DD/MM/YYYY 转换为 YYYY-MM-DD。

这适用于除 IE8 之外的所有浏览器,出于某种原因,当创建新的 Date 对象时,它返回 NaN。

代码的基本实现 http://jsfiddle.net/bX83c/1/

var compareDate = function(value){
    var dateFragements = value.split('/');
    if (dateFragements.length == 3) {
        var currentDate = new Date();
            currentDate.setHours(0, 0, 0, 0);

        var startDate = new Date(dateFragements[2] + '-' + dateFragements[1] + '-' + dateFragements[0]);

        if (startDate >= currentDate) {
            return true;
        } else {
            return false;
        }
    }   
}
alert(compareDate('17/09/2013'));
Run Code Online (Sandbox Code Playgroud)

javascript date internet-explorer-8 date-comparison

5
推荐指数
1
解决办法
2674
查看次数

HTML 5视频js更新源并在加载后播放

我正在尝试使用Video.js更改HTML 5视频的来源.

来源正在改变,我可以点击播放,它将播放视频,但我需要视频播放一个事件.特别是这个loadedalldata事件.

我已经阅读了api文档并且它表明,我所做的事情应该起作用(根据我的理解).

使用Javascript:

var player = _V_('video'),
    video = [{
        "type": "video\/mp4",
        "src": "http:\/\/mabuse.dev\/assets\/videos\/testVideo.mp4"
    }, {
        "type": "video\/webm",
        "src": "http:\/\/mabuse.dev\/assets\/videos\/testVideo.webm"
    }, {
        "type": "video\/ogg",
        "src": "http:\/\/mabuse.dev\/assets\/videos\/testVideo.ogv"
    }, {
        "type": "video\/flv",
        "src": "http:\/\/mabuse.dev\/assets\/videos\/testVideo.flv"
    }];

/* Add sources to new player */
player.src(video);

/* Remove loader & play video once loaded */
player.on("loadedalldata", function(){
    console.log('test');
    //app.player.play();
});
Run Code Online (Sandbox Code Playgroud)

HTML:

<video class="video-js" id="video" controls preload="none" width="572" height="356" data-setup="{}"></video>
Run Code Online (Sandbox Code Playgroud)

javascript video html5 video.js

5
推荐指数
1
解决办法
1215
查看次数

Laravel 4 Artisan从表中删除现有列

我创建了一个迁移脚本,用于创建一个名为Archives的表.

它有4列不包括时间戳/增量.表格列是名称,标题,内容和图像.

我需要删除不再需要的图像列.

我无法通过搜索找到一种方法来做到这一点,并希望有人能给我最好的方法来做到这一点.

我尝试通过创建新的迁移然后运行来实现此目的

php artisan migrate:rollback --pretend

但这会尝试回滚先前的迁移.

class DropImageColumnArchive extends Migration
{

    /**
     * Run the migrations.
     * @return void
     */
    public function up()
    {
        Schema::table('archives', function ($table) {
            $table->text('image');
        });
    }

    /**
     * Reverse the migrations.
     * @return void
     */
    public function down()
    {
        Schema::table('archives', function ($table) {
            $table->drop_column('image');
        });
    }
}
Run Code Online (Sandbox Code Playgroud)

php laravel-4

5
推荐指数
1
解决办法
8407
查看次数

Laravel 5 Validation唯一传递变量占位符

是否有可能将唯一的验证方法传递给where变量的子句?

下面是一个例子:

在我的模型中,我有我的验证规则.

public static $rules = array(
    'amount'    => 'required|numeric',
    'user_id'   => 'required|exists:users,id',
    'cause_id'  => 'required|exists:causes,id',
    'circle_id' => 'required|unique:donations,circle_id,NULL,id,cause_id,:cause_id',
);
Run Code Online (Sandbox Code Playgroud)

然后在我的控制器中运行:

$input = array(
    'amount'    => Input::get('amount'),
    'user_id'   => $this->currentUser->id,
    'cause_id'  => $cause->id,
    'circle_id' => Input::get('circle_id')
);

$validator = Validator::make($input, Donation::$rules);
Run Code Online (Sandbox Code Playgroud)

如何在不连接验证规则的情况下获取cause_id?正如您在rules数组中看到的那样,我尝试了PDO样式:占位符,但查询执行如下: select count(*) as aggregate from donations where circle_id = '500' and cause_id = ':cause_id'

php validation laravel laravel-5

5
推荐指数
1
解决办法
3154
查看次数

AngularJS滚动到元素可防止浏览器跳转

我写了一个包含块列表的应用程序.

每个块包含指向其他块的链接.当点击一个块的链接,例如#/ home/page-19时,该页面根据当前位置向下/向上动画.

这一切目前都有效但是当点击锚点并且路线更新时,浏览器跳到顶部然后动画下来,我需要它从当前位置动画.

我写了一个指令,将preventDefault添加到所有锚点.

请参阅下面的JS小提琴. http://jsfiddle.net/ygNWF/10/

剥离代码:

HTML:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>

<body ng-app="app" ng-controller="appController">
    <script type="text/ng-template" id="home-template">
       <div class="page" id="page-17" >
              <div class="page-inner" ng-style="style()" resize><a href="#/home/page-18">Page 18</a></div>
          </div>
          <div class="page" id="page-18">
              <div class="page-inner" ng-style="style()" resize><a href="#/home/page-19">Page 19</a></div>
          </div>
          <div class="page" id="page-19">
              <div class="page-inner" ng-style="style()" resize><a href="#/home/page-20">Page 20</a></div>
          </div>
          <div class="page" id="page-20">
              <div class="page-inner" ng-style="style()" resize><a href="#/home/page-17">Page 17</a></div>
          </div>
    </script>

    <div class="wrapper">
      <div class="view" ng-view scroll></div>
    </div>
</body>
Run Code Online (Sandbox Code Playgroud)

JavaScript的:

var app = angular.module('app', []);

/*
  Controllers
*/
app.controller( 'appController', …
Run Code Online (Sandbox Code Playgroud)

jquery angularjs angularjs-directive angularjs-routing

4
推荐指数
1
解决办法
2490
查看次数