I am using "struts2-dojo-plugin-2.1.8.1.jar" this plugin for ajax. But i am facing several problems. Following is my jsp code
I have an HTML button to submit
> <button value="Approve" id="BTN_ID"
> onclick="saveUser();">Save</button>
Then i call a javascript function as follows on click of save
> function saveUser(){
> dojo.event.topic.publish("userSaveTopic");
> $('#BTN_ID').attr('disabled', true); var
> }
And i have an ajax div
<sd:div id="SAVE_DIV"
autoStart="false"
showLoadingText="false"
listenTopics="userSaveTopic"
href="userSaveAction"
theme="ajax"
formId="UserCreationForm">
</sd:div>
Problem :-
1) The action in href="userSaveAction" is executed on the load of HTML form though i have set autoStart="false"
2) The Second problem is that when i actually click on the button to save the data, it is submitted twice & data redundant records are inserted in database.
Please tell me how to solve the second problem on priority
Instead of using listenTopics , i used notifyTopics
Earliear
<sd:div id="saveExpense"
showLoadingText="false"
listenTopics="saveClaimDetails"
href="SaveClaimDetail"
theme="ajax"
formId="expenseClaim" >
</sd:div>
Now
<sd:div id="saveExpense"
showLoadingText="false"
notifyTopics="saveClaimDetails"
href="SaveClaimDetail"
theme="ajax"
formId="expenseClaim" >
</sd:div>
Related
I am working on JSF application in primefaces in that i am showing an information to the user via <p:messages> .
So when the user click submit the page will processed and the p:messages dialog will triggered to show the information to the user ,
I referred Primefaces p:messages showcase Page
It is working fine..But after it displayed the messages , it is not closing automatically either we need to close that dialog manually or it remains in open stage.
I need it should it close automatically after it displayed the message to user...
How can i do that ...Can anybody give suggestion that how can i do ?
<p:messages id="msgs"> is ultimately rendered as <div id="msgs"> and its contents is then updated with the factual messages to the user.
If you want to clear the message screen after some delay you should use the JavaScript setTimeout function after ajax call has been completed:
<p:commandButton ...
oncomplete="setTimeout(function() { $('#msgs").html(''); }, 3000);" />
The second parameter of setTimeout function is the delay in milliseconds.
The other alternative is to use <p:growl> instead.
Worked for me for <p:fileUpload>, which was in <p:dataList> and <h:panelGrid> elements.
<p:fileUpload...
oncomplete="setTimeout(function() { $('[id$=mr-upload-messages]').hide(1000); }, 2000);">
...
<p:messages id="mr-upload-messages" showDetail="true" showSummary="false" closable="true"/>
I have used jQuery $('[id$=mr-upload-messages]' to find id's which ends with mr-upload-messages, because Primefaces adds it's unique identifier at the beginning of id.
$('#msgs').html(''); immediately hide in 3 seconds but if you want to hide slowly as jquery hide method do this..
<p:commandButton ...
oncomplete="setTimeout(function() { $('#msgs').hide(1000); }, 3000);" />
hide(1000); hiding motion will be completed in 1 second
I came across the attention, and did it this way:
function hideMsg(){
$("#msg").delay(1000).hide(1000);
}
oncomplete="hideMsg()"
I have a menu header and when you click one of the menu links it directs to another page half way down (which i want) as it finds the relevant div id name. I was wondering if there is a way to clean the url back up again so it doesn't include the #id in my url? Tried window.location hash and this breaks it from scrolling and leaves the # in the url. Here is what i have:
In my menu: <li><a href="about#scroll-to" ....
And on the about page, it scrolls down to a div called #scroll-to..<div id="scroll-to"></div>
Any suggestions would be great. Thanks!
Using jquery, you can make a POST call to the target page when menu is clicked.
The POST data will contain the id of the div where you want to slide to.
On your target page, use your server language (php, asp) to output that id in a js variable and on document ready slide using jquery to that id.
Then you will have a clean url, and the page scrolling to your div.
---- edit: here comes the code!
Lets use jquery to make a POST to the target page, when a menu item is clicked. We will add a class, lets say, "mymenuitem". We will add this class to our link in the menu. So we will have
<li>Information about us</li>
(the onClick stops link from redirecting manually)
and an empty form (put it after the < body >)
<form id="slidinganchorform" method="post" action="YOURTARGETPAGE.HTML"></form>
then we will create the neccessary jquery so when the < a > tag with class "mymenuitem" is clicked, we will make a POST to the target page.
<script type="text/javascript">
jQuery(document).ready(function(){
$(".mymenuitem").click(function() {
// we will split the clicked href's value by # so we will get [0]="about" [1]="scroll-to"
var the_anchor_id_to_scroll_to = $(this).attr("href").split('#')[1];
// lets do the POST (we WILL TRIGGER a normal FORM POST while appending the correct id)
$("#slidinganchorform").append('<input type="hidden" name="anchorid" value="'+ the_anchor_id_to_scroll_to + '">');
$("#slidinganchorform").submit();
});
});
</script>
then in our YOURTARGETPAGE.HTML we will have something like (let's assume we use php)
<head>
<!-- make sure your jquery is loaded ;) -->
<?php
if($_POST['anchorid']!='')
{
?>
<script type="text/javascript">
jQuery(document).ready(function(){
// lets get the position of the anchor (must be like <a name="scroll-to" id="scroll-to">Information</a>)
var thePositiontoScrollTo = jQuery('#<?php echo $_POST['anchorid']; ?>').offset().top;
// Lets scroll
jQuery('html, body').animate({scrollTop:thePositiontoScrollTo}, 'slow');
});
</script>
<?php
}
?>
</head>
be sure the correct id must exist ;)
<a name="scroll-to" id="scroll-to">Information about us or whatever...</a>
(remove your old code because i changed some variable names and it will be difficult to debug if there are parts from the previous version. write everything from the start )
You can do this when the new page loads
history.pushState("", document.title, window.location.pathname);
However it will also remove the query string. Although, you could play with it a little bit to keep it
I'm displaying some form data in a jquery dialog. Everything works fine when I do this the first time. I can see the "my value" string in the dialog. If I reopen the dialog again for the second time the form value is no longer visible. Check out this jsfiddle to try it out yourself. This is the code:
var dialog;
$("#b1").click(function(){
dialog = $("<div></div>").html("<p><input id='input1' type='text'></p>").dialog({
autoOpen:false,
});
$("#input1").val("my value");
dialog.dialog("open");
});
This bug only happens when I add the html tags dynamically. If I use a static html block everything works fine. Any idea what is wrong here? Thanks!
That is because you are not destroying the old
<input id='input1' type='text'>
so when you call
$("#input1").val("my value");
it sets the value of first
<input id='input1' type='text'>
it finds in the DOM.
I'm using $.mobile.ChangePage() to navigate from one HTML page to another. But the contents of the page is not changing. while doing so the page URL changes but the new page is not loaded. it requires to be refreshed to load.
you should use JavaScript function to change the page..using
window.location = 'your page ';
hope it will resolve your problem !
In the code that you provided in the comments above, you are likely getting an error stating that next_page is not defined. Given that you are dealing with jQuery Mobile, try assigning the click handler slightly differently:
Change the definition of the link to something like this:
<a id="btnNextPage" href="#" >Details</a>
You don't have to give it an id - you could just use selectors to identify the link in the following javascript:
// the event handler
function next_page() {
$.mobile.changePage("http://www.google.com", {transition:"slide"});
}
// assign the click event when the DOM is ready
$(function() {
$("#btnNextPage").click ( next_page );
});
I've got a list with elements that contain links:
<a class="ui-link-inherit" href="#card_ops?card=1111">
and
<a class="ui-link-inherit" href="#card_ops?card=2222">
1) I click on first link my location in browsers changes on #card_ops?card=1111 - goes to page #card_ops.
2) I return on the previour page using back button.
3) Click on the second link with href="#card_ops?card=2222" my location in browsers changes AGAIN on #card_ops?card=1111 not 222
Is it possible to pass the params to the pages in jq mobile?
Here's one solution I've found. Not sure how well it works as I haven't tried it.
http://blog.digitalbackcountry.com/2011/12/passing-data-between-pages-in-jquery-mobile/