I am using addNotice to display any message on screen. Now, I want to customize it and it should be removed after some time(let's say after 10 seconds) like we can do with javascript.
Is this possible to do this using default addNotice message of magento ?
Any Help would be appreciated.
add this script in your page
This will hide the div after 1 second (1000 milliseconds).
$(function() {
setTimeout(function() {
$('.messages').fadeOut('fast');
}, 1000); // <-- time in milliseconds
});
If you just want to hide without fading, use hide().
hope this will help you
Add this to your footer:
setTimeout(function(){
var messages = $$('.messages')[0];
if (messages){
$(messages).hide();
}
}, 10000)
The code above is the prototype version.
If you have jquery already in your website use what #magExp wrote. It's cleaner.
Let say your success message id is "success-msg", then write jquery like
$(function() {
// setTimeout() function will be fired after page is loaded
// it will wait for 5 sec. and then will fire
// $("#success-msg").hide() function
setTimeout(function() {
$("#success-msg").hide('blind', {}, 1000)
}, 5000);
});
Remember that you need to load jQuery Library..
Related
I have the following script, it reloads the forum topics every 3 seconds but I also want it to load as soon as the page loads, so that there is no delay the first time. The first time the page loads it takes 3 seconds before the topics show up.
Can anyone help me with this?
Thanks in advance.
<script type="text/javascript">
window.onload = function(){
function foo()
{
$('#forum').load('forum.php').fadeIn("slow");
} // refresh every 10000 milliseconds
setInterval(foo, 3000);
}
</script>
That is because you are waiting on the .onload event, which is fired when all resources/assets (like images) have been downloaded by the browser — this delay will be significant on bloated or resource-heavy sites, which will make a lot of HTTP requests and does not fire the onload event as early as you wish.
The solution? You should instead fire foo on DOM ready:
$(function() {
var foo = function() {
$('#forum').load('forum.php').fadeIn("slow");
}
// Will execute on DOM ready
foo();
setInterval(foo, 3000);
});
Note that $(function() {...}) is the equivalent of $(document).ready(function() {...}) in jQuery.
If you wish to also forcibly fire foo() when all resources are loaded up, just fire it again with:
$(function() {
var foo = function() {
$('#forum').load('forum.php').fadeIn("slow");
}
// Will execute on DOM ready
foo();
setInterval(foo, 3000);
// Also execute on window load
$(window).load(foo);
});
I'm using Simple:Press in Wordpress, and I have an Ajax auto-refresh code in the header, which refreshes ONLY the div that has the newest thread posts.
The page refreshes just fine, but won't load in any new posts in that thread.
Here's the code in my header:
<script>
var refreshId = setInterval(function()
{
$('.sfposttable').fadeOut("fast").load('response.php').fadeIn("fast");
}, 60000);
</script>
Any ideas why the div refreshes, but doesn't pull in any new posts?
I think you have to use first
$(document).ready(function() {
var refreshId = setInterval(function()
{
$('.sfposttable').fadeOut("fast").load('response.php').fadeIn("fast");
}, 60000);
});
Here is a working example: http://jsfiddle.net/943UA/
Also you may want to change the refresh time: 60000 -> 1 minute make it 2000 -> 2 sec for test purpose.
Is there a way to mask chart while loading?
LineChart has event 'afterrender', store has 'load' but it is not what i need.
I see sufficient delay between them and final chart rendering.
tnx
Env: extjs 3.3.1. flash
var chart = new Ext.chart.LineChart({
id: 'chart1',
store: store,
xField: 'name',
yField: 'visits',
listeners: {
'afterrender': function() {
Ext.getCmp('chart1').getEl().unmask();
}
}
});
Why the heck would you use getCmp in an event of that Component? The function has arguments:
listeners: {
afterrender: function(chart) {
chart.getEl().unmask();
}
}
Also, be mindful of memory leaks as this would keep the listener on this chart until it gets destroyed but it only renders once
listeners : {
afterrender : {
single : true,
fn : function(chart) {
chart.getEl().unmask();
}
}
}
With single = true, it will remove itself after the first firing of the event. You can also put delay and pass in a number (in milliseconds) to delay the firing, buffer (not for afterrender) and pass in a number (in milliseconds) and all the same events within the number of milliseconds will be put into one event firing, scope to change the scope of the function. Some others but those are the top 4 options.
Try either the render or beforerender event hooks.
I think this will solve your problem
store.load({
scope: this,
callback: function(records, operation, success) {
Ext.getCmp('chart1').getEl().unmask();
}
});
else you can use the activate event of the chart to unmask it.
I'd like to implement a "auto-save" functionality on my page. I don't really know how to start though. I got one object (with a list of tasks). I'd like to submit the form every 20 seconds, so the users won't lose their data. It doesn't have to be exactly like that. After every submit the submit-button should be disabled as long as there are no changes.
I'm using Spring MVC. I did some research but I'm not an expert in jQuery, Spring... So it's all pretty complicated for me. A tip, or a working example would help me a lot.
It's a pretty complex form (a timesheet). There are +/- 50 textboxes on one page (minimum, depends on the number of tasks available)
Thanks.
I don't know what spring mvc is, but in ASP.NET MVC I would do the following:
I assume all your data is in a form, you give the form an ID, then post it:
$(function () {
var timer = 0;
$(this).mousemove(function(e){
timer = 0;
});
$(this).keypress(function() {
timer = 0;
});
window.setInterval(function () {
timer++;
if (timer == 20) {
$('#form').submit(function() {
});
}
}, 1000);
});
Checks for mousemove, keypress, if this isnt done in 20 seconds then it saves the form.
Edit: What you could also do maybe is, after every textbox they fill in, post the data: as followed:
http://api.jquery.com/change/
$('.textbox').change(function() {
$.ajax({
url: '/Save/Textbox',
data: 'TextBoxId=' + $(this).id + '&TextValue=' + $(this).value
});
});
In this example, you make a controller called Save, action called Textbox, you give the textbox the ID of data that it has to save, and on change (after un focussing the textbox), it posts the textbox id, and the value of the box.
then in the controller you retrieve it:
public void SaveText(string TextBoxId, string TextValue) {
// SAVE
}
Below Js script will help you to make ajax call when ever form field changes.
<script>
$(document).ready($('.form-control').change(function() {
$.ajax({
type : "post",
url : "http://localhost:8521/SpringExamples/autosave/save.htm",
cache : false,
data : $('#employeeForm').serialize(),
success : function(response) {
var obj = JSON.parse(response);
$("#alert").text(JSON.stringify(obj));
$("#alert").addClass("alert-success");
},
error : function() {
alert('Error while request..');
}
});
}));
</script>
I have a search form that show live results in a specified div (look at there Filter results with Jquery)
I've modified the script a little bit and now when a user check one of the checkboxes the results div automatically refresh. The load function is handled by onChange event.
Is there a way to get ajax loading the result script after a specified time?
For example, if I select one checkbox the script should wait 2 seconds before load the script. In this way an user can check, for example, 2 or 3 checkboxes and when it stop to make his selection ajax will load the script.
--edit--
The ajax call for the script isn't done through a function, this is the code:
$(document).ready(function()
{
$('#category_filter').click(function()
{
var catArray = new Array();
var j = 0;
for(var i = 0; i < <?php echo $categories_count;?>; i++)
{
if(document.category_filter.filter_id[i].checked == 1)
{
catArray[j] = document.category_filter.filter_id[i].value;
j++;
}
}
if(catArray[0])
$.ajax(
{
type: "POST",
url: "index.php?action=ticket-search",
data: ({ filter: 'category',filter_id : catArray.toString() }),
success: function(msg)
{
$('#t_content').html(msg)
.hide()
.fadeIn(700, function() {});
}
});
});
});
});
Try using setTimeout.
Example
setTimeout("alert('hello')",2000);
Use the setTimout function. Like so:
var timer = setTimeout(yourFunction(), 2000);
However, make sure to attach an event to clear that timeout whenever a new button is checked or else you end up firing the Ajax many times.
if(timer) { clearTimout(timer); }
var timer = setTimeout(yourFunction(), 2000);
You may use a setTimeout() call to wait a few seconds.
var t = setTimeout(myAjaxFunction, 2000); //wait two seconds
You may need to check if a Timeout is already set if you are allowing the user to click multiple checkboxes. This is to avoid multiple AJAX calls each waiting 2 seconds. The logic will then be:
User Clicks
Is there a timeout? If yes then ignore the click
Else Set a timeout for the AJAX call