Hi,
I've a code that validates jquery form and gives a result, but when i
try a second search it stops working.
bare with my programming as i'm not an expert in javascript.
There is no error message that tells me where to look (firefox
console).
Can someone help me figure out what is happening.
The Script (form)
<script type="text/javascript" charset="utf-8">
function searchOnClick() {
$(function() {
var options = {
target: '#searchresult', // target element(s)
to be
updated with server response
beforeSubmit: showRequest, // pre-submit callback
success: showResponse, // post-submit callback
// other available options:
//url: url // override for form's 'action'
attribute
//type: type // 'get' or 'post', override
for
form's 'method' attribute
//dataType: null // 'xml', 'script', or
'json' (expected server response type)
//clearForm: true // clear all form fields after
successful submit
//resetForm: true // reset the form after
successful
submit
// $.ajax options can be used here too, for example:
//timeout: 3000
};
// bind to the form's submit event
$('#rechercheprod').submit(function() {
// inside event callbacks 'this' is the DOM element so
we
first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
console.log($(this));
// !!! Important !!!
// always return false to prevent standard browser
submit
and page navigation
return false;
});
$(function() {
$('<div id="busy">Loading...</div>')
.ajaxStart(function()
{$("#busy").show();$("#searchresult
ul").remove();})
.ajaxStop(function() {$("#busy").hide();})
.appendTo('#searchresult');
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
// formData is an array; here we use $.param to convert it
to a
string to display it
// but the form plugin does this for you automatically when
it
submits the data
var queryString = $.param(formData);
console.log(queryString+"queryString");
console.log(formData);
console.log(jqForm);
console.log(options+"target");
// jqForm is a jQuery object encapsulating the form
element. To
access the
// DOM element for the form do this:
// var formElement = jqForm[0];
//$('#soumettre').hide();
//alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being
submitted;
// returning anything other than false will allow the form
submit to continue
return true;
}
// post-submit callback
function showResponse(responseText, statusText) {
// for normal html responses, the first argument to the
success
callback
// is the XMLHttpRequest object's responseText property
// if the ajaxSubmit method was passed an Options Object
with
the dataType
// property set to 'xml' then the first argument to the
success
callback
// is the XMLHttpRequest object's responseXML property
console.log(responseText+"responseText");
console.log(statusText+"statusText");
// if the ajaxSubmit method was passed an Options Object
with
the dataType
// property set to 'json' then the first argument to the
success
callback
// is the json data object returned by the server
//alert('status: ' + statusText + '\n\nresponseText: \n' +
responseText +
// '\n\nThe output div should have already been updated
with
the responseText.');
}
});
};
$(function() {
$('#rechercheprod').live('click',function() {
searchOnClick();
});
});
</script>
the rest of the script that breaks the form validation
$(function() {
$('.ui-draggable li').hover(
function() { $(this).addClass('ui-state-highlight'); },
function() { $(this).removeClass('ui-state-highlight'); }
);
var $productItem = $('.ui-draggable'), $drop = $('#drop');
$productItem.draggable({
revert: true ,
helper: 'clone',
revert: 'invalid',
cursor: 'move'
});
$(".add").mousedown(function() {
$("#droppable").addClass('ui-state-highlight').find('p').html
('<b>Add a product</b>');
});
$productItem.droppable({
accept: '#searchresult ul',
revert: false ,
activeClass: 'custom-state-active',
drop: function(ev, ui) {
moveBackProduct(ui.draggable);
}
});
function moveBackProduct($item) {
$item.fadeOut(function() {
$item.find('a.ui-icon-closethick').remove();
var cat = $($item).attr("type");
$item.appendTo('.add
ul').show("puff", {}, 1000);
var $count= $("li", "#"+cat+"
ul").length;
if ($count<1)
{
$("#"+cat+"").remove();
//$("div").attr('type','cat').remove();
};
var $list = $('#mylist ul');
var $countrem= $("li", "#mylist
ul").length;
//alert($countrem);
if ($countrem<=1)
{ var counts = $countrem + '
product added';}
else
{ var counts = $countrem + '
products added !';}
$("#droppable").addClass('ui-state-highlight').find('p').html
(counts);
$("#droppable").removeClass('ui-state-highlight');
$("#droppable").css('font-weight','bold');
});
}
$('.ui-draggable').click(function(ev) {
var $item = $(this);
var $target = $(ev.target);
if ($target.is('a.ui-icon-closethick')) {
moveBackProduct($item);
}
return false;
});
});
the last part is loaded form the search page with getscript() as it
doesn't work either if i combine them on the same page.
i found that this part removed from the script makes it work
$('.ui-draggable').click(function(ev) {
var $item = $(this);
var $target = $(ev.target);
if ($target.is('a.ui-icon-closethick')) {
moveBackProduct($item);
}
return false;
});
but the i lose the ability to drag and drop the items
Regards
