Form submit problem with jQuery (snippet call as data)

793 Posts

ottogal Reply #1, 8 years, 10 months ago

This is part of a jQuery code (in the page template):

$('#aForm').submit(function() {
	$.ajax({
		type :      'GET',
		url :       '[[~42]]',
	    data :      [[!aSnippet? &param=`aParam`]],
		success :   function() {}
	});
};

The form aForm just contains an input field of type submit. On click of the button, page (42) would load, and the the data created by the snippet aSnippet would be sent (The snippet writes a value to the $_SESSION array).

The problem I have: Obviously, aSnippet is already called when the page is rendered the first time. Instead, it should only be called when the submit button is clicked.

What can I do?

5,888 Posts

Bruno17 Reply #2, 8 years, 10 months ago

running a snippet without reloading the page can only be done with another ajax-request.

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

793 Posts

ottogal Reply #3, 8 years, 10 months ago

Do I understand correctly: Within the submit(function()) I need two $.ajax() calls, one for running the snippet and the other one for reloading the page? So the first one should use the url of a ajax page that just calls the snippet?

5,888 Posts

Bruno17 Reply #4, 8 years, 10 months ago

can you explain, what you are trying at all and what this snippet should do, when you click the submit-button,
and why it needs to be by ajax and not a usual form-submit, please?

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

793 Posts

ottogal Reply #5, 8 years, 10 months ago

I've got a page (id=7) which shows the output of a migxLoopCollection call (paginated by getPage and filtered by a &where parameter). (The items of the collection are articles of a catalogue.)

The visitor of the page is able to put individual items of the collection on a "memory list" which will be saved as a string in the session as $_SESSION['memids']. (This is done in a snippet "memids_to_session").
A typical value of this string would be "+109+101+123+111".

To add a single item to this list, there is a form with just a button "add-to-list" in the &tpl chunk of the collection. If f.i. in the item having id=107 this button is clicked, the string value above is changed to "+109+101+123+111+107". Submitting the form loads another page (id=35) showing the list of already chosen items (after fetching the value of $_SESSION['memids']).

This all works fine like intended.

Now I wanted to give the visitor the possibility to set all of the items of the collection on page (7) to the memory list by one click on the submit button of a form on this page. So I use the above mentioned snippet "memids_to_session" with a parameter &memids the value of which I get by the same migxLoopCollection call as for the page itself.
I tried various ways:

First try:

<form id="add-all-to-list" action="[[~35]]" method="post">
	<input 	id="memids" name="memids" 
			value=	"[[!memids_to_session? &memids=`
						[[!migxLoopCollection? 
							&packageName=`foo` 
							&classname=`foo` 
							&tpl=`@CODE:+[[+id]]`
							&where=`[[!prepareWhere]]`
						]]
					`]]" type="hidden">
	<input name="all-to-list" value="Alle auf die Merkliste" class="submit" type="submit" />
</form>

in combination with this jQuery code:

	$('#add-all-to-list').submit(function() {
		$.ajax({
			type :      'GET',
			url :       '[[~35]]',
			data :      $('#add-all-to-list').serialize(),
			success :   function() {
						}
		});
	};

Second try:

<form id="add-all-to-list" action="[[~35]]" method="post">
	<input name="all-to-list" value="Alle auf die Merkliste" class="submit" type="submit" />
</form>

in combination with this jQuery code:

	$('#add-all-to-list').submit(function() {
		$.ajax({
			type :      'GET',
			url :       '[[~35]]',
			data :      [[!memids_to_session? &memids=`
							[[!migxLoopCollection? 
								&packageName=`foo` 
								&classname=`foo` 
								&tpl=`@CODE:+[[+id]]`
								&where=`[[!prepareWhere]]`
							]]
						`]],
			success :   function() {
						}
		});
	};

With both variants I get the mentioned problem: All the items are added to the list immediatley, after the first load of page (7).

5,888 Posts

Bruno17 Reply #6, 8 years, 10 months ago

why not:

$('#add-all-to-list').submit(function() {
    $.ajax({
        type : 'GET',
        url : '[[~35]]',
        data : '[[!migxLoopCollection? &packageName=`foo` &classname=`foo` &tpl=`@CODE:+[[+id]]` &where=`[[!prepareWhere]]`]]',
        success : function() {

                }
    });
};

and call memids_to_session at the ajax-processor-resource?

-------------------------------

you can buy me a beer, if you like MIGX

http://webcmsolutions.de/migx.html

Thanks!

793 Posts

ottogal Reply #7, 8 years, 10 months ago

Indeed I had this idea too, but I do not understand it well.
The memids_to_session snippet call needs the property &memids:

[[!memids_to_session?&memids=`whatever`]]

and its code is nothing but

<?php
$_SESSION['memids'] = $memids;

But what should I put there instead of whatever?

And where there has to be the reference to the id of the ajax-processor-resource?
You see, I'm a bit confused.

☆ A M B ☆
1,031 Posts

Jako Reply #8, 8 years, 10 months ago

Try this ajax based remember solution: https://github.com/Jako/RememberThis

The latest package could be found in _packages. I should update the Repo version to 1.1.5. [ed. note: Jako last edited this post 8 years, 10 months ago.]