javascript — форма jquery в qtip, не отправленная с ajax

У меня проблема с получением этой формы ajax для отправки в qtip … Она действительно отправляет, но игнорирует e.PreventDefault () и просто загружает в браузер. Кроме того, он не отключает кнопку отправки, поэтому код даже не вызывается. Я попытался запустить его в успехе: функция и события: … любая помощь в этом вопросе будет очень признателен.

JS:

    var editgallerysubmit    = $("#EditGallerySubmit");
var editgalleryform      = $("#EditGalleryForm");
var editgalleryresults   = $('#EditGalleryResults');

//Edit Gallery Form


//Edit Form When Hovering Over Gallery Name
$('.EditGallery').on('click', function (e) {
e.preventDefault();
});

$('.EditGallery').each(function()
{


$(this).qtip({
content:  {
text: "Loading...",
ajax: {
url:$(this).attr('href'),
type: "GET",
success: function(data, status) {
this.set('content.text', data);

}
}
},
hide: {
fixed: true,
delay: 100
},
events: {
render: function(event, api) {
editgalleryform.bind('submit', function(e) {

$.ajax({
url: editgalleryform.attr('action'),
data: editgalleryform.serialize(),
type: 'post',
success: function(data, status, jqXHR) {

},
beforeSend: function() { editgallerysubmit.attr('disabled', ''); },
complete: function() { editgallerysubmit.removeAttr('disabled'); }
});

e.preventDefault();
});
}
},
style: 'wiki'
});
$(this).qtip('click', true);
});

PHP:

    $MemberGalleriesQuery = $bapcity->query("SELECT * FROM CroMemberRetailGalleries WHERE UserID='".$_SESSION['user_id']."' ORDER BY GalleryID DESC");
$MemberGalleriesCount = $MemberGalleriesQuery->num_rows;

if ( $MemberGalleriesCount )
{
$BaseHeight = 150;
$GalleriesBoxHeight = $BaseHeight + ( 20 * $MemberGalleriesCount );
echo '
<div id="ManageGalleries" style="height: '.$GalleriesBoxHeight.'px" align="center">
<div id="ManageGalleriesHeader">Manage Galleries</font></div><br><br>
<font color="#000000"><b>Click Gallery To Edit</b></font><br><br>
';

while($GalleryData = $MemberGalleriesQuery->fetch_assoc())
{
echo '>> <b><a class="EditGallery" href="Crowork.Backend/Crowork.EditGallery.php?gallerykey='.$GalleryData['GalleryID'].'">'.$GalleryData['GalleryName'].'</a></b> <<<br>';
}

echo '<br><br></div>';
}
$MemberGalleriesQuery->free();

ФОРМА PHP ФАЙЛ:

    <form id="EditGalleryForm" action="Crowork.Backend/Crowork.EditGallery.php?action=DoEditGallery&gallerykey=<?php echo $GalleryData['GalleryID']?>" method="post">
<table border="0" width="100%">
<tr>
<td colspan="2" align="center"><font size="-1"><b>NOTE:</b> Letters & Numbers Only</font></td>
</tr>
<tr>
<td>Name:</td>
<td><input type="text" name="GalleryName" size="30" value="<?php echo $GalleryData['GalleryName']?>"></td>
</tr>
<tr>
<td align="right" colspan="2">
<input type="hidden" name="OriginalGalleryName" value="<?php echo $GalleryData['GalleryName']?>">
<input type="hidden" name="GalleryID" value="<?php echo $GalleryData['GalleryID'] ?>">
<input id="EditGallerySubmit" type="submit" name="EditGallery" value="Edit Gallery">
</td>
</tr>
</table>
</form>

ВСЕ КОДЫ JAVASCRIPT РАБОТАЮТ, КРОМЕ ЭТОЙ ЧАСТИ, КОТОРАЯ ОБРАЩАЕТСЯ К ПРЕДСТАВЛЕНИЮ ФОРМЫ.

    editgalleryform.bind('submit', function(e) {

$.ajax({
url: editgalleryform.attr('action'),
data: editgalleryform.serialize(),
type: 'post',
success: function(data, status, jqXHR) {

},
beforeSend: function() { editgallerysubmit.attr('disabled', ''); },
complete: function() { editgallerysubmit.removeAttr('disabled'); }
});

e.preventDefault();
});

0

Решение

Попробуйте связать событие нажатия на кнопку отправки, как,

editgallerysubmit.click(function() {
$.ajax({ /** You ajax code */ });
return false;// to prevent page reload
});

Если твой form динамически создается, то вам нужно использовать событие привязки клика, как,

// var editgallerysubmit will not work here bcoz it is dynamically created and your js rendered previously
$('#EditGallerySubmit').click(function() {
$.ajax({ /** You ajax code */ });
return false;// to prevent page reload
});
0

Другие решения

Других решений пока нет …

По вопросам рекламы [email protected]