I am getting a Chrome console jQuery is not defined error for jquery-ui.min.js
In my site I put jquery call at bottom:
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>
<!--JScript to Make iframe go behind footer nav upon scrolling in IE -->
<script type="text/javascript">
var $j = jQuery.noConflict();
jQuery(document).ready(function($j){
$j('iframe').each(function() {
var url = $j(this).attr("src");
if ($j(this).attr("src").indexOf("?") > 0) {
$j(this).attr({
"src" : url + "&wmode=transparent",
"wmode" : "Opaque"
});
}
else {
$j(this).attr({
"src" : url + "?wmode=transparent",
"wmode" : "Opaque"
});
}
});
});
</script>
The page is this: http://www.mexpro.com/mexico/auto/insurance.html
jQuery-UI is only a plugin for jQuery. You need to add this instead.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
If you create a jQuery UI button in Yii, the default behavior is that the text of the button should show as the tooltip. You can override this with the 'label' option, but neither of these works for me in Yii. Any suggestions? Here is the code I'm using:
<button id="btnClose"></button>
<script type="text/javascript" >
$(function() {
$("#btnClose").button({
text: false,
label: 'Close Wizard'
});
});
</script>
The button shows up just fine, just without a tooltip.
Thanks!
A tooltip is set in the title attribute.
The example you give us isn't Yii but plain jQuery.
<script type="text/javascript" >
$(function() {
$("#btnClose").button({
'text': false,
'title': 'Close Wizard'
});
});
</script>
:I have the following in one of my partial views:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#ProductName").autocomplete({
source: "Products",
minLength: 2,
select: function (event, ui) {
$("#newInvoiceLineForm").load("/Invoices/Product?name=" + ui.item.value);
}
});
});
</script>
And the autocomplete works fine and displays all the items returned but on select event I get a ui.item.value with just the first word of the two word item. For example I have "New Product" selected from the autocomplete and it results in the:
/Invoices/Product?name=New call.
Anyone had this situation before?
Thank you
This is the code that works with encodeURI:
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$("#ProductName").autocomplete({
source: "Products",
minLength: 2,
select: function (event, ui) {
$("#newInvoiceLineForm").load(encodeURI("/Invoices/Product?name=" + ui.item.value));
}
});
});
</script>
You need to URL encode your string. Spaces in their raw form aren't acceptable to querystrings.
I can't make BlockUI work over a modal dialog.
I tried to look after z-index issues, but without success...
In my web page, here is the head :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" ></script>
<script type="text/javascript" src="http://jquery.malsup.com/block/jquery.blockUI.js?v2.38" ></script>
<link media="all" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" rel="stylesheet" />
and the body:
<div id="dialog_test" title="Test">
TEST
</div>
GO
<script>
$(function() {
$( "#dialog_test" ).dialog({
autoOpen: false,
modal: true,
buttons: {
"Cancel": function() {
$( this ).dialog( "close" );
},
"Ajax": function() {
$.ajax({
"url" : "http://jquery.malsup.com/block/wait.php",
"success" : function(json) {
$( "#dialog_test" ).dialog( "close" );
}
});
}
}
});
$( "#go" ).click(function(event) {
event.preventDefault();
$( "#dialog_test" ).dialog( "open" );
});
});
$(document)
.ajaxStart(function() {
$.blockUI({
theme: true
})
})
.ajaxStop($.unblockUI);
</script>
Any idea?
You don't specify what you have tried with z-index.
The blockUI plugin has an option to change the z-index of the message it creates (documentation):
// z-index for the blocking overlay
baseZ: 1000,
jQuery UI Dialog as an option for specifying a z-index as well. Its default value is 1000. So you have to set a higher number for the BlockUI option, let's say 2000:
$.blockUI({
theme: true,
baseZ: 2000
})
DEMO
Thanks Didier for your answer, it helped get me on track. You'll notice that the jsfiddle in Didier's answer works the first time you open the dialog but any further open and ajax results in the blockUI elements appearing beneath the dialog. The dialog must recalibrate it's z-index to be the top dog every time it opens.
I've found two possible ways around this:
'destroy' the dialog when it is closed and recreate it when
it is opened.
rather than blocking the whole UI, just block the
dialog. This can be done using the widget method, like this:
$( ".selector" ).dialog( "widget" ).block({
theme: false,
message: '<h1>Wait for me please...</h1>',
css: { border: '3px solid #a00' }
});
I am having an issue working with jaGrid and ASP.NET MVC 2. Everything is working, but when I select a row I get this error on FireBug: uncaught exception: jqGrid - No such method: restoreRow.
Debugin Js I realize that error happend here:
onSelectRow: function(id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
I think, the problem is the jqGrid libraries include (or the include order). This is my Index.aspx page.
<%--CSS Files--%>
<link href="/Content/jquery-ui-1.8.7.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<link href="/Content/ui.multiselect.css" rel="stylesheet" type="text/css" />
<%--jQuery Library--%>
<script type="text/javascript" src="../../Scripts/jquery-1.4.4.min.js"></script>
<%--Must load language tag BEFORE script tag--%>
<script type="text/javascript" src="../../Scripts/grid.locale-es.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="../../Scripts/grid.jqueryui.js"></script>
<script type="text/javascript" src="../../Scripts/grid.base.js"></script>
<script type="text/javascript" src="../../Scripts/grid.common.js"></script>
<script type="text/javascript" src="../../Scripts/grid.formedit.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.fmatter.js"></script>
<script type="text/javascript" src="../../Scripts/grid.custom.js"></script>
<script type="text/javascript" src="../../Scripts/jqDnR.js"></script>
<script type="text/javascript" src="../../Scripts/jqModal.js"></script>
<script type="text/javascript" src="../../Scripts/grid.import.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<table id="tableAccidentes" border=0>
<tr>
<td><img alt="" src="../../images/icono_victima.png" /></td>
<td><h2>Accidentes Registrados</h2></td>
</tr>
</table>
<script type="text/javascript">
var lastsel;
var Plantas = ['Pablo Podesta', 'Pilar', 'Tigre', 'Otra'];
jQuery(document).ready(function() {
jQuery("#list").jqGrid({
url: '/Accidentes/ListarAccidentes',
datatype: "json",
colNames: ['Fecha', 'Detalle', 'Accidentado', 'Planta'],
colModel: [
{ name:'Fecha', index:'Fecha', width:150, align:'left',
editable:true },
{ name:'Detalle', index:'Detalle', width:150, align:'left',
editable:true },
{ name:'Accidentado', index:'Accidentado', width:200,
align:'left', editable:true },
{ name:'planta', index:'planta', width:150, align:'left',
editable:true, edittype:"select",
editoptions: { value:Plantas} }
],
onSelectRow: function(id) {
if (id && id !== lastsel) {
jQuery('#list').jqGrid('restoreRow', lastsel);
jQuery('#list').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl: "/Accidentes/GridSave",
edit: {
addCaption: "Agregar Accidente",
editCaption: "Editar Accidente",
bSubmit: "Guardar",
bCancel: "Cancelar",
bClose: "Cerrar",
saveData: "Se modifico el registro! ¿guardar los cambios?",
bYes: "Si",
bNo: "No",
bExit: "Cancelar"
},
pager: jQuery('#pager'),
rowNum: 10,
rowList: [5, 10, 20, 50],
sortname: 'Id',
sortorder: "desc",
viewrecords: true,
imgpath: '/scripts/themes/coffee/images',
caption: 'Accidente'
}).navGrid('#pager', { edit: true, add: true, search: false, del: false },
{ closeAfterAdd: true, closeAfterEdit: true });
// add custom button to export the data to excel
jQuery("#list").jqGrid('navButtonAdd','#pager',{
caption:"",
onClickButton : function () {
jQuery("#list").jqGrid('excelExport',
{ url: '/Accidentes/ExportarAccidentes' });
}
});
});
</script>
<%-- HTML Required--%>
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
Please, can someone help me?
The restoreRow and editRow methods, which you use, are defined in the grid.inlinedit.js file and are the part of the inline editing module (see more in the jqGrid documentation). Moreover you should remove the file jquery.jqGrid.min.js to avoid having definitions of the same functions twice. Because the method restoreRow was not defined in the jquery.jqGrid.min.js which you use you use probably wrong downloaded jqGrid version. You should download the jqGrid one more time and be sure that you check "Inline Editing" module. If you open jquery.jqGrid.min.js file in the text editor you will see in the comment at the begining of the file all modules which was the part of the download.
Some additional small remarks: in the documentation is described which parameters of the colModel are default. For example, width:150 and align:'left' have defaout values, so you can remove there from the column definition.
The value property for "select" type of the editoptions which you use is wrong. The Plantas should be defined as
var Plantas = { 'Pablo Podesta':'Pablo Podesta', Pilar:'Pilar',
Tigre:'Tigre', Otra:'Otra'};
or as
var Plantas = 'Pablo Podesta:Pablo Podesta;Pilar:Pilar;Tigre:Tigre;Otra:Otra';
See the documentation for details.
The parameter imgpath is deprecated and should be removed. Class "scroll" is also deprecated and the HTML fragment for the jqGrid can be reduced to
<table id="list"></table>
<div id="pager"></div>
See an example here.
The parameter edit is not exist in the jqGrid it is the parameter of editGridRow from the form editing. You can define it as the part of navGrid parameters prmEdit and prmAdd. Currently you use only prmEdit. Probably the usage of grid.locale-XX.js from the i18n directory will make the usage of edit parameter unneeded.