simple jquery dialog box can't create input - javascript

may any one help me create a input box inside my dialog box? i am using the jquery-ui.js. this is my code:
$(document).on("click",".savebtn",function(). {
var id = $(this).attr("id");
$.dialog({
title: "Activation date ",
content:"Activation date ",
create: function() {
$("#inputBox").val();
},
closeBack:function(){
$.dialog.message({
content: "The id is "+ id
});
},
buttons:[
{
text:"Click me"
}
]
});
});

You can try this:
Fiddle
HTML:
<div id='dialog' style='display: none;'>
<input type="text" />
</div>
<button>
Click Me!
</button>
Jquery:
$(document).ready(function() {
$("button").click(function() {
$("#dialog").dialog({
resizable: false,
modal: true,
title: "My Awesome Title",
buttons: {
"Do Something": function() {
alert("Do something if I was clicked.");
},
Cancel: function() {
alert("Dialog Canceled");
$(this).dialog("close");
}
}
});
});
});

Related

IF ELSE statements both are getting executed on click of a link in jquery

There is a student table, if the student is pass then i want to delete the record from the table on a click on link otherwise not and for that i am checking status and showing popup. But in both the cases it is showing me both the popup.
Bellow is my anchor tag :
<a data-dialog-href="#" id="delete-#Model.StudentId" href="#" data-status="#Model.Status">Delete</i></a>
and Jquery :
<script>
jQuery('body').on('click', '[data-dialog-href]', function (e) {
var studentStatus = jQuery(this).attr('data-status');
if (studentStatus == "Completed") {
$("#dialog-delete").dialog({
resizable: false,
modal: true,
title: "Confirm Delete",
height: 250,
width: 400,
buttons: {
"Yes": function (e) {
$("dialog-confirm").css("display: block");
$(this).dialog('close');
},
"No": function () {
$(this).dialog('close');
}
}
});
}
else
{
$("#dialog-ok").dialog({
resizable: false,
modal: true,
title: "Inforamtion",
height: 250,
width: 400,
buttons: {
"OK": function () {
$("dialog-confirm").css("display: block");
$(this).dialog('close');
}
}
});
}
});
</script>
div for popup :
<div id="dialog-delete">
Are you sure you want to Delete Student?
</div>
<div id="dialog-ok">
The student is not pass, Cant Delete this student.
</div>
dialog-ok is getting executed first then dialog-delete.
Please help me out. Thanks in advance.
You are getting value in studentStatus variable and you are using status variable in the rest of your code.

JQueryUI model not working as expected

