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!
Related
I've a modal bootrap view to edit values from datatable, and my problem now is when i edit an user in page 2,3,4.... when i redirect to index it goes to page 1, how can i go to page where i has before editing?
this is what i have in datatable:
var table = $('.tablesModel').DataTable({
"select": true,
"aaSorting": [],
"autoWidth": false,
//"dom": "<'row'<'col-md-2'B><'col-md-4'f><'col-md-6'p>>" + "<'row'<'col-sm-12'tr>><'row'<'col-sm-12'p<br/>i>>"
"dom": "<'row'<'col-md-2'B><'col-md-4'f><'col-md-6'p>r>t<'table-scrollable't><'row'<'col-md-4 col-sm-4'i><'col-md-2'l><'col-md-6 col-sm-6'p>>"
, lengthChange: true
, "columnDefs": [{
"visible": false,
"targets": hCols
}]
I assume you are using HTML-sourced data, i.e. when data is provided in <tbody> element. In this case you can use stateSave option to enable saving of table state which includes pagination, filtering, sorting and display length.
See this example for demonstration. Try to change page and then refresh the page.
In my application I have used the Dialog widget in jQuery UI but when I add jQuery Mobile the Dialog stops working.
$("#Global_Confirmation").dialog({
autoOpen: false,
width: 'auto',
modal: true,
closeText: "",
show: 'fade',
hide: 'drop',
title: settings.tital ? settings.tital : ''
});
I am referencing to the script files using Bundles.
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.
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
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