mirror of
				https://github.com/bigskysoftware/htmx.git
				synced 2025-11-04 07:24:06 +00:00 
			
		
		
		
	Allow 'unset' directive for hx-vals and hx-vars (#1013)
* Allow 'unset' directive for hx-vals and hx-vars * PR feedback Co-authored-by: Ben Lenton <benlenton@Bens-MacBook-Air.local>
This commit is contained in:
		
							parent
							
								
									7338d567dc
								
							
						
					
					
						commit
						c3662ce00d
					
				@ -2419,6 +2419,9 @@ return (function () {
 | 
			
		||||
            if (attributeValue) {
 | 
			
		||||
                var str = attributeValue.trim();
 | 
			
		||||
                var evaluateValue = evalAsDefault;
 | 
			
		||||
                if (str === "unset") {
 | 
			
		||||
                    return null;
 | 
			
		||||
                }
 | 
			
		||||
                if (str.indexOf("javascript:") === 0) {
 | 
			
		||||
                    str = str.substr(11);
 | 
			
		||||
                    evaluateValue = true;
 | 
			
		||||
@ -3294,4 +3297,3 @@ return (function () {
 | 
			
		||||
    }
 | 
			
		||||
)()
 | 
			
		||||
}));
 | 
			
		||||
 | 
			
		||||
 | 
			
		||||
@ -184,5 +184,72 @@ describe("hx-vals attribute", function() {
 | 
			
		||||
        div.innerHTML.should.equal("Clicked!");
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    it('basic hx-vals can be unset', function () {
 | 
			
		||||
        this.server.respondWith("POST", "/vars", function (xhr) {
 | 
			
		||||
            var params = getParameters(xhr);
 | 
			
		||||
            params.should.be.empty;
 | 
			
		||||
            xhr.respond(200, {}, "Clicked!")
 | 
			
		||||
        });
 | 
			
		||||
        make(
 | 
			
		||||
            "<div hx-vals='\"i1\":\"test\"'>\
 | 
			
		||||
                <div id='d1' hx-post='/vars' hx-vals='unset'></div>\
 | 
			
		||||
            </div>"
 | 
			
		||||
        );
 | 
			
		||||
        var div = byId("d1");
 | 
			
		||||
        div.click();
 | 
			
		||||
        this.server.respond();
 | 
			
		||||
        div.innerHTML.should.equal("Clicked!");
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    it('basic hx-vals with braces can be unset', function () {
 | 
			
		||||
        this.server.respondWith("POST", "/vars", function (xhr) {
 | 
			
		||||
            var params = getParameters(xhr);
 | 
			
		||||
            params.should.be.empty;
 | 
			
		||||
            xhr.respond(200, {}, "Clicked!")
 | 
			
		||||
        });
 | 
			
		||||
        make(
 | 
			
		||||
            "<div hx-vals='{\"i1\":\"test\"}'>\
 | 
			
		||||
                <div id='d1' hx-post='/vars' hx-vals='unset'></div>\
 | 
			
		||||
            </div>"
 | 
			
		||||
        );
 | 
			
		||||
        var div = byId("d1");
 | 
			
		||||
        div.click();
 | 
			
		||||
        this.server.respond();
 | 
			
		||||
        div.innerHTML.should.equal("Clicked!");
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    it('multiple hx-vals can be unset', function () {
 | 
			
		||||
        this.server.respondWith("POST", "/vars", function (xhr) {
 | 
			
		||||
            var params = getParameters(xhr);
 | 
			
		||||
            params.should.be.empty;
 | 
			
		||||
            xhr.respond(200, {}, "Clicked!")
 | 
			
		||||
        });
 | 
			
		||||
        make(
 | 
			
		||||
            "<div hx-vals='\"v1\":\"test\", \"v2\":42'>\
 | 
			
		||||
                <div id='d1' hx-post='/vars' hx-vals='unset'></div>\
 | 
			
		||||
            </div>"
 | 
			
		||||
        );
 | 
			
		||||
        var div = byId("d1");
 | 
			
		||||
        div.click();
 | 
			
		||||
        this.server.respond();
 | 
			
		||||
        div.innerHTML.should.equal("Clicked!");
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    it('unsetting hx-vals maintains input values', function () {
 | 
			
		||||
        this.server.respondWith("POST", "/include", function (xhr) {
 | 
			
		||||
            var params = getParameters(xhr);
 | 
			
		||||
            params['i1'].should.equal("test");
 | 
			
		||||
            xhr.respond(200, {}, "Clicked!")
 | 
			
		||||
        });
 | 
			
		||||
        var div = make(
 | 
			
		||||
            "<div hx-target='this' hx-vals='\"i1\":\"best\"'>\
 | 
			
		||||
                <input hx-post='/include' hx-vals='unset' hx-trigger='click' id='i1' name='i1' value='test'/>\
 | 
			
		||||
            </div>"
 | 
			
		||||
        )
 | 
			
		||||
        var input = byId("i1")
 | 
			
		||||
        input.click();
 | 
			
		||||
        this.server.respond();
 | 
			
		||||
        div.innerHTML.should.equal("Clicked!");
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
});
 | 
			
		||||
@ -84,4 +84,72 @@ describe("hx-vars attribute", function() {
 | 
			
		||||
        div.innerHTML.should.equal("Clicked!");
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    it('basic hx-vars can be unset', function () {
 | 
			
		||||
        this.server.respondWith("POST", "/vars", function (xhr) {
 | 
			
		||||
            var params = getParameters(xhr);
 | 
			
		||||
            params.should.be.empty;
 | 
			
		||||
            xhr.respond(200, {}, "Clicked!")
 | 
			
		||||
        });
 | 
			
		||||
        make(
 | 
			
		||||
            "<div hx-vars='i1:\"test\"'>\
 | 
			
		||||
                <div id='d1' hx-post='/vars' hx-vars='unset'></div>\
 | 
			
		||||
            </div>"
 | 
			
		||||
        );
 | 
			
		||||
        var div = byId("d1");
 | 
			
		||||
        div.click();
 | 
			
		||||
        this.server.respond();
 | 
			
		||||
        div.innerHTML.should.equal("Clicked!");
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    it('basic hx-vars with braces can be unset', function () {
 | 
			
		||||
        this.server.respondWith("POST", "/vars", function (xhr) {
 | 
			
		||||
            var params = getParameters(xhr);
 | 
			
		||||
            params.should.be.empty;
 | 
			
		||||
            xhr.respond(200, {}, "Clicked!")
 | 
			
		||||
        });
 | 
			
		||||
        make(
 | 
			
		||||
            "<div hx-vars='{i1:\"test\"}'>\
 | 
			
		||||
                <div id='d1' hx-post='/vars' hx-vars='unset'></div>\
 | 
			
		||||
            </div>"
 | 
			
		||||
        );
 | 
			
		||||
        var div = byId("d1");
 | 
			
		||||
        div.click();
 | 
			
		||||
        this.server.respond();
 | 
			
		||||
        div.innerHTML.should.equal("Clicked!");
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    it('multiple hx-vars can be unset', function () {
 | 
			
		||||
        this.server.respondWith("POST", "/vars", function (xhr) {
 | 
			
		||||
            var params = getParameters(xhr);
 | 
			
		||||
            params.should.be.empty;
 | 
			
		||||
            xhr.respond(200, {}, "Clicked!")
 | 
			
		||||
        });
 | 
			
		||||
        make(
 | 
			
		||||
            "<div hx-vars='v1:\"test\", v2:42'>\
 | 
			
		||||
                <div id='d1' hx-post='/vars' hx-vars='unset'></div>\
 | 
			
		||||
            </div>"
 | 
			
		||||
        );
 | 
			
		||||
        var div = byId("d1");
 | 
			
		||||
        div.click();
 | 
			
		||||
        this.server.respond();
 | 
			
		||||
        div.innerHTML.should.equal("Clicked!");
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
    it('unsetting hx-vars maintains input values', function () {
 | 
			
		||||
        this.server.respondWith("POST", "/include", function (xhr) {
 | 
			
		||||
            var params = getParameters(xhr);
 | 
			
		||||
            params['i1'].should.equal("test");
 | 
			
		||||
            xhr.respond(200, {}, "Clicked!")
 | 
			
		||||
        });
 | 
			
		||||
        var div = make(
 | 
			
		||||
            "<div hx-target='this' hx-vars='i1:\"best\"'>\
 | 
			
		||||
                <input hx-post='/include' hx-vars='unset' hx-trigger='click' id='i1' name='i1' value='test'/>\
 | 
			
		||||
            </div>"
 | 
			
		||||
        )
 | 
			
		||||
        var input = byId("i1")
 | 
			
		||||
        input.click();
 | 
			
		||||
        this.server.respond();
 | 
			
		||||
        div.innerHTML.should.equal("Clicked!");
 | 
			
		||||
    });
 | 
			
		||||
 | 
			
		||||
});
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user