在页面中显示的HTML和jQuery对话框问题
[英]Html & jquery dialog issue for showing in the page
问题描述
我试图通过jquery显示对话框。 首先，我删除div，然后在表格中附加div。 第一次搜索时，如果没有数据，则我的对话框显示正确，但假设第一次搜索并获取了数据，但是第二次使用另一个关键字搜索却没有数据，则我的对话框显示不正确。 如果您滚动页面的末尾，则将看到对话框的追加。 我想我正在做一些与html，css或jquery相关的错误实习生，但无法捕获问题所在。
这是我显示对话框的代码的一小段。
function Search(SearchTerm, PageIndex) {
var flag = 0;
$('form').remove('#SrchDialog').append('<div id="SrchDialog"></div>');
if (SearchTerm != '') {
block();
var Data = '{"SearchTerm":' + JSON.stringify(SearchTerm) + ',"PageIndex":' + JSON.stringify(PageIndex) + '}';
$.ajax({
type: "POST",
url: "pnpsrch.aspx/StartSearch",
data: Data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
enableAllLinks();
unBlock();
if (data.d["HasData"] > 0) {
datafound = 1;
$("[id$=lblTopPager],[id$=lblBottomPager]").html(data.d["Pager"]);
$('#SearchResult').html(data.d["Repeater"]);
}
else {
datafound = 0;
message(SearchTerm);
}
flag = 1;
},
error: function (request, status, error) {
enableAllLinks();
unBlock();
alert(request.responseText);
flag = 0;
}
});
}
return false;
}
如果您想看到问题，请转到此URL http://www.bba-reman.com/search/search.aspx ，在搜索框中输入audi ，然后按Enter，然后您会看到结果即将到来，然后再次将gcu用作在文本框中搜索关键字，然后按Enter键，您将看不到任何对话框，只是转到页面的末尾，您将看到该对话框。
再次刷新页面，然后在文本框中输入gcu作为搜索关键字，然后按Enter，您将看到对话框即将出现。
实际上我想在搜索后没有数据时显示对话框。 因此，请查看我的问题并指导我进行哪些更改以摆脱该问题。 我希望对话框应正确显示。
谢谢
Search.js完整代码
$(document).ready(function () {
var keyword = getParameterByName('keyword');
var watermark = 'Part search in English';
var SearchTerm = '';
$.blockUI.defaults.overlayCSS.opacity = 0.3;
SearchTerm = $("input[id*='txtSearch']").val();
//init, set watermark text and class
if (keyword == '' && $('[id*=txtSearch]').val().length == 0) {
$('[id*=txtSearch]').val(watermark).addClass('watermark');
}
//if blur and no value inside, set watermark text and class again.
$('[id*=txtSearch]').blur(function () {
if ($(this).val().length == 0 || SearchTerm == '') {
$(this).val(watermark).addClass('watermark');
}
});
//if focus and text is watermrk, set it to empty and remove the watermark class
$('[id*=txtSearch]').focus(function () {
if ($(this).val() == watermark) {
$(this).val('').removeClass('watermark');
}
});
$('[id*=txtSearch]').keypress(function (event) {
SearchTerm = $("input[id*='txtSearch']").val();
if (event.keyCode == 13) {
$(".search-box :button").trigger('click');
return false;
}
});
$(".search-box :button").click(function () {
if ($('[id*=txtSearch]').val() != watermark && $('[id*=txtSearch]').val().length > 0) {
SearchTerm = $("input[id*='txtSearch']").val();
//block();
if ($.trim(SearchTerm) != '') {
$(".search-box").data('inputVal', $.trim(SearchTerm));
setHistory(0, SearchTerm);
Search(SearchTerm, 1);
}
}
return false;
});
// Read a page's GET URL variables and return them as an associative array.
function getParameterByName(name) {
name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + name + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.href);
if (results == null)
return "";
else
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
if ($.trim(SearchTerm) != '') {
$(".search-box").data('inputVal', $.trim(SearchTerm));
}
function disableAllLinks() {
$('[id$=lblTopPager] a, [id$=lblBottomPager] a').addClass('disabled');
}
function enableAllLinks() {
$('[id$=lblTopPager] a, [id$=lblBottomPager] a').removeClass('disabled');
}
function setHistory(pageIndex, SearchTerm) {
$.bbq.pushState({ pageIndex: pageIndex, keyword: SearchTerm });
}
$(window).bind('hashchange', function (e) {
var searchTerm = '';
var pageIndex = e.getState("pageIndex") || 0;
pageIndex = parseInt(pageIndex);
searchTerm = e.getState("keyword") || '';
if (searchTerm != null && searchTerm != '') {
$("input[id*='txtSearch']").val(searchTerm);
Search(searchTerm, pageIndex);
}
return false;
});
$(window).trigger('hashchange');
$('[id$=lblTopPager] a, [id$=lblBottomPager] a').live("click", function (e) {
e.preventDefault();
SearchTerm = $("input[id*='txtSearch']").val();
//block();
if (!$(this).hasClass('disabled')) {
disableAllLinks();
if ($.trim(SearchTerm) != '') {
if ($(".search-box").data('inputVal') != null) {
if ($(".search-box").data('inputVal').toLowerCase() == $.trim(SearchTerm).toLowerCase()) {
setHistory(parseInt($(this).attr('page')), SearchTerm);
Search(SearchTerm, $(this).attr('page'));
}
else {
setHistory(1, SearchTerm);
Search(SearchTerm, 1);
}
}
else {
setHistory(parseInt($(this).attr('page')), SearchTerm);
Search(SearchTerm, $(this).attr('page'));
}
}
}
return false;
});
function Search(SearchTerm, PageIndex) {
var flag = 0;
$('form').remove('#SrchDialog').append('<div id="SrchDialog"></div>');
if (SearchTerm != '') {
block();
var Data = '{"SearchTerm":' + JSON.stringify(SearchTerm) + ',"PageIndex":' + JSON.stringify(PageIndex) + '}';
$.ajax({
type: "POST",
url: "Search.aspx/StartSearch",
data: Data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
enableAllLinks();
unBlock();
if (data.d["HasData"] > 0) {
datafound = 1;
$("[id$=lblTopPager],[id$=lblBottomPager]").html(data.d["Pager"]);
$('#SearchResult').html(data.d["Repeater"]);
}
else {
datafound = 0;
message(SearchTerm);
}
flag = 1;
},
error: function (request, status, error) {
enableAllLinks();
unBlock();
alert(request.responseText);
flag = 0;
}
});
}
return false;
}
function message(SearchTerm) {
var markup = "<ul><li><div class='no_results'><span>No results found for [${Name}] </span></div></li></ul>";
$("[id$=lblTopPager],[id$=lblBottomPager]").html('');
$("#SearchResult").empty();
$.tmpl(markup, { "Name": SearchTerm }).appendTo("#SearchResult").fadeIn('slow');
EnquiryDialog();
return false;
}
var datafound = 1;
function block() {
if ($('#SearchResult').children().find('.no_results').length <= 0) {
if ($('#SearchResult').children('ul').length > 0) {
$('div#SearchResult').block({ message: '<div style="text-align: center; width:133px; height:36px; margin: 5px 50px;"><img src="../images/ajx-loader.gif" style="float: left;"/><span style="float: left; font-weight: bold; margin: -21px 44px;">Processing...</span></div>',
centerY: false,
css: {
border: '5px solid #CCCCCC',
height: '50px',
top: '200px'
}
});
}
}
}
function unBlock() {
$('div#SearchResult').unblock();
}
var _height = 542, _width = 314, _subwidth = 248, _subheight = 520;
function EnquiryDialog() {
if ($("#feed_dialog").is(":visible")) {
return false;
}
if ($("#new_feed_dialog").is(":visible")) {
return false;
}
$("#SrchDialog")
.html('<div class="Srchloading"></div>')
.dialog({
autoOpen: false,
bgiframe: true,
height: 'auto',
width: 314,
modal: false,
draggable: true,
resizable: false,
position: 'center',
closeOnEscape: false,
show: {
effect: "fade",
duration: 600
},
hide: {
effect: "fade",
duration: 500
},
open: function (type, data) {
$("#SrchDialog").closest(".ui-dialog").css({ position: 'fixed', height: '580px', background: 'white', top: '50%', left: '50%', marginleft: '-100px', margintop: '-50px' });
$("#SrchDialog").css({ overflow: 'hidden' });
var t = $(this).parent(), w = window;
t.offset({
top: (($(window).height() - 542) / 2),
left: (($(window).width() - 314) / 2)
});
},
close: function () {
$(this).dialog('destroy').remove();
$('form').remove('#SrchDialog')
}
});
$("#SrchDialog").load('SearchFeedback.aspx', function (responseTxt, statusTxt, xhr) {
if (statusTxt == "success") {
sHtml = responseTxt;
sHtml = $(sHtml).find('#SrchExtract').html();
$sHtml = $(sHtml);
$("#SrchDialog").html(sHtml);
$("#SrchDialog").dialog('open').show();
BindEvent();
}
if (statusTxt == "error") {
alert("Error: " + xhr.status + ": " + xhr.statusText);
}
});
}
function BindEvent() {
var _AdjustHeight = 0;
var flag = true;
$("input[id*='btnsrchSubmit']").live("click", function () {
if (jQuery.trim($("input[id*='txtsrchpartName']").val()) == "") {
$('#srchfeed_loader').html('<span>Part Name Required</span>').fadeIn('slow');
$("input[id*='txtsrchpartName']").focus()
flag = false;
return false;
}
if (jQuery.trim($("input[id*='txtsrchpartNumber']").val()) == "") {
$('#srchfeed_loader').html('<span>Part Number Required</span>').fadeIn('slow');
$("input[id*='txtsrchpartNumber']").focus()
flag = false;
return false;
}
if (jQuery.trim($("input[id*='txtsrchfaultinfo']").val()) == "") {
$('#srchfeed_loader').html('<span>Fault Info Required</span>').fadeIn('slow');
$("input[id*='txtsrchfaultinfo']").focus()
flag = false;
return false;
}
if (jQuery.trim($("input[id*='txtsrchcustname']").val()) == "") {
$('#srchfeed_loader').html('<span>Customer Name Required</span>').fadeIn('slow');
$("input[id*='txtsrchcustname']").focus()
flag = false;
return false;
}
if (jQuery.trim($("input[id*='txtsrchcustemail']").val()) == "") {
$('#srchfeed_loader').html('<span>Customer Email Required</span>').fadeIn('slow');
$("input[id*='txtsrchcustemail']").focus()
flag = false;
return false;
}
if (!isValidFeedbackEmailAddress(jQuery.trim($("input[id*='txtsrchcustemail']").val()))) {
$('#srchfeed_loader').html('<span>Invalid Email</span>').fadeIn('slow');
$("input[id*='txtsrchcustemail']").focus()
flag = false;
return false;
}
if (jQuery.trim($("input[id*='txtsrchcustphone']").val()) == "") {
$('#srchfeed_loader').html('<span>Phone Number Required</span>').fadeIn('slow');
$("input[id*='txtsrchcustphone']").focus()
flag = false;
return false;
}
if (jQuery.trim($("textarea[id*='txtsrchDetails']").val()) == "") {
$('#srchfeed_loader').html('<span>Request Details Required</span>').fadeIn('slow');
$("textarea[id*='txtsrchDetails']").focus()
flag = true;
return false;
}
if (flag) {
$('#srchfeed_loader').fadeIn('slow').html("<img src='../images/big-ajax-loader.gif' border='0'/>");
var FeedCrd = {};
FeedCrd["PartName"] = $("[id*=txtsrchpartName]").val();
FeedCrd["PartNumber"] = $("[id*=txtsrchpartNumber]").val();
FeedCrd["FaultInfo"] = $("input[id*='txtsrchfaultinfo']").val();
FeedCrd["CustomerName"] = $("input[id*='txtsrchcustname']").val();
FeedCrd["CustomerEmail"] = $("input[id*='txtsrchcustemail']").val();
FeedCrd["CustomerPhone"] = $("input[id*='txtsrchcustphone']").val();
FeedCrd["Details"] = $("textarea[id*='txtsrchDetails']").val();
var DTO = { preq: FeedCrd };
$.ajax({
type: "POST",
url: "SearchFeedback.aspx/ProcessData",
data: JSON.stringify(DTO),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
if (data.hasOwnProperty("d")) {
if (data.d == "SUCCESS") {
setTimeout(function () {
$('#srchfeed_loader').html('<span>Data Successfully Sent</span>').fadeIn('slow');
setTimeout(function () {
$("#SrchDialog").closest('.ui-dialog-content').dialog('close');
$('form').remove('#SrchDialog');
}, 2000);
}, 2000);
}
else {
$('#srchfeed_loader').html('<span>Error occured</span>').fadeIn('slow');
}
}
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
}
return false;
});
$("#imgSrchclose").live("click", function () {
$("#SrchDialog").closest('.ui-dialog-content').dialog('close');
return false;
});
function isValidFeedbackEmailAddress(emailAddress) {
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
return emailPattern.test(emailAddress);
};
}
if ($('#SearchResult').children().find('.no_results').length > 0) {
$('form').remove('#SrchDialog').append('<div id="SrchDialog"></div>');
EnquiryDialog();
}
});
编辑
检查代码后，我发现对话框未正确处理。 所以我添加了这一行代码并解决了问题。
$("form #SrchDialog").each(function () {
$(this).remove();
});
$("form").append('<div id="SrchDialog"></div>');
1 个解决方案
解决方案1
0 2014-08-22 14:31:02
在删除对话框时，需要在显示对话框之前再次对其进行初始化。
$("#SrchDialog").dialog();
Veracode 扫描：jQuery html 方法显示 ZC6E190B28404633C 问题中与脚本相关的 HTML 标记的不正确中和
[英]Veracode Scan: jQuery html method showing Improper Neutralization of Script-Related HTML Tags in a Web Page issue
页面加载时是否可以防止显示jquery对话框？
[英]is it possible to prevent jquery dialog box from showing when the page loads?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.