I have a page with multiple links to activate a modal, the issue is the first link works but none of the others allows the content to load in the modal.
link to Modal
$("#dialog-iframe").dialog2IFrame( {
height:900,
closeOnOverlayClick: true,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
fixed the issue - put it in a class
link to Modal
$(".dialog-iframe").dialog2IFrame( {
height:900,
closeOnOverlayClick: true,
closeOnEscape: true,
removeOnClose: true,
showCloseHandle: true,
});
Related
I'm trying to use iframe with in fancyapp 3 and I need to set the parameters preload and scrolling to false and auto, but with my current code I'm not able to do so.
Can you please check what it is wrong in it?
Follows the code:
<script>
$("[data-fancybox]").fancybox({
iframe : {
scrolling: 'auto',
css : {
width : '600px'
}
}
});
</script>
<a data-fancybox data "http://www.test.com">show</a>
You can do like this:
$("[data-fancybox]").fancybox({
speed: 230,
infobar: false,
buttons: false,
fullScreen: false,
thumbs: false,
closeBtn: false,
iframe: {
scrolling: 'yes' //'no'//'auto'
}
});
my jgGrid appears correctly, but the icons on the Navigator button are not appearing. There is an outline to the buttons and a tooltip when you hover over them, but no icon on the button, like a "+" or trash bin.
Also, is there a way to hide certain buttons and not others, like remove the add record butoon, but leave the delete record button.
I have followed the instructions relating to the style sheets and language files.
Below is the code that creates a grid:
// create the grid
$(gridName).jqGrid({
// server url and other ajax stuff
url: '/Admin/Blogs',
datatype: 'json',
mtype: 'GET',
height: 'auto',
shrinkToFit: false,
// columns
colNames: colNames,
colModel: columns,
// pagination options
toppager: false,
pager: pagerName,
rowNum: 10,
rowList: [10, 20, 30],
// row number column
rownumbers: true,
rownumWidth: 40,
// default sorting
sortname: 'PostedOn',
sortorder: 'desc',
// display the no. of records message
viewrecords: true,
jsonReader: { repeatitems: false }
});
$(gridName).navGrid(pagerName,
{
// settings
cloneToTop: true,
search: false
},
{}, // add options
{}, // edit options
{} // delete options
);
Make sure your page got jquery-ui.js and jquery.ui.theme.css with icons images in your css/images folger.
About hiding some buttons:
$(gridName).navGrid(pagerName,
{edit:false,search:false,del:true,add:true,view:false,refresh:false,cloneToTop: true},
// navigator options ( where true = show / false = hide )
{}, // add options
{}, // edit options
{} // delete options
);
if you will add custom buttons, just give them id and hide :
$('#buttonId').hide();
By adding jquery.ui.theme.css with the theme images folder everything worked.
I am completely new to jqGrid and simply having a hard time get started as every post seem to be very advanced. I simply have a simple grid setup and now want to add the 'add/edit' icons. I have below code but they still don't show up. What else is missing?
$("#tabPeopleList").jqGrid('navGrid', '#tabPagerBar', {
edit: true, <-- isn't this all there is needed?
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext:"Delete"
});
Everything looks good, just ensure that you have the following elements in your html:
<table id="tabPeopleList" ></table>
<div id="tabPagerBar"></div>
and in your jqGrid ititialization:
pager: $('#tabPagerBar'),
I'm able to create a jquery ui dialog using the following:
$("#dialogs .add_entry").dialog
({
height: 500,
width: 750,
autoOpen: false,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
modal: true
});
<div id="dialogs">
<div class="add_entry">Test</div>
</div>
But when I later use $("#dialogs .add_entry").dialog("open"); to open the dialog nothing happens (No js errors). I think it is selector related, switching the autoOpen to true shows the dialog. Has anyone come across this?
$(function(){
$element = $("#dialogs .add_entry");
$element.dialog({
height:500,
width:750,
stack: true,
show: "fade",
resizable: true,
title: "Add Entry",
autoOpen:false,
modal: true
});
$element.dialog("open");
});
This works if placed BEFORE the element. Does not work after. Also does not work with out variable, does not work without wrapper function... what a buggy function.
Try this:
$("#dialogs > .add_entry")
OR
$("#dialogs").children(".add_entry")
I am using a jqGrid that has allot of columns to it.
I added the view option (when clicking on a row and then on the 'view' button, in the bottom left corner of the grid, it opens a model with all the info for that row.
I see that the model has some css style:
overflow-hidden
Therefor if i have allot of columns to show after a certain height that i gave it when creating the grid, they get hidden.
How can i make that dialog box be:
overflow-auto
If possible i want only the inside div to scroll and leave the header of the dialog and the buttons on bottom there all the time.
How can i do this?
myGrid.jqGrid('navGrid', '#pager',
{ edit: false, add: false, del: false, search: false, view: true }, //option
{}, // use default settings for edit
{}, // use default settings for add
{}, // delete instead that del:false we need this
{},
{ height: 250, jqModal: false, closeOnEscape: true} // view options
);
I tried this:
$('#viewmod'+myGridId).css({overflow: 'auto'});
But it didnt work...
You tried the way described here and here.
Found the answer for this.
When declaring the view options add the dataheight option...
{ dataheight: 250, jqModal: false, closeOnEscape: true} // view options