I am working on a project and I'd like to use Jquery UI for some of the forms like adding and updating stuff instead of normal pages. I designed the dialog, set up the form but it works only if the form/div is in the same file as the button. I am using CodeIgniter for this project by the way.
So I have few questions:
Does JQuery UI dialogs support using divs from separate files? (if the button is not in the same file as the form/div)
If it does, how can I use a div that is in a different file (instead of placing the div in the same file with the button where I have few other components)?
Example:
index.php
<body>
<input type="button" id="add_new" value="add new" />
</body>
form.php
<body>
<div id='"new_user_form'>
<input type="text" id="name" />
<input type="text" id="username" />
<input type="password" id="password" />
<input type="button" id="add_user" value="add new" />
</div>
</body>
custom.js
$(document).ready(function ()
{
$('# add_new ').click (function ()
{
$("# new_user_form ").dialog
({
title: 'Add new user',
height: 400,
width: 600,
resizable: false,
modal: true,
draggable: false,
buttons:
[
{
text: 'add new',
id: ' add_user ',
click: function()
{
alert("Testing 123...");
}
},
{
text: 'cancel',
click: function()
{
$(this).dialog('close');
}
}
]
})
})
})
thanks for reading, hope someone can help me!
It is totally possible, but I noticed a few errors :
You wrote id='"new_user_form', it could make " part of the id.
Same for this selector $('# add_new ') and $("# new_user_form "), trim it.
You declare your .dialog() on a div that is probably not yet in the DOM, since you load it from form.php.
do not use body in a page you will append, or you might end up with two body tags.
You could load form.php with something similar to .load("form.php"), you will have to remove those body tags from form.php :
$("body").load("form.php",function()
{
$("#new_user_form").dialog(
{
// your options
});
});
Or you can also declare a dialog and replace its content when you need to, you will have to remove body and div from your form.php in order to use this code :
<div id='new_user_form' style='display:none;'></div> <!-- somewhere in your index.php -->
// when document ready is triggered
$("#new_user_form").dialog();
// when you need it :
$("#new_user_form").load("form.php",function(){$("#new_user_form").dialog("open")});
I don't know why the load() function didn't work but I found a better way to fix this problem.
How I did it:
users_view.php (previously index.php)
<body>
<input type="button" id="add_new" value="add new" />
<div id="new_user_form">
<?php $this->load->view('add_user_form'); ?>
</div>
</body>
add_user_form.php (previously form.php)
<div>
<input type="text" id="name" />
<input type="text" id="username" />
<input type="password" id="password" />
<input type="button" id="add_user" value="add new" />
<input type="button" id="cancel" value="cancel" />
</div>
custom.js
$(document).ready(function ()
{
$("#new_user_form").dialog
({
title: 'Add new userт',
height: 400,
width: 600,
resizable: false,
modal: true,
draggable: false,
autoOpen: false
})
$('#add_new').click (function ()
{
$("#new_user_form").dialog("open");
})
$('#cancel').click(function()
{
$("#new_user_form").dialog("close");
});
})
Thanks for the answers! I hope this will help other people :)
Related
I have loader in _Layout who activates when I press submit button:
$('button[type="submit"]').click(function () {
$.blockUI({
message: $('#bloqueocarga'),
baseZ: 99999,
css: {
border: 'none',
backgroundColor: 'none',
},
overlayCSS: {
backgroundColor: '#fff',
opacity: 0.7,
}
});
});
<div id="bloqueocarga" style="display:none;">
<img src="~/Content/loading.gif" />
</div>
For some reason in some pages works and into anothers no:
Button of index page where it no works:
<input type="submit" value="Generate" class="btn btn-xs" style="background-color:#3399FF;color:#FFFFFF" />
Button of index page where it works success:
<input type="submit" value="Save" class="btn btn-xs" style="background-color:#3399FF;color:#FFFFFF" />
As you can see there is not any difference, but I really don't know why no works in some pages. I debbug it with Chrome console and it load JS and div with .gif
Any other ideas why it no work just in some pages? Regards
here DIV tag by default display none. so...
<div id="bloqueocarga" style="display:none;">
<img src="~/Content/loading.gif" />
</div>
$('#bloqueocarga').show();
try it.
Currently i have my project which works this way
Keep Filling a form
Click on a button new window popups
fill data in popupwindow and submit
Popup window closes and data on that window is saved to database
Continue filling parent form and save the data
Now i want to replace the pop-up window with jQuery UI Dialog and perform the same operations
(Step 2 3 4)
Here some code
$( "#rtrDialog" ).dialog({
autoOpen: false,
height: 300,
modal: true,
width: 350,
buttons: {
"Continue..": function() {
alert("Button Clicked");
var url = "contractDetails.htm";
window.open(url, '_blank');
}
}
});
$("#RTRButton").click(function(){
$("#rtrDialog" ).dialog("open");
});
<!-- This form is used to capture the RTR related Dialogs -->
<div id="rtrDialog" title="Enter RTR Details">
<form>
<fieldset>
<p><b>Enter Details for ?</b></p>
<input type="radio" name="entity" value="applicant"/>Applicant<br/>
<input type="radio" name="entity" value="co-app1"/>Co-Applicant 1<br/>
<input type="radio" name="entity" value="co-app2" />Co-Applicant 2<br/>
<input type="radio" name="entity" value="co-app3" />Co-Applicant 3<br/>
<input type="radio" name="entity" value="guarantor1" />Guarantor 1<br/>
<input type="radio" name="entity" value="guarantor2" />Guarantor 2<br/>
<input type="radio" name="entity" value="guarantor3" />Guarantor 3<br/>
</fieldset>
</form>
</div>
How can i go about doing that ??
Do i have to do the jQuery-Ajax way ? Or is there anything better to do this
Use twitter bootstrap for opening the dialog box and perform your action..
http://getbootstrap.com/2.3.2/javascript.html#modals
check this..
Hope this will help ..
I'm trying to put a NumericTextBox into a Kendo template.
Here is the code:
<script type="text/x-kendo-template" id="clone-wizard-template">
<p>Bitte wählen Sie, wie viele Male Sie möchten <br />die Aktionsgruppe fortschreiben:
</p>
#(Html.Kendo().NumericTextBox()
.Name("custom")
.Value(10)
.ToClientTemplate())
<br />
/*some other lines*/
</script>
Which is strangely rendered into this:
<script type="text/x-kendo-template" id="clone-wizard-template">
<p>Bitte wählen Sie, wie viele Male Sie möchten <br />die Aktionsgruppe fortschreiben:
</p>
<input class="k-input" id="custom" name="custom" type="number" value="10" /><script>
jQuery(function(){jQuery("\#custom").kendoNumericTextBox({});});
<\/script>
<br />
/*some other lines*/
</script>
I cannot understand from where comes </script> tag...
I'm loading a template into a modal window by using this code:
editAktionsgruppen.kendoWindow = $("<div />").kendoWindow({
title: "Bestätigen",
resizable: false,
visable: false,
modal: true
}).html($("#clone-wizard-template").html()).data("kendoWindow");
Isn't this a correct way to input a control in the template?
I would probably write it like this:
var popUpWindow = $("<div />").kendoWindow({
title: "Bestätigen",
resizable: false,
content: {
template: kendo.toString($('#clone-wizard-template').html())
},
visable: false,
modal: true
});
//add kendo validation to popup window
$('#my-form').kendoValidator();
//initialise the numeric textbox (you could specify a class on the input and find
//by that instead instead of using an id)
$('#NumInput').kendoNumericTextBox();
//wire-up an ok/submit button
$(popUpWindow).find('.t-button').on('click', function() {
var validator = $('#my-form').data('kendoValidator');
if(valiator.validate())
{
// do stuff
}
});
//show the window
$(popUpWindow).data('kendoWindow').center().open();
then the client template:
<script type="text/x-kendo-template" id="clone-wizard-template">
<form id="my-form">
<p>Bitte wählen Sie, wie viele Male Sie möchten <br />die Aktionsgruppe fortschreiben:
</p>
<input id="NumInput" name="NumInput" type="number" required data-required-msg="number required" />
<br />
/*some other lines*/
<button type="button" class="t-button">my button</button>
</form>
</script>
I have a couple of jQuery datepickers inside a jQuery dialog. Whenever users select a date from the datepicker the screen scrolls to the top. This only happens in IE8 not the Firefox 3.6 or Chrome 5. Since the majority of users will user IE this is going to be very annoying. Can anyone give me a clue as to why this is happening?
Here is a snippet of the HTML for the dialog:
<div id="AppointmentDialog" style="display: none; font-size: 12px;">
<table>
<tr class="lesson notAvailable allDay">
<td>
Start
</td>
<td>
<input id="txtStartDate" type="text" readonly="readonly" style="width: 90px" class="lesson notAvailable allDay" />
<input id="txtStartTime" type="text" style="width: 50px" class="lesson notAvailable" />
<input id="hidStartTime" type="hidden" value="" />
</td>
</tr>
<tr class="notAvailable allDay">
<td>
End
</td>
<td>
<input id="txtEndDate" type="text" readonly="readonly" style="width: 90px" class="notAvailable allDay" />
<input id="txtEndTime" type="text" style="width: 50px" class="notAvailable" />
<input id="hidEndTime" type="hidden" value="" />
</td>
</tr>
</table>
</div>
Snippet of Javascript to initialise the dialog and datepickers:
$(document).ready(function() {
initDialogs();
});
function initDialogs() {
// Configure the New Appointment dialog
$("#AppointmentDialog").dialog({
autoOpen: false,
resizable: false,
width: 320,
modal: true,
title: 'Appointment',
buttons: {
"Close": function() { $(this).dialog("close"); },
"Save": function() {
// Function call
}
}
});
$.mask.definitions['h'] = '[012]';
$.mask.definitions['m'] = '[012345]';
$("#txtStartTime").mask("h9:m9");
$("#txtEndTime").mask("h9:m9");
// Init date pickers
$("#txtStartDate").datepicker({ dateFormat: 'dd-mm-yy' });
$("#txtEndDate").datepicker({ dateFormat: 'dd-mm-yy' });
};
EDIT
I'm using jQuery 1.4.2 and UI 1.8.2
I've looked into it again. The bug has been reported with a workaround.
I'm using a minified version of jQuery UI so the code looks like this:
(B?" ui-priority-secondary":"")+'" href="#">'+q.getDate()+"</a>")+"</td>"
(B?" ui-priority-secondary":"")+'" href="javascript:;">'+q.getDate()+"</a>")+"</td>"
I had this exact problem, but the real issue turned out to be duplicate ids on the page. Once I removed the duplicate id the problem went away completely.
I wasn't allowed to touch js libraries, I added this line under onSelect handler.
$('#ui-datepicker-div table td a').attr('href', 'javascript:;');
so my code looked like
$('#txtDate').datepicker({
// other properties
onSelect: function (selectedDate) {
$('#ui-datepicker-div table td a').attr('href', 'javascript:;');
// other code
}
});
You need to override the "$" placeholder with "jQuery" if the text contain "#"
I am using ASP .NET to display a JQuery dialog that has a few input fields. I now need these fields to submitted to an action method like how a normal HTML submit button would work on an ASP .NET MVC application. How do I accomplish this?
This is my form data:
All form fields are required.
<%Html.BeginForm("AddUser", "User"); %>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" />
</fieldset>
<%Html.EndForm(); %>
"
And this is my script:
$(function() {
$("#dialog").dialog({
bgiframe: true,
height: 400,
width: 600,
modal: true,
buttons: {
'Create user account': function() {
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});
Add a line to your code that submits the form:
$(function() {
$("#dialog").dialog({
bgiframe: true,
height: 400,
width: 600,
modal: true,
buttons:
{
'Create user account': function() {
$('#yourDialogFormID').submit(); // add this line
$(this).dialog('close');
},
Cancel: function() {
$(this).dialog('close');
}
}
});
});
You can set the ID by giving the Html.BeginForm() method an argument for htmlAttributes (type object if I remember the structure correctly - look for it in the overload methods in IntelliSense).
You can harvest the data from your form and post it using jQuery.post
$.post("someform.aspx", { name: $("#name").val(), email: $("#email").val() } );