jQuery dialog box performance - jquery-ui

I am using Jquery dialog box for Confirmation and alert purposes...
This is my code...
$( "#dialog-confirm" ).dialog({
resizable: false,
modal: true,
buttons: {
"Yes": function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
I am not getting any error. So far it's working fine, but it seems the performance is a bit slow. My question is if any performance issue will come in the future? If any performance issue does occur, how would I avoid that?
Please help me with this and correct me if I am wrong in anything.

It is very unlikely that this snippet is slow now or in the future - have you tried timing it? It is possible that you have some other code in the page that is being triggered by this call but we'd need to see the whole page to be able to investigate this.
Firebug has a decent JavaScript profiler to help you find performance issues.

Related

Using JQuery Mobile inside Kendo Grid UI

Have anyone tried using these together? I am trying to inject JQuery mobile slide switch inside the Kendo Grid template control and it doesn't seem to work:
$("#grid").kendoGrid({
dataSource: dataSource,
filterable: false,
sortable: true,
pageable: true,
selectable: true,
scrollable: false,
columns: [
{
field: "Firstname",
title: "First Name"
},
{
template: "<select data-role='slider'><option value='0' selected>Yes</option><option value='1'>No</option></select>", title: ""
}
]
});
I've tried looking it up at the jquery mobile's pagebeforecreate and pagecreate event and the select is still not existing at this point, I've made a workaround with the JQuery Mobile button by manually adding the css class, but looking at the raw html of the slide switch its more complex than hooking up a button.
Cheers!

JqGrid : File Upload not working

I am trying to upload file with jqgrid, but the is some mistake in my code.
I am using onInitializeForm method.
I am using Jquery Ajax File Uploader
Can anyone do help to me?
You can see Error in screenshot
This is my code.
jQuery("#formGrid").jqGrid(
{
url:'application/ajax/common_form_detail.php?form_id='+form_id,
editurl:'application/ajax/common_form_edit.php?form_id='+form_id,
datatype: "json",
colNames:[<?php echo $strfield; ?>],
colModel:[<?php echo $strFieldModel; ?>],
rowNum:20,
rowList:[20,50,100],
pager: '#formControl',
sortname: 'id',
viewrecords: true,
sortorder: "asc",
autowidth: true,
height: 400,
width: 900
});
jQuery("#formGrid").jqGrid('navGrid','#formControl',
{ edit:true,add:true,del:true,search:false},
{width:780,recreateForm:true},
{width:780,recreateForm:true
,onInitializeForm : function(formid){
$(formid).attr('method','POST');
$(formid).attr('action','');
$(formid).attr('enctype','multipart/form-data');
}, afterSubmit : function(response, postdata){
$.ajaxFileUpload({
url: 'application/ajax/common_file_upload.php',
secureuri:false,
fileElementId:'STUDENT_AVATAR',
dataType: 'json',
success: function (data, status) {
alert("Upload Complete.");
}
});
}
});
});
One can see that you have error in jQuery.handleError function which is depreciated from jQuery 1.5. jQuery Ajax File Uploader V2.1 provided from the download page included jQuery 1.2.1.
One have to fix the code of Ajax File Uploader to solve the problem. See the answer and the answer for example or this one. You can consider to use another Plugin for file upload like jQuery Form Plugin (and here), see here.

JQuery UI dialog cannot load page content dynamically?

I have used a tutorial http://www.devcurry.com/2010/06/load-page-dynamically-inside-jquery-ui.html to dynammically load an aspx page into a jquery ui dialog without using an iframe
eg.
$(function() {
$('<div>').dialog({
autoOpen: true,
modal: true,
open: function() {
$(this).load('Example.aspx');
},
height: 400,
width: 400,
title: 'Dynamically Loaded Page'
});
When I debugged this page it just loading a blank dialog box with none of the content in even though the page has content. I have written it with the paths
eg $(this).load('/Home/Example.aspx');
I have even added in a function to check if it is loading
eg $(this).load('/Home/Example.aspx', function(){alert(Load Successful);}); which does return true YET still no content in the dialog
I am using Jquery 1.3.2 an ui 1.7.3 with ASP.Net Mvc
I know there are lots of questions/answers on this topic on stackoverflow but none of them seem to be successfully answering my problem and as these questions seem a year old not sure whether someone will get back to me asap.
Any ideas on showing the content in the dialog
Thank you
Just a thought, try changing your selector to
$('<div></div>').dialog({
Also the example you cited is using jquery 1.4.2 and jquery ui 1.8.1,
can you upgrade?
Edit:
You could also try it this way.
$(function() {
$('<div></div>').load('Example.aspx', {},
function(data) {})
.dialog(
{
autoOpen: true,
modal: true,
height: 400,
width: 400,
title: 'Dynamically Loaded Page'
}).dialog('open');
});
Note I haven't tested this, but its the way I do it. Hopefully you get the idea.
The answer is...
$(function() {
$('<div></div>').hide().load('Home/Example #content_form', function() {
$(this).dialog({
autoOpen: true,
modal: true,
height: 400,
width: 400,
title: 'Dynamically Loaded Page'
})
})
With Example.aspx having a tag with ID = content_form

How do I get the Id of a button of a jquery UI dialog?

as the title says....
this is what I have tried but not working
$('#uxReferralAssessmentDetailsDialog').dialog({
autoOpen: false,
modal: true,
width: 400,
title: "Referral Assessment",
buttons: { "Save":{ id: 'uxbtnSaveAssessment', click:othis.OnAssessmentSave}, "Cancel": function() { $(this).dialog("close"); } }
});
I am using selenium and instead of the horrid xpath I want to use the id of each element to simplify the xpath
any ideas welcome
If you are having a hard time determining id as and other things that are being added to the html page by javascript on the fly. Try using a development tool for web browsers like firebug which is an addon for firefox:
See link for firebug addon for more information:
https://addons.mozilla.org/en-US/firefox/addon/1843

Jquery.Validate and MVC Framework

Alright this problem has been driving me a little crazy.
I have a checkbox on my form that looks like this:
<%=Html.CheckBox("Agreement", false)%>Yes, I agree to the terms
And then I have a js file that is loaded into the browser after jquery and jquery.validate are loaded that looks like this:
$.validator.setDefaults({
submitHandler: function() { alert("submitted!"); }
});
$().ready(function() {
// validate signup form on keyup and submit
$("#campForm").validate({
rules: {
Agreement: "required"
},
messages: {
Agreement: "Please accept our policy"
}
});
});
So reading the documentation this should work but it never does. What am I doing wrong?
I thought the syntax was supposed to be:
rules: {
Agreement: {required: true}
}
I could be wrong though. This is just off the top of my head.
Are you returning validate on the form submit? Just a guess...

Resources