I am using "live-table edit" plugin from http://preview.jqueryajaxphp.com/livetableedit/ .Everything works perfectly ,However none of my edits are getting saved! What could be causing that? Everything looks fine. When I edit a cell, the briefly "flashes" pale yellow,it shows updated value in cell. But when I submit data updated field still will be having old value.When I checked html source(view-source) showing old value(AAA).
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="assets/css/custom.css" rel="stylesheet" type="text/css">
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/bootstrap-editable.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="extensions/TableTools/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="extensions/TableTools/css/jquery.dataTables.min.css">
<link href="media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
jQuery(document).ready(function() {
$.fn.editable.defaults.mode = 'popup';
$('.xedit').editable();
$(document).on('click','.editable-submit',function(){
$(this).closest('td').children('span').attr('id');
$('.input-sm').val();
$(this).closest('td').children('span');
});
});
Please help me.
Related
Working with a typical ASP.NET MVC site.
Adding the following to site.css and it doesn't work.
.k-upload {
max-width: 280px;
}
Here's what's being generated by my bundles:
<link href="/Content/bootstrap.min.css" rel="stylesheet"/>
<link href="/Content/site.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.common-bootstrap.min.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="/Scripts/kendo/kendo.all.min.js"></script>
<script src="/Scripts/kendo/kendo.aspnetmvc.min.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
I want the upload div to be the width of the input boxes (280px).
Here's a screenshot of the problem:
Apparently, the old css was cached in Chrome. Flushed the cache and the css listed above works perfectly.
I am facing problem of stabilizing styles in my html page.
Whenever I am using datepicker (jqmobile UI datepicker), the look and feel is affected terribly. The icons on the header, the icons for closing dialog, the icons for type dropdown all vanishes.
Here is my header portion,
<head>
<meta charset="UTF-8" />
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link type="text/css" href="styles/datepicker.css" rel="stylesheet" />
<link type="text/css" href="jquery-mobile/styles/jquery.mobile.simpledialog.css" rel="stylesheet" />
<script src="cordova.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="jquery-mobile/js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="jquery-mobile/js/jquery.mobile.simpledialog2.js"></script>
<script src="scripts/Common.js"></script>
<script src="scripts/FlightServices.js"></script>
</head>
If I comment out the line:
link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css
then the icons appear properly but datepicker style is spoiled.
If I put this line:
script src="scripts/datepicker.js"
instead of :
script src="scripts/jquery-ui.js"
Datepicker is completely disabled.
Is there any mistake I am making in this above mentioned portion?
Any wrong file included?
Anyone any suggestion, I shall be thankful.
Thanks
santu ghosh
The order of style sheets is important.
Change the order of style sheets instead of keeping one or the other. Usually, the themes style sheet template should be added first and then, your own style sheet(main.css) which adds in your own modifications to the base template. Edit your main.css to super-impose major conflicts.
I would also recommend putting the mobile style sheets conditionally for mobile platforms only unless this page is strictly for mobile anyways.
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link href="jquery-mobile/styles/jquery.mobile-1.3.1.min.css" rel="stylesheet" />
<link rel="stylesheet" href="jquery-mobile/styles/jqm-icon-pack-fa.css" >
<link href="styles/main.css" rel="stylesheet" />
I am pushing my static files to a CND for my web application. To do so I've used OmniFaces CDNResourceHandler that works fine. Except, my styles do not follow.
I am mapped as so :
javax.faces:jsf.js=http://.../jsf.js,
primefaces:primefaces.js=http://.../primefaces.js,
primefaces:jquery/jquery.js=http://.../jquery.js,
primefaces:jquery/jquery-plugins.js=http://.../jquery-plugins.js,
primefaces:idlemonitor/idlemonitor.js=http://.../idlemonitor.js,
primefaces-smoothness:theme.css=http://.../theme.css,
primefaces:primefaces.css=http://.../primefaces.css,
styles:main04.css=http://.../main04.css,
This works fine, except that my styles are all off. The rendered result is the same as when theme.css AND primefaces.css are not loaded.
If I remove these resources as being handled by the CDNResourceHandler, the page loads as desired. I can confirm that these files are being loaded by on the page (Inspect Element-> resources in web browser show that these are there and loaded).
Has anyone experienced PrimeFaces styles not working through CDN? Is there a way to get this to work?
My application runs on :
OmniFaces 1.6
Primefaces 3.5
Majorra 2.2
Glassfish 3.1.2.2 (also tried on Glassfish 4)
Edit 1
I have looked into this a bit further and it seems that the css files are not process : something with #{resources[]} within the CSS remains as such. This would be due to the file not meeting the Faces Servlet url-pattern. This leads me to believe to achieve what I am looking for I will need the CND resources to be processed...?
Edit 2
The weird thing is that the generated HTML has all the loaded resources. It just seems that the resources (Primefaces styles) are not processed if loaded via CDN.
This is the resources loaded when the page DOES NOT WORK. Everything is functional, except for the basic styles provided by Primefaces.
<link type="text/css" rel="stylesheet" href="http://.../theme.css" />
<link type="text/css" rel="stylesheet" href="http://.../primefaces.css" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>
By removing the Primefaces styles from the CDN, this following generated HTML works perfectly and generates the page as it should.
<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/theme.css.xhtml?ln=primefaces-smoothness" />
<link type="text/css" rel="stylesheet" href="/myapp/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" />
<link type="text/css" rel="stylesheet" href="http://.../main04.css" />
<link type="text/css" rel="stylesheet" href="http://.../main_compact.css" />
<link type="text/css" rel="stylesheet" href="http://.../ironmanCompact.css" />
<script type="text/javascript" src="http://.../jquery.js"></script>
<script type="text/javascript" src="http://.../primefaces.js"></script>
<script type="text/javascript" src="http://.../idlemonitor.js"></script>
<script type="text/javascript" src="http://.../jquery-plugins.js"></script>
<script type="text/javascript" src="http://.../jsf.js"></script>
<script type="text/javascript" src="http://.../jquery.ba-postmessage.js"></script>
<script type="text/javascript" src="http://.../tracker.js"></script>
<script type="text/javascript" src="http://.../socialMedia.js"></script>
Just replace the jsf resource lookup by a classic css lookup.
When i externalized my themes this were just two mass-replacements in my ide.
Instead of:
background:url("#{resource['primefaces:colorpicker/images/colorpicker_select.gif']}");
Use:
background:url("images/colorpicker_select.gif");
Or download changed resource and mapping from here:
http://forum.primefaces.org/viewtopic.php?t=38421
I have a <p:download> like this:
<h:form id="form1">
<p:commandButton id="downloadLink" value="Download" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop)"
icon="ui-icon-arrowthichk-s" actionListener="#{search.downloadActionListener}">
<p:fileDownload value="#{search.dwnloadFile}" />
</p:commandButton>
</h:form>
It doesn't work. The download button just reloads the page and doesn't show the Save As dialog. After checking every single thing, I came to know that if I remove the <h:head> tag from the page, then it starts to work.
I can't work without <h:head> as PrimeFaces look'n'feel and all ajax functionality depends on it.
Update: the generated HTML <head> with <h:head> is like this:
<head>
<link href="/Project2.0/javax.faces.resource/themes/sam/theme.css.xhtml?ln=icefaces.ace" rel="stylesheet" type="text/css" />
<link href="/Project2.0/rfRes/skinning.ecss.xhtml?db=eAG7mShzEgAFjAIg" rel="stylesheet" type="text/css" />
<link href="/Project2.0/javax.faces.resource/primefaces.css.xhtml?ln=primefaces" rel="stylesheet" type="text/css" />
<script src="/Project2.0/javax.faces.resource/jquery/jquery.js.xhtml?ln=primefaces" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/primefaces.js.xhtml?ln=primefaces" type="text/javascript"></script>
<link href="/Project2.0/javax.faces.resource/dock/dock.css.xhtml?ln=primefaces" rel="stylesheet" type="text/css" />
<script src="/Project2.0/javax.faces.resource/dock/dock.js.xhtml?ln=primefaces" type="text/javascript"></script>
<link href="/Project2.0/javax.faces.resource/layout/layout.css.xhtml?ln=primefaces" rel="stylesheet" type="text/css" />
<script src="/Project2.0/javax.faces.resource/layout/layout.js.xhtml?ln=primefaces" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/jsf.js.xhtml?ln=javax.faces" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/icepush.js.xhtml?v=9261182" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/bridge.js.xhtml?v=9261182" type="text/javascript"></script>
<script type="text/javascript">document.documentElement.isHeadUpdateSuccessful=true;</script>
<style type="text/css">.ice-blockui-overlay {position: absolute;background-color: white;z-index: 28000;opacity: 0.22;filter: alpha(opacity = 22);}.ice-status-indicator-overlay {position: absolute;background-color: white;z-index: 28000;opacity: 0.22;filter: alpha(opacity = 22);}</style>
<script src="/Project2.0/javax.faces.resource/compat.js.xhtml" type="text/javascript"></script>
<script src="/Project2.0/javax.faces.resource/icefaces-compat.js.xhtml" type="text/javascript"></script>
<title>
Project
</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
</head>
and without <h:head> it's like this:
<head>
<title>
Project
</title>
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="../Styles/jquery-ui-1.8.6.custom.css" rel="stylesheet" type="text/css" />
</head>
The HTML output of the <h:head> suggests that you're mixing PrimeFaces with ICEfaces. The main cause of your concrete problem is this script from ICEfaces:
<script src="/Project2.0/javax.faces.resource/icefaces-compat.js.xhtml" type="text/javascript"></script>
This basically turns every non-ajax submit button into an ajax submit button. This also includes the download button. But you cannot download files with ajax.
Remove ICEfaces altogether. You don't need it. It's basically a clone of PrimeFaces 2.x. But if you're already using PrimeFaces 3.x, then ICEfaces has utterly no additional value. Perhaps it was a leftover from previous experimenting with various JSF component libraries.
See also:
ICEfaces libary in classpath prevents Save As dialog from popping up on file download
Unrelated to the concrete problem, the HTML output also suggests that you're also having RichFaces in the runtime classpath. Whilst that should theoretically work fine together with PrimeFaces, I wouldn't recommend mixing them. RichFaces has in essence nothing which PrimeFaces doesn't already offer.
I am developing an iPad application with PhoneGap and jQueryMobile and Kinvey's Javascript method for data storage. It's working fine in simulator and I am not able to get it working in the iPad. I am attaching the index.html code below
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,width=device-width, user-scalable=no;" />
<meta charset="utf-8">
<link rel="stylesheet" href="jquery.mobile-1.1.0.css"/>
<link rel="stylesheet" href="jquery.mobile.structure-1.1.0.css"/>
<link rel="stylesheet" href="jquery.mobile.theme-1.1.0.css"/>
<link rel="stylesheet" href="datetime/jquery.mobile.datebox.min.css" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="phonegap-1.2.0.js"></script>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.mobile-1.1.0.min.js"></script>
<script type="text/javascript" src="datetime/jquery.mobile.datebox.min.js"/>
<script async src="kinvey-js.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
if(typeof Kinvey != 'undefined')
{
alert('Kinvey is there');
}
else
{
alert('Kinvey is not there');
}
});
</script>
</head>
<body>
Test
</body>
</html>
I am getting the alert message "Kinvey is there", when I run on simulator and I am getting the alert message "Kinvey is not there" on my iPad.
Have you tried loading the library non-async?, change
<script async src="kinvey-js.js"></script>
to:
<script type="text/javascript" src="kinvey-js.js"></script>
Since you're not pulling the library from our AWS bucket you don't need to load the library async. See if this helps make the loading more predictable.