Question

İşte jQuery:

$(document).ready(function() {
    $('#autosave').click(function() {
        var url = window.location.pathname;
        $postData = $('#content form:first').serialize() + '&'
                    + $('#content form:first .input-submit').attr('name')
                    + '=Save';
        $.post(url, $postData, function(data) {
            //
        });
    });
});

Bunu yapmak gerekiyordu ne:

Sayfadaki # content div # otomatik kaydetme bağlantı, ilk form tıkladıktan sonra POST yöntemi ile teslim alır. Bundan sonra, kullanıcı bağlantı hedef alınır.

Bu:

$postData = $('#content form:first').serialize() + '&'
            + $('#content form:first .input-submit').attr('name')
            + '=Save';

formdaki verileri toplar ve aynı zamanda (PHP kodu ben gönderme düğmesi ilk sunuldu olmadığını denetleme ve sonra form doğrulama ve işleme yapacağım çünkü) sonuna kadar teslim düğme ekler.

Bu:

var url = window.location.pathname;

formu (form olarak aynı sayfa bulunur) gönderilen URL.

Sorun, çalışmıyor, tabii ki,.

Linke tıkladıktan sonra, ben bağlantı hedefi alınan ediyorum ama (veritabanındaki herhangi bir değişiklik var çünkü) formu teslim olmamıştır.

Herhangi bir fikir?

EDIT:

XHTML pasajı:

        <form enctype="application/x-www-form-urlencoded" method="post"
              action="/my-account/account-details"><ol>

<fieldset id="fieldset-your_details"><legend>Your Details</legend>

<li><label for="name" class="optional">Name</label>
<div class="element">
<input type="text" name="name" id="name" value="Name..." class="input-text" /></div></li>
<li><label for="town_city" class="optional">Town/City</label>
<div class="element">
<input type="text" name="town_city" id="town_city" value="Town/City..." class="input-text" /></div></li>
<li><label for="country" class="optional">Country</label>
<div class="element">
<select name="country" id="country">
    <option value="United Kingdom" label="United Kingdom" selected="selected">United Kingdom</option>

    <option value="United States" label="United States">United States</option>
    ...
    <option value="Zimbabwe" label="Zimbabwe">Zimbabwe</option>
</select></div></li>
<li><label for="county" class="optional">County</label>
<div class="element">
<input type="text" name="county" id="county" value="County..." class="input-text" /></div></li></fieldset>

<fieldset id="fieldset-about"><legend>About Me</legend>

<li><label for="about_me" class="optional">About Me</label>
<div class="element">
<textarea name="about_me" id="about_me" rows="10" cols="50">Tell people about yourself...</textarea></div></li></fieldset>
<fieldset id="fieldset-looks"><legend>Looks</legend>

<li><label for="hair" class="optional">Hair</label>
<div class="element">
<input type="text" name="hair" id="hair" value="Hair..." class="input-text" /></div></li>
<li><label for="eyes" class="optional">Eyes</label>

<div class="element">
<input type="text" name="eyes" id="eyes" value="Eyes..." class="input-text" /></div></li>
<li><label for="height" class="optional">Height</label>
<div class="element">
<input type="text" name="height" id="height" value="Height..." class="input-text" /></div></li>
<li><label for="weight" class="optional">Weight</label>
<div class="element">
<input type="text" name="weight" id="weight" value="Weight..." class="input-text" /></div></li>
<li><label for="body_type" class="optional">Body Type</label>
<div class="element">
<input type="text" name="body_type" id="body_type" value="Body Type..." class="input-text" /></div></li>
<li><label for="dress_size" class="optional">Dress Size</label>
<div class="element">

<input type="text" name="dress_size" id="dress_size" value="Dress Size..." class="input-text" /></div></li>
<li><label for="bust_size" class="optional">Bust Size</label>
<div class="element">
<input type="text" name="bust_size" id="bust_size" value="Bust Size..." class="input-text" /></div></li>
<li><label for="waist" class="optional">Waist</label>
<div class="element">
<input type="text" name="waist" id="waist" value="Waist..." class="input-text" /></div></li>
<li><label for="best_features_looks" class="optional">Best Features</label>
<div class="element">
<input type="text" name="best_features_looks" id="best_features_looks" value="Best Features..." class="input-text" /></div></li>
<li><label for="tattoos_piercings" class="optional">Any Tattoos/Piercings</label>
<div class="element">
<input type="text" name="tattoos_piercings" id="tattoos_piercings" value="Any Tattoos/Piercings..." class="input-text" /></div></li></fieldset>

<fieldset id="fieldset-personal"><legend>Personal</legend>

<li><label for="gender" class="optional">Gender</label>
<div class="element">
<select name="gender" id="gender">
    <option value="Male" label="Male" selected="selected">Male</option>
    <option value="Female" label="Female">Female</option>
