Použití zaškrtnutého checkboxu při kliknutí na button

Freestyler

Ahoj,
řeším tento návrh: http://snag.gy/ZDgte.jpg a bádám nad tím, jak zjistit, který checkbox je zaškrtnutý a jak z něj pak vytáhnout id článku (původně jsem to tahal z url, ale to byl trošku jiný návrh, teď bych rád checkboxy)

Funkce pro přidání, editaci a smazání článku už mám hotové, jen nevím, jak na to navázat nějakou akci.

Obejdu se bez jQuery nebo Javascriptu? Tam totiž těžce netuším :(.

Díky.

Northys

A co takhle něco takového?

$(function() {
	$(":checkbox").change(function(){
		// v this.id máš teď ID zatrženého checkboxu (musíš ho tam narvat  <input id="check1">)
		// možná to půjde i s this.value nebo tak něco
		/* EDIT
		 * čistě teoreticky bys to mohl rovnou poslat postem / getem
		 * $.post("URL", { id: this.id, checked: this.checked });
		 */
	});
});

No a jelikož teď mám ID checknutého článku, tak už jen stačí to nějak narvat k těm tvým odkazům. S tím už si nějak poraď.

V jQuery se atributy zadávají takhle:

$( "img" ).attr({
	src: "/resources/hat.gif",
	title: "jQuery",
	alt: "jQuery Logo"
});

Editoval Northys (13. 8. 2014 7:39)

David Kudera

Když už přes js, jak píše @Northys, tak bych místo id použil data-id atribut nebo radši klasický value. Přece jen atribut id může být jedné hodnoty v html jen jednou a mít tam čísla (id těch článků) mi přijde takový zvláštní

Taky není doporučené používat selektor :checkbox. Viz dokumentace

<table id="articlesListHtmlId">
	<tr>
		<td>
			<input type="checkbox" value="1">
		</td>
	</tr>
	<tr>
		<td>
			<input type="checkbox" value="2">
		</td>
	</tr>
</table>

$(function() {
	$('#articlesListHtmlId input[type="checkbox"]').change(function() {
		var id = $(this).val();		//tady už máš ty id
	});
});

potřebuješ tam třeba hromadný úpravy nebo co dál s tím přesně plánuješ?

Freestyler

@David Kudera: já v podstatě potřebuju získat hodnotu z checkboxu tzn. tohle:


<input class="checkbox" name="selectCheckbox" value="47" type="checkbox">

A předat ji do presenteru, kde je funkce pro edit navržena takto a $postId by mělo být id článku v db

public function renderEdit($postId) {

     $values = $this->articles->fetchSingle($postId)->toArray();
    unset($values['datetime']);
    $this['addArticle']->setValues($values);

    }

Původně jsem to měl přes dva buttony (jeden pro edit, druhý pro delete), které byly vždy vedle článku a fungovalo to, teď bych to rád dělal přes ten checkbox. Inspiroval jsem se jedním CMS s kterým jsem v tomhle spokojen.

Nešlo by to nějak v PHP, abych se vyhnul javascriptu nebo jQuery?

Pokud ne, tak nevím, jak tam napasovat to id.

Pracovat s tím budu dále, chtěl bych hromadně mazat a nastavovat hodnotu při kliknutí na „published“ a „unpublished“ (změní hodnotu v db na 0 nebo 1) → to hromadné označení zatím taky nevím jak udělat a musel bych to ošetřit, aby to nešlo použít při add a edit akci.

Editoval Freestyler (13. 8. 2014 18:03)

David Kudera

Tak určitě by to šlo udělat tak, že to bude celý obalený ve formu a tak dál. Prostě klasicky.. Bylo by tam několik klasických tlačítek (ne pro každý řádek zvlášť). No a bylo by to v obyč php (formy v nette samozřejmě) a vyhnul by jsi se js..

Freestyler

Tak asi zůstanu u js. Mohl by jsi mě prosím nakopnout, jak to tam nacpat? V .js jsem fakt lempl :(.

iconMenu.latte (ten je includován do @layout.latte)

<script>
    $(function() {
    $('.table-article-create input[type="checkbox"]').change(function() {
        var id = $(this).val();
	    alert(id);
	});
});
</script>


<a n:href="Articles:addArticle" class="btn-add" onClick= ></a>
<a n:href="Articles:editArticle" class="btn-edit"></a>
<a n:href="Articles:delete" class="btn-delete"></a>
<a n:href="Articles:publish" class="btn-published"></a>
<a n:href="Articles:unpublish" class="btn-unpublished"></a>

V podstatě potřebuju, aby se to použilo při kliknutí na ten odkaz, takže to je asi celé špatně. Zkouším všechno možné už přes dvě hodiny a výsledek nula :(.

Díky.

EDIT:

Tak už mi to dokáže vypsat id toho článku, ale jak to předat presenteru to už nemám ani ponětí :(. A teď samozřejmě to vypíše jen postId prvního checkboxu, zatím nevím jak to udělat aby to zjistilo, kterej checkbox je zaškrtnutej.

<script>
$(document).ready(function(){

  $('.btn-edit').click(function() {

     var postId = $('#artCheckbox').val();
	alert(postId); //test if postId is correct
    //tady potřebuju postId předat do presenteru
  });
  });
</script>

David Kudera napsal(a):

Tak určitě by to šlo udělat tak, že to bude celý obalený ve formu a tak dál. Prostě klasicky.. Bylo by tam několik klasických tlačítek (ne pro každý řádek zvlášť). No a bylo by to v obyč php (formy v nette samozřejmě) a vyhnul by jsi se js..

Editoval Freestyler (13. 8. 2014 22:52)

Northys

Freestyler napsal(a):

<script>
		$(document).ready(function(){
		$('.btn-edit').click(function() {
			var postId = $('#artCheckbox').val();
			alert(postId); //test if postId is correct
			//tady potřebuju postId předat do presenteru
		});
	});
</script>

Zkus vypsat

	<input data-id="buchacha" type="checkbox" />
	<input data-id="bucheche" type="checkbox" />
	<script type="text/javascript">
		$( "input[type=checkbox]" ).click(function() {
  			alert($( this ).attr('data-id'));
		});
	</script>

David Kudera napsal(a):

Taky není doporučené používat selektor :checkbox. Viz dokumentace

já taky JavaScriptu 2× neholduju, tohle jsem našel na stacku, koukám, že to bylo 4 roky starý

EDIT: @DavidKudera: nechtělo mi to brát selector, když jsem před input[] napsal #nejakyID (samozřejmě, že jsem to pak obalil divem s patřičným ID) WTF?

Editoval Northys (14. 8. 2014 2:59)

Freestyler

Northys napsal(a):

Zkus vypsat

	<input data-id="buchacha" type="checkbox" />
	<input data-id="bucheche" type="checkbox" />
	<script type="text/javascript">
		$( "input[type=checkbox]" ).click(function() {
  			alert($( this ).attr('data-id'));
		});
	</script>

Tohle funguje, vyhodí alert s data-id checkboxu. Teď teda předposlední problém a to jak předat tuto hodnotu presenteru, kde bych to chtěl dát do proměnné $postId, která tam už existuje (abych to zase celé nepřepisoval).