I am working on a Sharepoint application Page to Uplaod a File to a document libary. The Upload can take a bit of time so I want to display the waiting for it Dialog. I check if all requiered fields are filled in my Upload Button Click Method and then i want show the Dialog. I just need a way to call a javascript fucntion within my Code behind. I tried :
<input type="hidden" id="hidden" runat="server" value="" onchange="ManageWaitingDialog()" />
and
if (fieldsfilled)
{
hidden.Value = "SHOW";
}
The event does not fire when I change the value of my input. Any Help is Welcome thanks.
Event is triggered only when the value is changed from the browser. If you change the value from code, do not expect that the events will be triggered. You can use the below code to fulfill your requirements.
if (fieldsfilled)
{
hidden.Value = "SHOW";
ManageWaitingDialog();
}
Related
I'm working on an ASP.NET application and I ran into an issue that I am unable to resolve. I have a parent form, called Form1.aspx which contains a Telerik RadGrid. On page load, this grid is completely empty. The user has the ability to add data, by clicking add, in this case a Rad Window opens: here's my code:
<td >
<input id="btnAdd" runat="server" onclick="showQuestion4()"
type="button" value="Add" />
</td>
I have my RadWindowManager like this:
<telerik:RadWindowManager ID="RequestsRadWindowManager" runat="server" >
<Windows>
<telerik:RadWindow ID="ClientQuestion4" runat="server" Behaviors="Close,Move"
EnableEmbeddedSkins="false" Height="300px" Modal="true" OnClientClose="OnClientClose"
ReloadOnShow="true" Skin="WebBlue" Width="550px">
</telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
And My JS function to actually open the window:
function showQuestion4() {
return window.radopen("mdClientQ4.aspx?mode=add", "ClientQuestion4", "return false;");
return false;
}
My child form opens correctly, and allows user to enter and SAVE data. Once user clicks SAVE, I do an insert and then call this:
RadAjaxManager1.ResponseScripts.Add("cancelAndClose();")
Which corresponds to this JS code:
function cancelAndClose() {
var oWnd = GetRadWindow();
oWnd.close();
}
function GetRadWindow() {
var oWindow = null;
if (window.radWindow) oWindow = window.radWindow;
elseif(window.frameElement.radWindow)oWindow=window.frameElement.radWindow;
return oWindow;
}
So this code gets called, my child form Closes successfully, and now the focus returns to my Parent form which has been open in the background.
What's happening here is, I have a Full Page Post back on the parent form, and my main goal is to PREVENT IT.
My RadGrid is currently in Update Panel, with mode="conditional". The trigger for this Update Panel is a dropdown, which enabled the ADD button , which in turns allows the user to open the child form and enter data.
I have been trying to disable this postback for hours to no avail, I have no idea what it is I'm doing wrong.
I set return false; in my showQuestion4() Javascript function, but this still gets bypasses, and the parent page has full page load.
My goal for this, is to close the child form, and NOT have the POST BACK occur in my parent form, rather I want to simply reload the UpdatePanel with RadGrid which would display the information the user entered in the Child form.
Any help or tips will be greatly appreciated. I'd be more than happy to show more code if necessary.
EDIT:
Per Nikkis comment below, I removed runat="server" from btnAdd however, my parent form still goes through postback
Posting as an answer, since it looks like you worked it out from our comment conversation.
Check the UpdatePanel, and be sure any code called on client close is firing as you mean it to fire.
Is it possible to add a listener to "Choose" button in FileUpload component?
I use p:fileUpload in advanced mode.
I went through the documentation, it only supports fileUploadListener which is triggered after the "Upload" button clicked.(tried actionListener, validationListener too)
Version of PrimeFaces is 5.3.
Definition of p:fileUpload:
<p:fileUpload
fileUploadListener="#{ipchYonetimiController.handleFileUpload}"
widgetVar="aras"
mode="advanced" dragDropSupport="false" update="#this toplumsgs"
sizeLimit="100000" fileLimit="1"
cancelLabel="İptal et" allowTypes="/(\.|\/)(xlsx)$/"
invalidSizeMessage="Dosya boyutu çok büyük"
invalidFileMessage="Dosya formatı xlsx olmalı"
fileLimitMessage="Sadece bir dosya yükleyebilirsiniz" />
Here is the image why I need it:
I basically want to clear validation error when the user clicks the choose button. Since the choose button is wrapped in fileUpload component, can't assign a listener to it.
Tried to tweak the code in this link and add a listener to button, but no success:
PF('aras').chooseButton.addEventListener(...)
How to disable Choose button in PrimeFaces FileUpload until the upload is complete
Could you try this - it works for me:
<p:fileUpload id="fileupload" ..... />
<script>
$(document).on("click", ".ui-fileupload input[type=file]", function(event){
$(this).closest('.ui-fileupload').find('.ui-icon-close').trigger('click');
});
</script>
Instead of tackling with file upload component you can set time out on validation message. Please see:How to hide after it displayed the messages
second option will be to use growl for the error messages.
EDIT:
When the user clicks on the upload button the onstart event is fired so you can use it.
<p:fileUpload onstart="PF('validationMsg').hide()" />
I'm creating a simple task manager app with PHP, MySQL, & jQuery. I'm adding a feature that will allow users to add a task by clicking a "new task" button, typing into a text field and hitting enter. This is the jQuery I have:
function add_task() {
// Add the "add new task" button
$("<span class='add-new'>Add new item</span>").appendTo(".sub-phase");
// String for the input form
var task_form = '<form class="add-new-task" autocomplete="off"><input type="text" name="new-task" placeholder="Add a new item..." /></form>';
// Display form on button click
$('.add-new').click(function() {
$(task_form).appendTo($(this).parent());
});
// Post results
$('.add-new-task').submit(function(){
var new_task = $('.add-new-task input[name=new-task]').val();
if(new_task != ''){
$.post('includes/add-tasks.php', { task: new_task }, function( data ) {
$('.add-new-task input[name=new-task]').val('');
$(data).appendTo('.task-list').hide().fadeIn();
});
}
return false;
});
}
If I have the form hardcoded in the index.php file, this functionality works as expected. But if the form is created in jQuery like I have it here, then nothing happens on submit. I've searched around but haven't been able to find a solution that works.
Any advice is much appreciated! Thank you.
The issue is that you're not delegating the event. You've setup a submit handler on page load, but not for dynamically created elements.
Change:
$('.add-new-task').submit(function(){
To:
$(document).on('submit', '.add-new-task', function(){
Now the event handler is bound to the document and will trigger for any element on the page with .add-new-task regardless of whether or not it was dynamically created.
Also, of note, you should avoid binding to document where possible, and instead, should bind to the closest static parent element.
Please check the fiddle here - http://jsfiddle.net/kunaldethe/TQa97/
Here jQuery 1.7.2 is used and as answered by Ohgodwhy,
$(document).on('submit', '.add-new-task', function(){
is used instead of
$('.add-new-task').submit(function(){
In the Javascript Console (F12), you can see the request is sent. (Obviously we don't have the next page, so the request is not completed.)
If you use the jQuery with version less then 1.7.2, the code breaks.
Let us know, the environment you are using.
I have a function that is supposed to display a message in a P element if conditions are met. The function runs fine but the text that is sent to 'output1' appears briefly when you press the button and then disappears. I have tried putting the JS in the head and in the body but it doesn't seem to make a difference. Any ideas? Thanks.
HTML:
<p id="output1"><p>
Javascript:
<script>
function logicProcess() {
// alert('function launched');
if(document.getElementById('q1Y').checked || document.getElementById('q2Y').checked || document.getElementById('q3Y').checked) {
document.getElementById("output1").innerHTML = "Sorry, you don't qualify for our shared ownership properties";
}
else {
document.getElementById("output1").innerHTML = "You may qualify for our shared ownership scheme. Please complete the registration form.";
}
}
</script>
The reason the innerHTML is not staying visible is because there is some type of onclick method that is resetting the form. If that is true edit your onclick method like so:
onClick="function();return false;"
The change in here is the ;return false;
You haven't show us how you are calling that function, but the odds are that you are doing so in response to a form's submit button being pressed.
This will modify the DOM, and then submit the form, which will cause a new page to be loaded.
You need to cancel the default behaviour of the form to stop it being submitted.
function logicProcess(evt) {
// All your other code
evt.preventDefault();
}
document.getElementById('myForm').addEventListener('submit', logicProcess);
I think you are using input type submit, so the meaning of submit button is to submit the form and reload it, that's why your output is not holding your inner html.
change it to
<input type="button" />
SCRIPT5: Access denied
jquery.min.js, line 3 char 3769
I'm getting this error by simple form submit only in IE
$("#icon_upl").click(function(){ //icon_upl is button which open dialog
$("[name=icon]").click();
});
$("[name=icon]").change(function() { //icon is hidden file input
$("[name=upload_icon]").submit();
});
I sending that form to hidden iframe which is at the same domain.
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;display:none;"></iframe>
<form name="upload_icon" action="upload_icon.php" method="post" enctype="multipart/form-data" target="upload_target">
submit input doesn't help
I dont get it cuz if i try to send another form that works fine
If you are triggering the select files dialog via JS then you will get an access denied error when submitting the form. IE does not allow this. You will have to ask user to click on input type file directly
More details here
https://github.com/valums/file-uploader/issues/118#issuecomment-1387612
You can try styling the input type file though
http://www.quirksmode.org/dom/inputfile.html
I had similar HTML and jQuery code and encountered the same issue (i.e. 'Access is denied.' JavaScript error in Internet Explorer), which I managed to resolve by taking pointers from this (great) answer.
In your instance:
Change the #icon_upl <button>/<input> to a <label> and make use of the tag's accessibility features by setting the for attribute on it to point to your <input name="icon" type="file"> element.This effectively makes your click() event handler redundant. However, clicking the <label> in Firefox does not seem to trigger the file <input> dialog so you'll need to perform a browser test and still have the click() event handler if the browser is Mozilla-based.
In order for it to work, you'll need to make sure that your file <input> is not hidden by setting its position to be absolute and moving it off-screen.
i have found an other way to do this ...
I have make test and i found it work after 2 or 3 click on the submit button.
i have try some solution but found this by my self.
this is only for ie.
note i dont use the jquery submit method because they handle the error.
function Submit() {
try {
$('#FormName')[0].submit();
} catch (e) {
setTimeout(function () { Submit(); }, 50);
}
}
ps. sorry for my bad english, this is not my first language.
You can make a direct event firing on hidden input field because you can't catch it. It is possible to bind event with it and trigger it via another.
for example:
// binding event to hidden field
$('input[name=icon]:hidden').on('click', function() {
alert('Hidden triggered');
});
// some button/ or else
// some_target is any valid selector you can use
$('some_target').on('click', function() {
$('input[name=icon]:hidden').click(); // triggering click on hidden field will alert 'Hidden triggered'
});
Note: But its not clear from your post that if you have already something like this or not.
It seems to be impossible
You cannot read the "value" of the element as it holds the filename.
You can't fire up the file selection menu via JS.
You can't fire submit of the file uploader control via JS.
from getting access is denied error on IE8
//Access Denied Issues is usually for IE.
var lblTrigger= document.getElementById('lblTrigger');
lblTrigger.onclick = function(){
var form = document.getElementById('form1');
form.fxSubmit();
}
var form = document.getElementById('form1'); //form with upload control
var upctrl = document.getElementById('file_1'); //file upload control
form.fxSubmit = function() {
var upctrl = document.getElementById('file_1'); //file upload control
if (upctrl.files){
var form = document.getElementById('form1');
form.submit();
}else{
document.body.submit = true;
}
}
function fxSubmit(){
if (document.body.submit){
var form = document.getElementById('form1');
setTimeout(function(){fxSubmit()},50);
form.submit();
return;
}
setTimeout(function(){fxSubmit()},1000);
}
setTimeout(function(){fxSubmit()},1000);