The bootstrap bootbox alert gets faded if window reload is done as in the below mentioned code. If any one knows the solution please help.
bootbox.alert("Successfully created shipment. \n Transaction Hash is:" + data)
window.location.reload();
This is covered in multiple places in the documentation. To reiterate: Your location.reload call needs to be in the callback:
bootbox.alert("Successfully created shipment. \n Transaction Hash is:" + data, function(){ window.location.reload(); });
or
bootbox.alert({
message: "Successfully created shipment. \n Transaction Hash is:" + data),
callback: function(){
window.location.reload();
}
});
Related
What I want to do is actually very simple but i don't know how to achieve it.
The user can enter information and click on "bulk create" and create multiple objects. when finished, the user sees a flash message saying "Saved successfully". But the saving can sometimes take a bit longer, so I also want to show a message saying "Saving..." so the user knows something happens.
It should go like this:
user enters information
user clicks on create button
flash saying "Saving data..." appears
Controller finished and new flash appears that says "Saved successfully" (or "couldn't save etc." when it failed)
I have 1, 2, and 4, but I don't know how to achieve 3 since there is no redirect or something like that... Can I trigger a flash via javascript maybe? Or do I have to do something completely different?
What i propose is creating a div element in your view and placing it where your want your alert to appear. When button is clicked make AJAX post request:
$(".button").click(function () {
$("#alert_div").innerHTML = "Saving";
$.ajax({
url: '/form_submit',
type: 'POST',
data: formData,
success: function(){
$("#alert_div").innerHTML = "Saved successfully";
},
error: function(){
$("#alert_div").innerHTML = "Something went wrong!";
}
});
});
I am trying to update an collection in Meteor when a user clicks on a certain link. The link opens up a new tab, which is on an external site. However, I want to store this click in my database.
I have tried using e.preventDefault(), but then I can't get the link to open in a new tab. Any suggestions?
You can use a click event and use a window.location after inserting into the database.
So, it would look something like this:
Template.name.events({
'click a' : function(e) {
e.preventDefault();
// Insert data into database
Table.insert({
// data here
});
// Open new tab
window.open(url, '_blank');
}
});
You ought not to use javascript to open the new tab since this will activate the popup blocker. The best solution is to have a link, as normal, and track the link on the side:
Html:
<template name="link">
CLick
</template>
JS:
Template.link.events({
'click a#the_link': function(e,tmpl) {
MyCollection.update({_id: "the_link_id"} , {$inc { "clicks":1 } });
}
});
You can do the insertion in the server side which is secure. The window can be opened in the success of the response.
In Client
Template.name.events{(
"click .clickevent":function(e){
e.preventDefault();
Meteor.call("Methodname", datatoinsert,function(err){
if(!err)
window.open(url, '_blank');
})
}
)};
In Server
Meteor.methods({
Methodname:function(datatoinsert){
Tablename.insert({
//insert data here
})
}
});
In this way you can add event and on successful data insert you can open a window.
I hope it helps you.
i am working on a project which is based on jquery Mobile. i am a biggner in this field, so sorry for the silly question. the question is -- i have a page 'Page1' and i am using post method to fetch data from database. On success i am showing a notification to user through a notification dialog(without cancel and ok button). now what i want this success message on another page "page2", and the message should be there up to 2 sec and then disappear automatically. i have tried
function sendAddGuest(data, dialog) {
$.post("/GuestsList/AddGuest", data, function (response) { //using the post method
//alert(JSON.stringify(response));
$('.error').html("");
hideLoading();
if (response.result == 'success') { //if the process done
$.mobile.changePage('/GuestsList/Index', { dataUrl: "/GuestsList/Index", reloadPage: false, changeHash: true }); //To another page "page2"
// window.setTimeout('showToastMessage("Guest added successfully with window");',2000); //i have tried this
setTimeout(function () { showToastMessage("Guest added successfully test2"); }, 100); //and this also i want to show this message on other page "page2"
}
}
I am also beginning with Jquery Mobile, based in the toy project I am working with I would suggest the following:
Use popup from jquerymobile instead of showToast, then you could call
the .close() of the element in the settimeout function.
This is the div you create for your popup (you put it in the page 2):
<div data-role="popup" id="myPopup" class="ui-content" data-theme="e">
<p>Guest added successfully</p>
</div>
This is how you could call the function to open once in the new page (use the pageload event):
$('#myPopup').popup('open');
This is how you could call the function to close (in the same pageload event):
window.setTimeout(function(){ $('#myPopup').popup('close'); }, 2000)
Sorry I have no time to code a complete example, but I think this is the way to go.
Hope this helps!:-)
I have an ASP.NET MVC 3.0 partial view which is render inside a jquery ui dialog.
Inside this partial view I have some link which help me to display some more info.
#foreach (StatusType status in ViewBag.Status)
{
<li>#status.StatusMessage<a href='#' status='#status.StatusCode'><img src=#Url.Content("~/Content/Images/information.png") alt="See detail"/></a></li>
}
I've bound those link with the click event:
$('a[status]').live('click', function (e) {
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
var status = $(this).attr('status');
alert('#Model.Code');
...});
What is happening is when I click the first time on the link it will display me the correct Code (let's say 12). When I will load the partial view again for another code (66) it will display me two alert message, the first one with 12 (the old value I've clicked before) and the second one with 66.
The more partial view I will load the more value I will have in my alert.
I don't understand why it is keeping me like an history of all the code I've clicked.
If somebody have any idea on this problem, it will be welcomed, it just driving me mad.
Thanks in advance.
UPDATED
The use of the on instead of the live works, but I still have an issue with the dialog.
I've change the code with the solution proposed:
$('#StatusDiv').on('click', 'a[status]', function (e) {
e.preventDefault();
var status = $(this).attr('status');
alert('#Model.Code');
$('#StatusDialog').dialog({
autoOpen: false,
width: 800,
resizable: true,
title: 'Status Info',
modal: true,
open: function (event, ui) {
alert('#Model.Code');
$(this).load('#Url.Action("ViewStatusInfo")', { clientId: clientId, Code: '#Model.Code', status: status
});
}
});
$('#StatusDialog').dialog('open');
});
The first alert display the correct code, but the second alert inside the open function display the old one. On the second click it will work correctly but I don't understand how it can pick the old value since the first display is correct...
Thanks again for your help.
First of all: do not use live in last versions of jquery.
$('#list').on('click', '.status', function(e){
e.preventDefault();
alert(this.href);
});
Here we bind event to #list and when we will insert new links, everything will work.
Demo: jsfiddle.net/wPSH2/
My scenario is that In MVC
my page(view) has both user control(partial view) and master page. i have button in my page(view). while clicking on the button
1) i need to load grid in user control ,
2) i have to take div which is in master page for displaying acknowledge message like "Successfull loaded".
i saw in some forum to do these two actions seperately but i need to trigger these two in single button click.
How can i do this?
You can use javascript for this.
$("#button-id").live('click', function()
{
$('#master-page-message-id').text('Your message');
//Send request to server
$.ajax({
url: #Url.Action(...),
error : function(...){
$('#master-page-message-id').text('Your failure message');
},
success: function(data){
$('#master-page-message-id').text('Your success message');
//update your greed if you get json response
greed.update(data);
//OR if you get simple html response
$("#greed-id").html(data);
}
});
});