</select></div></li>
<li><label for="job" class="optional">Job</label>
<div class="element">

<input type="text" name="job" id="job" value="Job..." class="input-text" /></div></li>
<li><label for="star_sign" class="optional">Star Sign</label>
<div class="element">
<input type="text" name="star_sign" id="star_sign" value="Star Sign..." class="input-text" /></div></li>
<li><label for="sexuality" class="optional">Sexuality</label>
<div class="element">
<input type="text" name="sexuality" id="sexuality" value="Sexuality..." class="input-text" /></div></li>
<li><label for="marital_status" class="optional">Marital Status</label>
<div class="element">
<input type="text" name="marital_status" id="marital_status" value="Marital Status..." class="input-text" /></div></li>
<li><label for="hobbies" class="optional">Hobbies And Interests</label>
<div class="element">
<input type="text" name="hobbies" id="hobbies" value="Hobbies And Interests..." class="input-text" /></div></li>

<li><label for="cigarettes" class="optional">Do You Smoke</label>
<div class="element">
<input type="text" name="cigarettes" id="cigarettes" value="Do You Smoke..." class="input-text" /></div></li>
<li><label for="alcohol" class="optional">Do You Drink Alcohol</label>
<div class="element">
<input type="text" name="alcohol" id="alcohol" value="Do You Drink Alcohol..." class="input-text" /></div></li>
<li><label for="drugs" class="optional">Do You Take Drugs</label>
<div class="element">
<input type="text" name="drugs" id="drugs" value="Do You Take Drugs..." class="input-text" /></div></li>
<li><label for="best_features_personal" class="optional">Best Features</label>
<div class="element">
<input type="text" name="best_features_personal" id="best_features_personal" value="Best Features..." class="input-text" /></div></li></fieldset>
<fieldset id="fieldset-profile_theme"><legend>Profile Theme</legend>

<li><label for="username_color" class="optional">Username Color</label>
<div class="element">
<input type="text" name="username_color" id="username_color" value="" class="input-text" /></div></li>
<li><label for="menu_color" class="optional">Menu Color</label>
<div class="element">
<input type="text" name="menu_color" id="menu_color" value="" class="input-text" /></div></li>
<li><label for="header_color" class="optional">Header Color</label>
<div class="element">
<input type="text" name="header_color" id="header_color" value="" class="input-text" /></div></li>
<li><label for="front_color" class="optional">Front Color</label>
<div class="element">
<input type="text" name="front_color" id="front_color" value="" class="input-text" /></div></li></fieldset>

<li class="clear"><div class="button">
<input type="submit" name="account_details" id="account_details" value="Save" class="input-submit left" /></div></li></ol></form>
        <div class="clear">&nbsp;</div>
        <p class="pad-top"><a href="/view/profile/id/2" class="blue" id="autosave">View Profile</a></p>

Answer 1

Deneyin:

$(document).ready(function() {
    $('#autosave').click(function() {
        var url = window.location.pathname;
        $postData = $('#content form:first').serialize() + '&'
                    + $('#content form:first .input-submit').attr('name')
                    + '=Save';
        $.post(url, $postData, function(data) {
            window.location.href = url;
        });

        return false;
    });
});

EDIT: tvanfosson onun cevabını olduğu gibi benim kötü, window.location.href = url; window.location.href = $(this).attr('href'); olmalıdır.

EDIT2:

Bu benim için çalışıyor HTML kodu kullanarak, (bir PHP arka uç komut dosyası kullanılarak test) (içine sarılmış bir <div id="content">YOUR HTML</div>):

$('#autosave').click(function() {
	var url = window.location.pathname;

	$postData = $('#content form:first').serialize() + '&'
				+ $('#content form:first .input-submit').attr('name')
				+ '=Save';

	$.post(url, $postData, function(data) {
		window.location.href = $('#autosave').attr('href');
	});

	return false;
});

Answer 2

Sen sonrası aslında döndükten sonra bağlantı hedefine gitmek gerekir. Bağlantı href takip edildiğinde bu şekilde bekleyen sonrası isteği kaldırılamıyor (ve teslim değil) olacaktır.

$(document).ready(function() {
    $('#autosave').click(function() {
        var url = $(this).closest('form').attr('action');
        $postData = $('#content form:first').serialize() + '&'
                    + $('#content form:first .input-submit').attr('name')
                    + '=Save';
        $.post(url, $postData, function(data) {
            // take link after post
            window.location.href = $(this).attr('href');
        });
        return false;  // stops initial link action
    });
});

Change the callback function to work with the data if the link shouldn't be taken in the case where it fails server-side validation. A simple check of the returned data using an if statement should be sufficient.

JQuery linke tıkladıktan sonra formu göndermek

2 Cevap

etiketler