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.
Related
When using the Kendo date picker under ASP Razor, the control opens outside the visible area if the picker is close to the bottom of the page. It also opens at quite a distance from the control.
#model [Company].DebugViewModel
<h2>Development Debug Page</h2>
#using (Html.BeginForm("Index", "Debug", FormMethod.Post))
{
<div class="form-group">
<label for="DebugDate">Blank Space:</label>
<div style="height:2000px; background-color:lightgray;"> </div>
</div>
<div class="form-group">
<label for="DebugDate">Debug Date:</label>
#Html.Kendo().DatePickerFor(a => a.DebugDate)
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary" style="width:120px;" value="Save" />
</div>
}
Here is an image:
In the end, thanks to the feedback I got, I decided to drop bootstrap from the project. Lucky for me this is a desktop only application.
Here is what I ended up using:
<style>
body {
padding: 0 0 20px 0;
margin: 0;
position:relative; /* Fixed Kendo widget box problem */
}
.form-container {
width: 100%;
max-width:800px;
margin: 16px auto;
}
</style>
<div class="k-content form-container">
<ul>
<li>
<label for="ID">ID:</label>
#Html.Kendo().TextBoxFor(a => a.ID)
</li>
<li>
<label for="Date">Date:</label>
#Html.Kendo().DatePickerFor(a => a.Date)
</li>
</ul>
</div>
Trying to finally change over to the 4.0 version of select2 and running into a problem.
All of this works perfectly fine on 3.5. On button click I open a bootstrap modal and load a remote page into it. I have tested all everything on a normal page (not in a modal) and it works correctly. When loaded in a modal as below the modal opens and everything like it always had for 3.5, but select2 is returning an error. I believe the issue here is the select2 is being loaded from a remote page... thing is this same remote loading method always worked flawlessly with 3.5.
TypeError: $(...).select2(...).select2(...) is undefined
js:
// show edit modal
$('#datatable2').on('click', '.dtEdit', function () {
var data = {
'filter_id': $(this).parents('tr').attr('id').replace('dtrow_', '')
};
$('#modal-ajax').load(
'/modals/m_filtering_applications_filters.php',
data,
function() {
$(this).modal('show');
changeSettings();
hourSelection();
}
);
});
// change filter modal confirmation
var changeSettings = function() {
// get the default filter
var default_filter = $("#filter_default").val();
//app list
$("#vedit-filter").select2({
placeholder: {
id: default_filter, // or whatever the placeholder value is
text: default_filter // the text to display as the placeholder
},
allowClear: true,
multiple: false,
tags: true,
createTag: function (query) {
return {
id: query.term,
text: query.term,
tag: true
}
},
ajax: {
dataType: 'json',
delay: 500,
type: 'post',
url: '/process/get_application_list.php',
data: function (params) {
return {
term: params.term, // search term
page: params.page, //page number
page_limit: 25, // page size
};
},
results: function (data, page) {
var more = (page * 25) < data.total; // whether or not there are more results available
return {
results: data.results,
more: more
};
}
}
}).select2('val', [default_filter]).on('change', function() {
$(this).valid();
});
}
m_filtering_applications_filters.php :
Just the contents of the modal which is loaded in :
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 class="modal-title">Change these settings?</h3>
</div>
<form id="application-filters-edit">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-12 margin-bottom-30 form-group">
<div class="input-modal-group">
<label for="vedit-filter" class="f-14"><b>Application to filter :</b></label>
<select id="vedit-filter" name="settings[filter]" class="form-control select2">
<option value="<?php echo htmlspecialchars($result['filter'], ENT_QUOTES, 'UTF-8'); ?>" selected=""><?php echo htmlspecialchars($result['filter'], ENT_QUOTES, 'UTF-8'); ?></option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="settings[users][]" value="<?php echo $result['user_id']; ?>"/>
<input id="filter_default" type="hidden" name="settings[original]" value="<?php echo htmlspecialchars($result['filter'], ENT_QUOTES, 'UTF-8'); ?>"/>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<?php
if (!$result)
{
//disable the button
echo '<button type="button" class="btn btn-primary disabled" data-dismiss="modal"><i class="fa fa-check-circle"></i> Save Settings</button>';
}
else
{
// show the button
echo '<button class="btn btn-primary" type="submit"><i class="fa fa-check-circle"></i> Save Settings</button>';
}
?>
</div>
</form>
</div>
</div>
UPDATE:
Okay, the error is coming from :
}).select2('val', [default_filter]).on('change', function() {
$(this).valid();
});
attached to the end... this is for using the jquery validation script (I did not include this in the jS here), and again, worked fine in 3.5. Can you not add on to the select2() anymore with 4.0 or something?
When removing this line the error goes away, but the display of the select2 is very small in width and I cannot gain focus on the search box to enter any values so it is still unusable within the modal.
UPDATE2:
Realized the events changed with 4.0 so this seems to work :
}).on("change", function (e) {
$(this).valid();
});
Still cannot enter anything into the search box though. Also, I notice if I click on anything other than the arrow in the input box to show the dropdown it acts as if the mouse is being held down - it highlights all the text/content within the modal.
Solution : All the issues I was having with the select2 in my bs3 modal were solved by adding the following in my js :
$.fn.modal.Constructor.prototype.enforceFocus = $.noop;
The highlighting of content/text is gone. The focus on the search box is gone. For now everything seems to work great. I do not have any information as to what this line actually does at the moment, but will be researching this to find out and will add it back here for future reference for anyone.
i have a search form whith jquery autocomplete on some fields.
<form id="prjs_form" class="prjcts" action="<wp:action path="/ExtStr2/do/enpim/projects/list.action" />" method="post">
<div class="row bord">
<div class="wid_ut">
<span class="label"><wp:i18n key="ACRONYM" /></span>
<span class="field"><input id="autAcronym" type="text" name="bean.acronym" value="${bean.acronym}" class="lrg autocomplete" /></span>
</div>
......................
<div class="row">
<div class="act_btns">
<input type="submit" name="search" value="<wp:i18n key='SEARCH'/>">
</div>
</div>
</form>
My need is to submit the form when I select one of the values suggested by autocomplete.
this is my jquery
jQuery('#autAcronym').autocomplete({
params: { type: 'project_acronym' },
paramName: 'text',
serviceUrl: '<wp:info key="systemParam" paramName="applicationBaseURL" />json/hall.ShowParameters',
minChars: 2,
select: function(event, ui) {
if(ui.item){
$(event.target).val(ui.item.value);
}
$('#prjs_form').submit();
return false;
}
});
when i start typing on field the autocomplete work fine, but when i select one of the suggested value the select event doesn't trigger....
what's wrong?
the other similar post on stackoverflow doesn't solved my problem
thanks in advance
I have two tabs with a submit button on each tab. When the button is clicked, I need to reload the content of that specific tab to get updated data from the server.
if (validStatus()) {
$.ajax({
//...
success: reloadTab
});
}
function reloadTab() {
var currentTab = $("#tabs").tabs("option", "active");
alert(currentTab);
$('#tabs').tabs('select', currentTab);
alert(currentTab);
}
When the button is clicked, the tab doesn't refresh. I see the first alert but not the second.
HTML is as follows:
Head:
<link rel="stylesheet" href="#this.Url.Content("//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css")" />
<script>
$(function () {
$("#tabs").tabs();
});
</script>
Body:
<div id="tabs">
<ul>
<li>The first tab</li>
<li>the second tab</li>
<li>Success</li>
</ul>
<div id="Success">
testing
</div>
<div id="Tab1">
<fieldset >
<legend>Overview</legend>
<input type="button" id="submit1" value="submit" />
<br />
</fieldset>
<fieldset style="width: 700px;">
<legend>Overview</legend>
<div>
<table >
//updated with ajax
</table>
</div>
</fieldset>
<script>
//reloadTab is in here
</script>
</div>
<div id="Tab2">
<fieldset style="float:left; width:300px;">
<input id="submit2" type="button" value="submit"/>
</fieldset>
<fieldset style="float:left;">
<legend>Overview</legend>
<table>
//updated with ajax
</table>
</fieldset>
<script>.....</script>
</div>
Turns out tabs.('select', ...) is deprecated, using tabs.('option', 'active', index) fixed my issue. Solution found in this comment: https://stackoverflow.com/a/16033969/1463649
Do you see anything in the console of your browser? What browser are you using?
Try this to help you with the debugging.
function reloadTab() {
console.log($('#tabs')); // if this is an empty object, the element doesn't exist when you call this function
console.log($('#tabs').tabs()); // if this doesn't return 'function', you haven't included a library properly, maybe jquery ui, or jquery, or you're using an old version or something
console.log(currentTab); // if this is undefined then something went wrong and no tab is active
var currentTab = $("#tabs").tabs("option", "active");
alert(currentTab);
$('#tabs').tabs('select', currentTab);
alert(currentTab);
}
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 :)