I'm implementing an add wishlist function to my rails app. So far I can dialog the message and get it to fade after 5 seconds. The issue is, once faded out and the user clicks on another "add wishlist" no dialog. They have to refresh the page. Im still learning so I know what's going on. I need to close the dialog with js but how?
Coming from my last question:
HTML
<section data-id="notification"></section>
JavaScript
...
// Calling the notification();
// You need to reduce that data string!
notification("<div id='noti' class='alert alert-success'><a href='#' class='close' data-dismiss='alert' aria-label='close'>×</a><p>WishList Added!</p></div>");
...
function notification(data){
$( "[data-id=notification]" ).append( data ).delay(5000).fadeOut(400); // I've tried adding .dialog('close')
$('#noti').dialog('close'); // this gives an error.
}
...
To conclude, when user adds to wishlist, an dialog will show. User can manually close the dialog or it will close itself after x seconds. If dialog closes it self and user clicks another add wishlist, alert re-appears etc. Some how I need to remove it from the dom.
Maybe it wont make sense to display a message every time the user adds/removes a wishlist but this will be useful for other parts of my app.
This question is 4 years ago. Has anything changed since? I need both: user close and js close.
You should use alert('close') :
$( "[data-id=notification]" ).append( data ).delay(5000).fadeOut(400);
$('#noti').alert('close');
Or using setTimeout :
$( "[data-id=notification]" ).append( data );
setTimeout(function() { $('#noti').alert('close'); }, 5000);
Hope this helps.
Related
I'm testing to create a each loop with an array object. I would like to every element show a modal window with a data and with a question. After response the question the modal hide and show with other array element.
I have read a lot of information and the each loop cann't wait response¿?
Modal:
This interface use to ask user to replace an image.
I'm working in this code:
$.each( arrayExist, function( i, value ) {
if (value == 1) { // Show modal with the old and new image when value is true
alert ('Exist');
$('#overwriteImages').modal('show');
$('#overwriteImages').on('show.bs.modal', function (event) {
$('input[type="submit"]').click(function(event){
$('#btnYes').on('click', function() {
$('#overwriteImages').modal('hide');
});
$('#btnNo').on('click', function() {
$('#overwriteImages').modal('hide');
arrayCod.splice( $.inArray(removeItem,i) ,1 );
alert(arrayCod.length);
});
});
});
}else{
alert ('Not Exist');
}
});
I'm not sure that is possible to do it or it would be a better option... ajax or whatever.
The problem is that the each loop is execute in each modal window. It doesn't wait to response Yes or No. Example:
Select two elements.
Element(1) -> Show Modal and two alerts because the each loop running at two times)
Element(2) -> Show Modal and two alerts because the each loop running at two times)
The correct behaviur would be:
Select two elements.
Element(1) -> Show Modal and an alert only with this element.
Element(2) -> Show Modal and an alert only with this element.
The summary is: I need that the each loop wait to response in modal window to be continue the loop.
Don't use a loop here. Of course, the each function won't wait to return from a "modal" window, because your window isn't modal actually (only alert, prompt and comfirm are authentic modals). Everything goes through events, so declare a variable that holds de index of the element you want to show now, and increment and decrement it as the user clicks "nueva" or "anterior" recovering the element from the array and operating with it.
I have a dialog setup as follow
$("#myDialog").dialog({
autoOpen: true,
close: function(event, ui) {
$("#myDialog-content").html("");
$(this).dialog("destroy");
}
});
$("#myDialog").css("min-height","");
$("#myDialog-content").html("Loading...");
$.ajax({
...
success: function(response) {
$("#myDialog-content").html(response);
}
});
This working fine I load and close dialog in same page but not able to make it work properly where I move between pages.
Here is a my page flow
From source page(say PageA) I make AJAX call to load the page containing dialog div(say PageB).
Link on this page call above method to display dialog. (For first time it runs OK).
When I click close button. Dialog close and with firebug I can still see dialog div at the end with UI classes but in hidden state.
If I go back to source page (Page A) and reload the PageB.In firebug I can see two div - one originally from JSP and second one from step 3.
Now if I click button to load dialog box - It used hidden to populate new data and never use new div created by jquery. So I just have blank dialog box.
I am not sure if this is jquery Dialog issue or my page flow. One possible solution I though of is use remove in close function to remove dialog div completely but it puts burden to create this div everytime page PageB is loaded. Is there any other way or any thing I am doing wrong in this scenario?
If i understood correctly the situation, You have 2 options:
If you somehow cleaning the content of "Page B", remove the modal
then.
If you do not have the cleaning mechanism like that, just
.remove() content of modal on close
Sidenote: i would advise not to use jquery for .css and .html('Loading...'). Also, it is good to cache jquery elements in variables e.g var dialog = $("#myDialog");
I have jquery snippet that is working on a VF page in saleforce. I pass an array from a query result in SF to a method in a script that should show each array item as a unique dialog window. All the array elements should be looped through and only when the user closes the dialog, should it proceed to the next array element and create another dialog.
So far I got the jquery code running and it shows ONLY 1 dialog, the last one. After debugging I found that it is NOT stopping at each dialog so therefore all the messages are looped through non stop. If I use alert instead, it works fine showing each message in sequence. See code below, any help would be greatly appreciated:
//display the dialog window for each message
function showPopMessages(pPopMsgs){
var updatedMsgs = new Array();
console.log('updatedMsgs.legnth: '+pPopMsgs.length);
$j.each( pPopMsgs, function( index, value ){
console.log('updatedMsgs.value: '+value.Message__c);
$j("#dialog-confirm").html(value.Message__c);
$j( "#dialog-confirm" ).css("display","block");
$j( "#dialog-confirm" ).dialog(); //IIT IS NOT STOPPING HERE!!!
//alert(value.Message__c);
});
}
I don't know much about jQuery UI, but it seems as though you aren't passing any arguments to the dialog(). That sounds like a recipe to make nothing happen. What happens if you just add .dialog('wait'); ?
Of course, if you are getting errors in the console, we want to see those.
PRE EDIT: It turned out that it was not about the disability of the button, but making some other actions after save. I debugged the page and found out that after making changes on a saved form, then page loses the javascript functionality in the (document).ready part. I've added the solution as an answer.
I have an entry page which has two buttons save and approve. The mechanism is something like, you can fill the form and save, then approve. You can also reach a saved page by refreshing the page or from the list of your saved pages.
The approve button is disabled if the form is not saved. I enable it from code behind after saving. Approve button also has a confirm button extender which takes its confirm text from javascript. I load it in (document).ready and its code is:
$(document).ready(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_btnApprove").click(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_lblMessage").text(GetConfirmTextForApprove());
});
});
,where GetConfirmTextForApproval() makes some calculations and returns the confirm text.
Now, my problem is, as the button is disabled when you open the form, the code above is not rendered at the first page load. This leads to the problem that, when I start to fill a form and save it, then approve it, I don't get any confirm text, because it does not run the function. But after refreshing the page or after I go to a saved form's page from another page, I get the proper confirm text.
So, how can I solve this problem? How can I get the proper confirm text even though the button is disabled at the first page load?
Note: I have to add that after saving, the url of the page is changed. The query string is added. That might also cause the problem.
You can use
// Disable #x
$( "#x" ).prop( "disabled", true );
// Enable #x
$( "#x" ).prop( "disabled", false );
But not when document ready, you need enable button when you want. Then you need create a event listener
$("#button").click(function(){
//Your code
if(GetConfirmTextForApproval()){
//You active the button and the text that you want show.
}
});
Solved my own problem:
As it was said in the pre edit of the question, the problem was caused because of making changes after the save. I've changed my function as:
$(document).ready(function () {
SetConfirmMessageForApproval();
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
});
function EndRequestHandler(sender, args) {
SetConfirmMessageForApproval();
}
function SetConfirmMessageForApproval() {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_btnApprove").click(function () {
$("#ASPxSplitter1_ContentPlaceHolder1_uctActivityEntry1_tbActivity_tbHistory_btnApproveActivity_lblMessage").text(GetConfirmTextForApprove());
});
}
This helps, if anyone else needs it.
I'm looking for a slideshow tool (for jquery) which i can load in a dialog and every time i click on the next or previous button i load the content from the database.
If i use the dialog jquery-ui widget and i add buttons, it puts them below the content. And i want them to be on the side, as it is the way the client asked:
with the following js code the dialog looks like this:
$(function() {
var x = 1;
$('#dialog').dialog({buttons:
{
Next: function() {
x++; // Increment counter
$(this).text(x); // Build dialog based on new value
},
Prev: function() {
x--; // Decrement counter
$(this).text(x); // Build dialog based on new value
}
}
});
});
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
Somebody told me that it's better if i load all the content when the page is loading, but, what happens if there are 10000 or 15000 divs, each one with html content and image. My first thougth was "the page will take too long to include those objects, and maybe they will never be clicked by the user" and that's what i told him. And he told me, "as you'll be growing in web developmente you'll want to avoid requests"
If it's better to have a dialog which has next a previous button on the side, which tool can i use?
The page is beeing made on Rails with jquery
Thanks in advance for your opinions.