I upgraded struts from 2.3.15.3 to 2.3.16.3.
struts jquery plugin - 3.7.1
struts jquery tree plugin - 3.7.1
java servlet api - 2.4
jquery-ui.js - 1.10.4
I have done the above changes! css are working and jquery is also working fine. But none of the modal dialogs (popups) are opening up. Have I missed Anything?
Can you help me in this?
I use tiles in my app. modallayout is not working..
This is how I open the popup
<s:url var="editURL" action="edit" namespace="/app/edit" method="load" escapeAmp="false"/>
<td onclick="openedit('<s:property value="#editURL"/>','<s:property value="Id" escape="false"/>')">
<sj:a
id="editCPlink"
button="true"
href="#"
>
Edit
</sj:a>
</td>
function openedit(modalURL,Id) {
var options_modaldialog = {};
winopen(options_modaldialog);
options_modaldialog.height = 250;
options_modaldialog.width = 870;
options_modaldialog.title = 'Edit';
options_modaldialog.id = "editdialog";
options_modaldialog.position = [ 250, 40 ];
options_modaldialog.href = modalURL;
jQuery.struts2_jquery.bind(jQuery('#editdialog'),
options_modaldialog);
}
Finally got the issue resolved.
jQuery.struts2_jquery.bind() have been replace by jQuery.struts2_jquery_ui.bind()
This is because the upgraded struts2jquery plugin 3.7.1 is more compatible with struts2_jquery_ui binding than struts2_jquery. so jQuery.struts2_jquery_ui.bind() can be used to load the popup.
Note: Make sure to replace the js and css files of all the upgraded js.
Related
I have come across this strange problem and it is driving me nuts.
It looks like a bug, but I don't know if maybe I am doing someting wrong.
The CSS attached to a component via cssUrl doesn't work on Internet Explorer.
If I add some content to the html template and I use classes from the CSS, those classes are not applied in IE. However, the same code works fine in Dartium, Chrome and Firefox.
I have created a sample project in github showing the error:
https://github.com/gonzalopezzi/ie-angulardart-shadowdom-bug
The project has the following dependencies:
dependencies:
browser: 0.10.0+2
angular: 0.11.0
shadow_dom: 0.10.0
(I have tried to avoid "any" but those are the latest versions of such packages)
I have a very simple component:
import 'package:angular/angular.dart';
#Component(selector: 'internet-explorer-bug',
templateUrl:'internet-explorer-bug/internet-explorer-bug.html',
cssUrl:'internet-explorer-bug/internet-explorer-bug.css',
useShadowDom: true,
publishAs: 'cmp')
class InternetExplorerBug {
}
This is the css file (internet-explorer-bug.css):
.red-div {
background-color: red;
}
And this is the template (internet-explorer-bug.html)
<div id="main-div">
<div class="red-div">Red background?</div>
</div>
The component works properly in Dartium, Chrome and Firefox. It doesn't show the red background in Internet Explorer, though.
I have tested it in Internet Explorer 10 and 11. These are the results:
The red background is not displayed
The browser downloads the css file (I can see that in IE dev tools)
If I inspect the DOM, I see a strange css attribute assigned to the div with the name "background-color:red" and no value:
.red-div {
background-color:red: ;
}
I have posted the same question in the mailing list (here). If I somebody helps me there I will post the solution here too.
Any help will be appreciated.
Thanks in advance.
I guess this line causes the problem
<script src="packages/shadow_dom/shadow_dom.min.js"></script>
This is deprecated. You should use
<script src="packages/web_components/platform.js"></script>
You need to change your pubspec.yaml too (shadow_dom to web_components)
First of all, I'm a novice at this stuff so excuse my "ignorance."
I am creating a form in order for customers to schedule a test drive on a vehicle they are interested in purchasing. I have found jquery code which I've included in the head section as follows:
$(function() {
$( "#datepicker" ).datepicker({ autoSize: true });
$("#time1").timePicker();
// 09.00 AM - 03.30 PM, 15 minutes steps.
$("#time2").timePicker({
startTime: "09.00", // Using string. Can take string or Date object.
endTime: new Date(0, 0, 0, 15, 30, 0), // Using Date object.
show24Hours: false,
separator:'.',
step: 15
});
});
In the form, I have added the following:
<b>Pick a Date and Time</b><br>
<span class="auto-style7">Date: </span>
<input type="text" id="datepicker" name="testdrivedate" style="width: 91px" /><br>
<span class="auto-style7">Time: </span>
<input type="text" id="time2" name="testdrivetime" size="10" value="09.00 AM" style="width: 87px"/><br>
The datepicker works well, when the user clicks in the field, the calendar shows up just below the field and when a date is selected, the field is populated with the date selected.
However, the timepicker field does not work. 09:00 AM appears in the form, but when the user clicks in the field, no drop down appears in order to allow for selection of a different time.
Where have I gone wrong?
Thanks for any assistance.
Anna
Based on your comment above, I would guess your code is not executing because you have not included jquery.timePicker.js in your code. Download the file and include it like this:
<script src="path/to/your/js/file/jquery.timePicker.js"></script>
You don't need to include datePicker.js because datepicker is a plugin included with the jquery-ui library. (So really you do have datepicker included!)
Also, looking at your comment, you do not need to have a ; after declaring a <script> tag
Like this:
<script></script>
Not like this:
<script></script>;
EDIT
I found the issue, it appears the jquery.timepicker.js library is quite old (2009). It was developed with a much older jquery version. When I run jquery.timepicker.js with a newer version of jquery, I get this error in the console:
Uncaught TypeError: Cannot read property 'opera' of undefined on jquery.timePicker.js line 130
When I checked line 130 in jquery.timepicker.js, the error was complaining about $.browser being undefined. You are using jquery 1.9.1, and as of jquery 1.9 the jquery website states this about the $.browser object:
This property was removed in jQuery 1.9 and is available only through the jQuery.migrate plugin. Please try to use feature detection instead.
See this page for more information on the jquery browser element: http://api.jquery.com/jQuery.browser/
It looks like you would have to try and use the jquery.migrate plugin if you want to get $.browser and jquery.timepicker.js to work. I'm not sure how difficult this will be as I've never used the jquery.migrate plugin before.
As another a solution, it looks like jquery 1.8.3 plays nicely with both jquery.timepicker.js and jquery-ui 1.10.3 (which is what you are also using). You can either use jquery 1.8.3 instead of 1.9.1:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Or you should use the latest version of jquery, jquery-ui and a newer jquery timepicker plugin. On google search, the first entry for jquery timepicker is this one http://trentrichardson.com/examples/timepicker/ dated May 5th, 2013 which is quite recent. That might work better for you.
Good luck!
I have trying to create file upload using jQuery-UI dialog and uploadify. I have seen that others also had similar problem, but it was always z-index in css or cross-browser issue, which is not case here because it just won't work in any browser. When I place uploadify div(div that is a placeholder for flash object) outside the jQuery dialog everything works fine, but when I try to put it inside, swf gets loaded but when dialog pops I get error: 'Object expected' in jquery.min.js on
var c=a.getAttributeNode("tabindex")
Is it possible that problem is caused by jquery version? Current version is 1.7.1 and I tried using also 1.9.0
Add the following CSS class to override the default z-index value 1
.swfupload {
z-index: 10000 !important;
}
this error in absence function getAttributeNode and getAttribute in Flash element.
change in "jquery-min.js"
elem.getAttributeNode(name) // OR a.getAttributeNode(b)
to
(elem.getAttributeNode?elem.getAttributeNode(name):null) // OR (a.getAttributeNode?a.getAttributeNode(b):null)
and
elem.getAttribute(name) // OR a.getAttribute(b)
to
(elem.getAttribute?elem.getAttribute(name):null) // OR (a.getAttribute?a.getAttribute(b):null)
The Loading message in JQuery Mobile 1.1.0 doesn't seem to be working. Here is the JSFiddle for the code.
When I use version 1.0b2, it works as expected. Is this a bug in 1.1.0?
It is not a bug. Latest Jquery supports more config options. You can define the laoding message theme etc.
Refer the documentation here
Sample code
$(document).bind("mobileinit", function(){
$.mobile.loadingMessageTheme = 'a';
$.mobile.loadingMessageTextVisible = true;
});
Save above mentioned code in a js file (e.g. config.js ) and import it before importing jquerymobile framwork.
Good luck.
I am using Ubuntu 10.04 LTS version which has Firefox 3.6.3 version installed. I have a JqGrid in my web application which I am accessing from Firefox on Ubuntu system. But I do not see the navbar icons. Also the jQuery tabs do not work. What might be the problem?
OS : Ubuntu 10.04 LTS
JqGrid : version 4.1.2
FireFox : Version 3.6.3
Tabs : jquery-ui-1.8.1
The grid is displayed but the navbar icons (Add / Edit / Delete / Search / Reload) do not show. When we click on the tab it does not change the tabs.
#Update:
I do not have a link :( sorry about that. But on debugging the javascript on FireFox it was found that the functions which we are calling on events are not getting resolved.
Here is a snippet of the code:
$("#userList").jqGrid('navGrid',"#pager1",{add:true,edit:true,del:true,search:true,refresh:true,
beforeRefresh: function(){
$("#userList").jqGrid('setGridParam',{datatype:'xml'}).trigger('reloadGrid', [{page:1}]);
}},
{ recreateForm:true,
beforeShowForm:checkCookieExpireForUser
},{
recreateForm:true,
beforeShowForm:checkCookieExpireForUser
},{
recreateForm:true,
beforeShowForm:checkCookieExpireForUser
});
function checkCookieExpireForUser(formid) {
var currentdate = new Date();
var currentTime = currentdate.getTime();
if(currentTime > cookiInfo[6]) {
window.location.href = '<%=request.getContextPath()%>/jsp/index.jsp';
}
}
When this code is executed in Firefox it says that checkCookieExpireForUser is undefied.
The problem is solved.
Here is how I solved the problem. This might be useful to any one who is facing same problem.
In Firefox you need to add the function definition before the call. When I moved the definition before the call. JqGrid icons where displayed and it is working fine.