First time I am using JqueryUI.
I am trying to pop a conditional modal to alert the user.
In my ajax call I have the following code:
.done(function (result) {
$('#reportData').append(result);
var totalColumns = '#(ViewBag.TotalColumns)';
if (totalColumns > 10) {
callDialog();
}
else {
print();
}
})
The callDialog function is:
function callDialog() {
$("#dialog-message").dialog({
modal: true,
draggable: false,
resizeable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 600,
dialogClass: 'ui-dialog-osx',
buttons: [{
text: "OK",
click: function () {
print();
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
});
};
The HTML for the modal is:
<div style="margin-left: 23px;">
<p>
Some Text
</p>
</div>
The issue I am seeing is the the modal appears, but then quickly goes away and the print() is then called.
I would expect the modal to appear and if the user clicks the OK button the print() would fire off and if the user clicks the cancel it woudl just close the modal.
From the API documentation: http://api.jqueryui.com/dialog/#option-buttons
The way you are using the button option is not correct.
Here is the working snippet:
buttons: [{
text: "OK",
click: function () {
print();
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]

Take selected DDL value an use as parameter for actionlink

I have an MVC view with a few dropdown lists. There is some custom validation on there that under certain conditions will show an action link by the side of the drop down list. These action links will pop up a modal window with information related to the choice made in the dropdown list.
My problem is that I can seem to see how to take the value chosen from the dropdown and get it in to my ajax request!!
Here is my code: (dropdown)
<div id="holderlist">
#Html.DropDownListFor(i => i.holderid, (SelectList)ViewData["holdersList"], "", new { #class = "chosenlist" })
</div>
(action link)
<div id="add" style="display:none;">
#Html.ActionLink("Actions", "existingOfficers", "Roles",
new { id = ?????<how do I get DDL chosen ID here> },
new { #class = "openDialog", dialog_id = "productDetail", dialog_title = "Workflow Centre" })
</div>
(ajax request)
<script type="text/javascript">
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
$("<div></div>")
.addClass("dialog")
.attr("id", $(this).attr("dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("dialog-title"),
close: function () { $(this).remove() },
modal: true,
width: 706,
height: 300
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
What I cant do is get the ID set to the ID of the value chosen in the DDL. The DDL value isn't at this point stored in the database as this is essentially a new input form.
Any help would be greatly appreciated :-)
jQuery(function($) {
$('.helpButton').each(function() {
$.data(this, 'dialog',
$(this).next('.helpDialog').dialog({
autoOpen: false,
modal: true,
title: 'Info',
width: 600,
height: 400,
position: [200,0],
draggable: false
})
);
}).click(function() {
$.data(this, 'dialog').dialog('open');
return false;
});
}); ​
You can test here

jQuery dialog and ajax postback

A page on my site are auto-reloading every 15th second. It's being done by using jQuery's .ajax function.
My problem are, that everytime the page are being loaded by the user, the form in the dialogs work fine.
But when it's reloaded automatically by the page itself, the inputs are being moved OUTSIDE the form.
Many on the internet writes, that it is possible to move it back into the form by appending a div into the first form found. My problem is, that when i try to move my "input-wrapper" back into the form, i get a hirachy-problem.
Can anyone help? Or point out an alternative solution?
My jQuery-script:
<script type='text/javascript'>
var intval;
var xmlhttp;
function init() {
$('#dialog:ui-dialog').dialog('destroy');
$('.ui-dialog').dialog({ modal: true, draggable: false, resizable: false, autoOpen: false, open: function(event, ui) { stopTimer(); }, close: function(event, ui) { startTimer(); } });
$('#targets').dialog({ width: 400, buttons: { 'close': { text: 'Luk', height: '30px', click: function() { $(this).dialog('close'); } }, 'submit': { text: 'OK', class: 'submit', height: '30px', click: function() { $(this).find('form').trigger('submit'); } } } });
$('#targets" & id2 & "Opener').click(function() { $('#targets').dialog('open'); return false; });
};
function startTimer() { intval = setTimeout('ajaxRefresh()', 15000); };
function stopTimer() { clearTimeout(intval); if(xmlhttp) xmlhttp.abort(); };
function ajaxRefresh() { xmlhttp = $.ajax({ url: '/', data: {h: 'ok'}, beforeSend: function() { stopTimer(); }, success: function(result) { $('body').html(result); } } }) };
$(document).ready(function() { init(); startTimer(); $('#targetsFormWrap').parent().appendTo('#targetsForm'); });
</script>
The HTML:
<div id='targets' class='ui-dialog' title='The Dialog Title' style='text-align: center; display: none;'>
<form id='targetsForm' name='targetsForm' method='post'>")
<div id='targetsFormWrap'>")
<input id='input1target' name='input1target' type='text' value='' style='width: 95%; />
<input id='input2target' name='input2target' type='text' value='' style='width: 95%; />
<input id='input3target' name='input3target' type='text' value='' style='width: 95%; />
</div>
</form>
</div>
you are trying to add targetFormWrap to targetsForm right? so just do:
$("#targetsForm").append($("#targetsFormWrap"));

javascript ok cancel pop-up button

I've tried a lot of things, but still can access a .js file from inside a form: please, can anyone tell me how it can be done?
this is what I am trying to call:
<script type="text/javascript">
if (confirm("Press 'OK' to leave, or 'Cancel' if you want to stay: "))
{
window.location="http://google.com";
}
else
{
Go back
}
</script>
this is how I've been trying to call:
<input type="BUTTON" value="Back to Main Page" onclick= ??? >
Thank you.
var answer = confirm ("Press Ok to leave. Cancel to stay.")
if (answer)
window.location="http://google.com"
else
window.location="http://www.mysite.com/"
You are adding HTML code inside of your JavaScript code. You need to separate them. Something like:
document.write('Go back');
would do the trick.
You need to make your code into a javascript function, like this
function sayHello()
{
alert('hello');
}
And in the button html:
<input type="BUTTON" value="Back to Main Page" onclick="javascript: sayHello();" >
// start active and inactive confirm message box
var Regionid = '#Model.RegionID';
if (Regionid != 0) {
$(function () {
$('#inactive').change(function () {
$("#ConformationDlg").html('#Constants.ChangeStatus');
$("#ConformationDlg").dialog({
title: "",
buttons: [
{
text: "Yes",
click: function () {
$("#ConformationDlg").dialog("close");
}
},
{
text: "No",
click: function () {
$('#active').prop("checked", true);
$("#ConformationDlg").dialog("close");
}
}
]
});
});
})
}
// End active and inactive confirm message box
$(function () {
$("#btnSubmit").click(function () {
var form = $("#frm");
var Regionid = $("#hdnRegionID").val();
if (form.valid()) {
if (Regionid == 0) {
$("#ConformationDlg").html('#Constants.AddFormSubmit');
$("#ConformationDlg").dialog({
title: "",
buttons: [
{
text: "Yes",
click: function () {
window.location.href = "../RegionFoodTypes/RegionFoodTypes";
$("#ConformationDlg").dialog("close");
}
},
{
text: "No",
click: function () {
$("#ConformationDlg").dialog("close");
}
}
]
});
}
else {
$("#ConformationDlg").html('#Constants.EditFormSubmit');
$("#ConformationDlg").dialog({
title: "",
buttons: [
{
text: "Yes",
click: function () {
window.location.href = "../RegionFoodTypes/RegionFoodTypes";
$("#ConformationDlg").dialog("close");
}
},
{
text: "No",
click: function () {
$("#ConformationDlg").dialog("close");
}
}
]
});
}
}
})
})
function resetFields(form) {
$("#ConformationDlg").html('#Constants.CancelForm');
$("#ConformationDlg").dialog({
title: "",
buttons: [
{
text: "Yes",
click: function () {
window.location.href = "../RegionFoodTypes/RegionFoodTypes";
$("#ConformationDlg").dialog("close");
}
},
{
text: "No",
click: function () {
$("#ConformationDlg").dialog("close");
}
}
]
});
}

Categories