In my ASP .NET MVC application i have a link that refreshes "the preview data box" after each click. I've done this using this code:
<%= Ajax.ActionLink("delete", "DeleteItem", new AjaxOptions(){UpdateTargetId="casePreview"}) %>
Now I would like to change the behaviour in such a way that the preview data box is refreshed each time link's onmouseover event is raised.
What's the simplest way to do it?
Use jQuery to fire the click event of the link
$(selector).mouseover(function () {
$(this).click();
});
EDIT: A simplified version of what I described in my comment. Essentially, the mouseover event handler should use some AJAX to retrieve updated information, when the request is complete the UpdateUI function fires and does its work. This particular script would also cause an alert to appear when the element is clicked.
$(selector).mouseover(function() {
$.ajax({
type: "GET",
url: "/my/path/to/someplace",
complete: UpdateUI});
}).click(function() {
alert("tada");
});
function UpdateUI(XMLHttpRequest, textStatus) {
//Update Your UI
}
Unfortunately there is no way to do this using the AjaxHelpers only: you'll have to use javascript directly. For example, you can use jQuery and "register" to the onmouseover event, and than use the Ajax method to call for the refresh of the "preview data box"
You should call jaquery method on onmouseover() event.
Related
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 was wondering if there is someway to change the url of a reload when I close the modal window...
Right now I have this in the onClose event...
, close: function (event, ui) {
//debugger;
//if($url.contains)
location.reload(true);
}
ideally I would like to be able to pass a couple of parameters to the location.reload(true) function.
Or maybe there is another way to reload?
You can change your location.href directly and it will load corresponding page. such as:
location.href = location.href + '?a=1'
In my Grails application, a user can click on a g:link which will call my controller to export certain data to a CSV file. This works with no problems.
I then moved that button to a jQuery dialog box and, when the button is clicked, I use
${remoteFunction(action:'export', onSuccess:'closeMe();', id:courseInstance?.id)}
to call the same controller method and close the dialog box. I've confirmed that the method is actually called, and the dialog box closes. The user is not prompted with the CSV dowmload, however. I'm assuming this has something to do with the remoteFunction, but I'm not really sure. Can anyone explain why this might happen, and a potential fix?
Thanks!
With AJAX requests you can't handle to download content as attachment and so it can't trigger the Save As dialog.
There are a couple of workarounds for this:
Use a plain g:link as before and bind the 'closeMe();' function to the 'click' event. The problem is that you have no control on error or success response.
Use an iframe: You can create a temporary invisible iframe and set its location to the URL of the file to download. It also has the backside of not controlling the success/error response.
The code could be the same as in this answer:
<script type="text/javascript">
function downloadURL(url) {
var iframe;
var hiddenIFrameID = 'hiddenDownloader';
iframe = document.getElementById(hiddenIFrameID);
if (iframe === null) {
iframe = document.createElement('iframe');
iframe.id = hiddenIFrameID;
iframe.style.display = 'none';
document.body.appendChild(iframe);
}
iframe.src = url;
}
</script>
And the link
Export
Am trying to understand jquery. Am a bit slow, maybe cause I come from a COBOL background.
I learn as i do, instead of just reading. php, jquery are all just hobbies for me
I used to have these update form pages. I wanted to try and put them in dialogs.
I trying using Dialog with an I frame, I did not like it, The iframes were very slow to load, of of the pages being loaded contained jquery tabs, which where even slower to load. And several other problems.
So I trying moving away from iframes. I stripped the pages and kept the meat(the body of my php/html file)(minus the body tag), So now I load a short version of my Form onto the dialog, It loads beautifully and looks good.
So next I wanna submit my for data, this is where I am a bit lost....
I am guesting I have to use Ajax, but on returning from Ajax with a OK/Fail message I am lost again.
My submit buttons were not jquery dialog buttons, Must they be so?
Must I use buttons:
{
"Save" : function () {
.....
"Close" : function () {
$(this).dialog("close");
.....
}
These are ugly and I have less control on where to place them and how the look.
All you need to do is make sure you have a form in your dialog box.
The, add a listener on your form. Let's say you have
<form id="myForm">
<input id="myInput" name="myName" type="text" />
</form>
Then you would add a listener :
$("#myForm").die().live('submit',function(e) {
e.preventDefault();
$.ajax({
type : POST,
url : localhost:8080/myUrl,
dataType : 'json',
cache: false,
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
data : $("#myForm").serialize(),
success : function(){ //do what you want here, like displaying validation errors...},
error:function (xhr, ajaxOptions, thrownError){ //manage ajax errors}
});
return false;
});
So your Save button is just a plain input type="submit"
Have fun !
I am using JQuery UI plugin blockUI to block UI for every ajax request. It works like a charm, however, I don't want to block the UI (Or at least not show the "Please wait" message) when I am making ajax calls to fetch autocomplete suggest items. How do I do that? I am using jquery autocomplete plugin for autocomplete functionality.
Is there a way I can tell the block UI plug-in to not block UI for autocomplete?
$('#myWidget').autocomplete({
source: function(data, callback) {
$.ajax({
global: false, // <-- this is the key!
url: 'http:...',
dataType: 'json',
data: data,
success: callback
});
}
});
Hm, looks to be a missing feature in jquery :)
You could use a global flag to indicate if it is a autocomplete call and wrap it in a general autcompletefunction
var isAutoComplete = false;
function autoComplete(autocomplete){
isAutoComplete = true;
if($(autocomplete).isfunction())
autocomplete();
}
$(document).ajaxStart(function(){if(!isAutoComplete)$.blockUI();}).ajaxStop(function(){isAutoComplete = false;$.unblockUI();});
It's not a nice solution but it should work...
try using a decorator
$.blockUI = function() {
if (condition_you_dont_want_to_block) {
return;
}
return $.blockUI.apply(this, arguments);
}
or you can write your own block function that is smarter
function my_blockUI() {
if (condition_you_dont_want_to_block) {
return;
}
$.blockUI();
}
$(document).ajaxStart(my_blockUI).ajaxStop($.unblockUI);
You can set blockUI to work for all functions on the page by adding to a global jQuery event handler. To make sure it doesn't get called on autocomplete ajax calls we have to determine if the call is an autocomplete call or not. The problem is that these global functions don't have that much information available to them. However ajaxSend does get some information. It gets the settings object used to make the ajax call. the settings object has the data string being sent. Therefore what you can do is append to every data string in every ajax request on your page something like:
¬autocomplete=notautocomplete
For example:
$.ajax({data:"bar=1&foo=2¬autocomplete=notautocomplete"})
Then we can put this code in your document ready section before anything else:
$(document).ajaxSend(
function (event, xhr, ajaxOptions){
if(ajaxOptions.data.indexOf("notautocomplete") !== -1){
$.blockUI;
}
});
$(document).ajaxStop($.unblockUI);
Of course the other better idea would be to look for something unique in the auto complete requests, like the url, but that depends on which autocomplete plug-in you are using and how you are using it.
using a modal block (block UI) means blocking any inputs from user, I'd suggest plain old throbber to show 'Please wait..' and to block ( set attributes readonly="readonly" ) ur input controls till the ajax request is complete.
The above UI seems to be self conflicting!