I am sending the div content after modifications on page as a preview of that page in dialog box using clone in jquery.Now i want to make the cloned div which is previewed in dialog as readonly.How can i do that? help me
function callPreview()
{
$('#maincontainer').clone().appendTo('#previewDiv');
document.getElementById('previewDiv').disabled=true;
$.fx.speeds._default = 500;
$(function() {
$( "#previewDiv" ).dialog({
autoOpen: false,
width:600,
height:800,
autoClose: false,
show: "fold",
hide: "core",
resizable:false
});
$( "#previewBtn").click(function() {
$( "#previewDiv" ).dialog( "open" );
return false;
});
});
}
If readonly means that no input from user allowed,but still, the user can select and copy text, you can try to specify the 'readonly' attribute for each 'input' element in the div:
$("input","#previewDiv").attr('readonly', true);
$("#selector :input").attr("disabled", true);
This works for me!
Related
I am trying to use a dialogue box modal for displaying terms and condition on my webpage. But at button disagree the webpage doesnot close while calling function window.close. I want to close the recent page after clicking the button disagree
Below pasted is the sample code I am having problem at.
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:600,
width:400,
modal: true,
buttons: {
'Agree': function() {
$( this ).dialog( window.location.assign('../mdv/main.php') );
},
'Disagree': function() {
$( this ).dialog( window.close() );
}
}
});
});
</script>
Thank you in advance.
You do it like this:
<script>
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height:600,
width:400,
modal: true,
buttons: {
'Agree': function() {
$( this ).dialog( window.location.assign('../mdv/main.php') );
},
'Disagree': function() {
$( this ).dialog("close");
}
}
});
});
</script>
You can either close the dialog itself using the code above or you can close the window if it's a popup window opened previously via JavaScript.
In which case you'll need the reference of that to invoke the close method.
However you can't close an entire webpage/tab with JavaScript which is a javaScript limitation. As I mentioned, you can only close it if it was previously opened with JavaScript.
I am somewhat new to javascript and need to integrate couple plugins for one project. Is there a way to get customer_id (that was gotten when the dialog window was opened, and suggested by autocomplete) into "Create new job" button location.
I want to close first dialog after user clicks "Create new job" and then open new dialog window, but I want to pass customer_id from the first dialog window into second dialog window. There might be some dialog and autocomplete interaction that I might not understand, I just can't get customer_id before I call new_job() function.
$(function() {
$( "#dialog-name" ).dialog({
autoOpen: false,
})});
function customer_funct(){
$( "#dialog-name" ).dialog( "open" )
$(function() {
var name = $( "#name" );
$( "#name" ).autocomplete({
source: "suggest_name.php",
minLength: 2,
select: function( event, ui ) {
var customer_id = ui.item.customer_id;
// I am able to get customer_id here,
//now I need to pass it to the function below.
}
});
$( "#dialog-name" ).dialog({
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
"Create new job": function() {
$( this ).dialog( "close" );
cust_name = (name.val());
// is there any way to get "customer_id" at this location
// before I call new_job() function after the user selects customer
// from the database and clicks "Create new job"?
new_job(customer_id, cust_name);
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
By default the select event ui parameter only contains a "label" and "value" property
JQuery UI Autocomplete Success Event
In order to access a custom property you would need to explicitly add it after you retrieve your data via an ajax call. Similar to this post.
I guess I answer the question myself after some thinking. If someone else is working on jQuery autocomplete and dialog interaction, and if you need to open the new dialog window (in new_job(customer_id))with the id value from the previous dialog window and close that previous dialog window on success:
$(function() {
$( "#dialog-name" ).dialog({
autoOpen: false,
})});
function customer_funct(){
$( "#dialog-name" ).dialog( "open" )
$(function() {
var name = $( "#name" );
$( "#name" ).autocomplete({
source: "suggest_name.php",
minLength: 2,
select: function( event, ui ) {
var customer_id = ui.item.customer_id;
new_job(customer_id);
$(this).val(''); return false;
}
});
$( "#dialog-name" ).dialog({
autoOpen: false,
height: 300,
width: 500,
modal: true,
buttons: {
"Create new job": function() {
alert('Please select customer or click "Add New" customer');
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
});
}
I have a table that, when any row is clicked, launches a jQueryUI modal dialog box to allow users to edit that record. I use the following script which seems to work, successfully loading the relevant record's details in using AJAX:
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
var dialog = $('<div style="display:hidden" title="Record details:"></div>').appendTo('body');
// load remote content
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
dialog.dialog('open');
}
);
//prevent the browser to follow the link
return false;
});
It works ok the first time I click on a record, but if I click cancel and try to edit another record, the dialog box does appear (with the correct record details) however, no scripts within the dialog box work - eg: there's a jqueryUI datepicker input and some validation.
There are no javascript errors and, from my limited understanding of FireBug, I can't spot anything going wrong so I would appreciate some advice how to proceed, thanks!
EDIT: Argh! Sometimes, it takes something like typing it out here to spot the obvious. I just realised that the DIV created for the dialog box doesn't get destroyed when the box closes. I've added a line to do this and it now works. Thanks for listening. :)
For future reference, I added an ID to the DIV created in 'var dialog' and removed it in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
I'd still appreciate if anybody suggests a better way to handle this behaviour.
I fixed it: the DIV created for the dialog box doesn't get destroyed when the box closes.
I added an ID to the DIV created in 'var dialog' and removed the DIV in the Cancel function:
Cancel: function() {
$( this ).dialog( "close" );
$('#dialogbox').remove();
}
You can create the dialog at one time only, not on every load of its content, just set the autoOpen to false.
<div id="dialog">
<div id="content" style="display:hidden" title="Record details:"></div>
</div>
$('#dialog').dialog({
height: 440,
width: 550,
autoOpen: false,
modal: true,
buttons: {
"Update this record": function() {
$('#editform').submit();
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
});
$("#datatbl tr").bind('click', function() {
var url = 'item_edit.asp?id='+$(this).attr("data-myid");
// load remote content
$('#content').load(url);
$('#dialog').dialog('open');
return false;
}};
I am added div content into the dialog box using jquery.I am using the same div content to display in my page.Now i want to decrease the size of content by percentage which i am pushing in dialog.But it should apply only for the content of dialog not for the content on my page.So how can i do that using jquery?help me
$(function() {
$( "#maincontainer" ).dialog({
autoOpen: false,
width:50%,
height:400,
autoClose: false,
show: "fold",
hide: "core"
});
$( "#previewBtn").click(function() {
$( "#maincontainer" ).dialog( "open" );
return false;
});
});
you 'height:auto' property; this may work
I have this div in my master page.
<div id="UICancelChanges" title="Are you sure?" style="display: none;">
Your changes have not been saved. Are you sure you want to CANCEL ?
</div>
On click I am just opening Jquery dialog popup window..
CancelEdit = function (accountId) {
$("#UICancelChanges").dialog({
resizable: true,
height: 140,
width: 500,
modal: true,
buttons: {
"Yes": function () {
$(this).dialog("close");
},
"No": function () {
$(this).dialog("close");
}
}
});
return false;
};
Is there any way that I can change the Title of this Div popup dynamically? using same code I need to change the title dynamically?
How to open my popup window in the controller code?something like this?
return new JavaScriptResult() { Script = "alert('SubCategory Successfully Added. Thank You.'); window.location='/ObnCategory/Index';" };
Instead of alert i need to open the popup window.
Thanks
call this before you display the dialog
initialise:
$( "#UICancelChanges" ).dialog({ title: 'Dialog Title' });
to set the new title do
$( "#UICancelChanges" ).dialog( "option", "title", 'New Dialog Title' );
to get the title
var title = $( "#UICancelChanges" ).dialog( "option", "title" );
for more help on the properties visit http://jqueryui.com/demos/dialog/#option-title
Per the jQuery UI website documentation:
$( ".selector" ).dialog( "option", "title", 'Dialog Title' );
you can use this:
$("span.ui-dialog-title").text(anything);