Sign in to follow this  
Followers 0
dondre

Working with IE, JQuery validation

2 posts in this topic

Hi all,

I'm very new to AutoIt, just downloaded it tonight er, this morning but it has been a life saver. Up until this point I've been using C# mshtml, shdocvw for all of my IE automation. I've never been stuck until dealing with the input file type. Browsing the form posts I was able to find this nifty script that got the job done.

#include <IE.au3>
$oIE = _IECreate($weburl)_IELoadWait($oIE)$oIE.left = 0$oIE.Top = 
0$oIE.document.parentwindow.scroll(0, 
$oIE.document.body.scrollHeight/5)$oForm = _IEFormGetObjByName($oIE, 
"formmain")$oT = _IEFormElementGetObjByName($oForm, "updfile1")$oControl 
= _IEGetObjByName($oIE, "updfile1")_IEAction($oControl, 
'focus')Send("{SPACE}")

When I go to hit sumbit though it doesn't recognize that I've place a file to be uploaded. I manually click the button and noticed a JQuery load icon so there's defintely an event that doesn't seem to be getting fired when using the script to send the Space.

Here's a layout of the html.

 <div 
id="item_img_msg1" abp="568"></div> <div class="mg_b5 mg_l10" 
id="item_img_empty1" abp="569"> <input name="updfile1" class=" " id="item_img_file1" 
type="file" abp="570"> </div> <div class="mg_b5 
mg_l10" id="item_img_selected1" style="display: none;" abp="571"> <img id="item_img1" src="/common/images/noimage.gif" 
abp="572"> <input id="item_img_del1" style="vertical-align: bottom;" type="button" value="Delete" abp="573"> </div> <input name="hdnImgDelFlg1" id="imgdelflg1" type="hidden" value="" abp="574"> <span class="font_85 pg_l10" 
abp="575">(Size:Under 1MB;Format:JPEG,GIF,PNG</span> <br abp="576"> <span class="pg_l10" abp="577">Wide or Tall images will be chopped</span> <div class="HelpTxt 
mg_t5" abp="578"> Guide:<a href="/common/guide.pdf" 
target="_blank" abp="579">Image Upload Guide</a> </div>

And here's the Javascript associated with it.

 

var 
ImageUploader 
= 
function 
(idx) 
{ 
var 
postData = 
{ 
name: 
"updfile", index: idx, imgApiType: $("#img_api_type").val(), unq: $("#unique_id").val(), 
postCnt: 
0 
}; 
var 
deleteData = 
{ 
index: 
idx, 
imgApiType: $("#img_api_type").val(), unq: $("#unique_id").val(), postCnt: 0 }; 
var 
onIamgeUploaded = function (response) { var status = $(response).find("otoma_status").text(); if (status != "0") { $("#item_img_msg" + idx).html("<div class='error_with_icon'>Upload 
Failed</div>"); return; } var url = 
$(response).find("img_url").text(); $("#item_img" + idx).attr("src", url + "?" + 
new 
Date().getTime()); $("#item_img_empty" 
+ 
idx).hide(); $("#item_img_selected" + idx).show(); $("[name='hdnImgDelFlg" + idx + "']").val("0"); postData.postCnt++; }; this.manualUpload 
= 
function 
(data) 
{ 
var 
postDataForManual = $.extend({}, 
postData, 
data); 
jQuery.ajax({ 
data: 
postDataForManual, url: 
"/api/itemimage/upload", cache: false, type: "post", beforeSend: function (XMLHttpRequest) { var loading_image_tag = $("<img>").attr({ "class": "js-loading_image" + idx, src: Module.imgpath + "/lib/fileuploader/loading.gif" 
}); 
$("#item_img_empty" + idx).after(loading_image_tag); $("#item_img_empty" + idx).hide(); }, success: function (response) { 
onIamgeUploaded(response); }, error: function () { 
$("#item_img_msg" + idx).html("<div class='error_with_icon'>Upload 
Failed!</div>"); $("#item_img_empty" + idx).show(); }, complete: function () { 
$("img.js-loading_image" + idx).remove(); } }); }; var 
init = 
function 
(idx) 
{ 
postData.index = idx; 
try 
{ 
new 
AjaxUpload("#item_img_file" + idx, 
{ 
action: 
"/api/itemimage/upload", name: "updfile", data: postData, onSubmit: function (file, extension) { AjaxUtils.loading(true); $("#item_img_msg" + idx).html(""); }, 
onComplete: function (file, response) { AjaxUtils.loading(false); 
onIamgeUploaded(response); } }); } catch 
(e) 
{} 
$("#item_img_del" + idx).click(function () { jQuery.ajax({ dateType: "xml", data: 
deleteData, url: 
"/api/itemimage/delete", cache: false, type: "post", beforeSend: function (XMLHttpRequest) { deleteData.postCnt = postData.postCnt; $("#item_img_msg" 
+ 
idx).html(""); $("#item_img_empty" + idx).show(); $("#item_img_selected" + idx).hide(); $("[name='hdnImgDelFlg" + idx + "']").val("1"); }, error: function () { 
$("#item_img_msg" + idx).html("<div class='error_with_icon'>Upload 
Failed!</div>"); } 
}); 
}); 
}; 
init(idx); 
}; 
var 
ImageUploaders 
= 
[]; 
var 
maxImageNumber = 
$("#max_image_number").val(); for (var i = 1; i <= maxImageNumber; i++) { ImageUploaders.push(new ImageUploader(i)); 
} 
var 
params 
= 
Module.Utility.getParameters(); var buying_support_item_id = params.buying_support_item_id; if (buying_support_item_id) { ImageUploaders[0].manualUpload({ 
buying_support_item_id: buying_support_item_id }); }

I really dont want to make this harder than it is. If i can just make sure that the proper events fire in order to trigger all this javascript background ajax loading of the image I'd be done. If that isn't possible is there a way to make a javascript all using AutoIt to trigger the event? I'm not very good with javascript so any advice would be be very appreciated!

Share this post


Link to post
Share on other sites



Look at the links in my sig about automating INPUT TYPE=FILE for some other approaches on this, particularly this one: '?do=embed' frameborder='0' data-embedContent>>

Dale


Free Internet Tools: DebugBar, AutoIt IE Builder, HTTP UDF, MODIV2, IE Developer Toolbar, IEDocMon, Fiddler, HTML Validator, WGet, curl

MSDN docs: InternetExplorer Object, Document Object, Overviews and Tutorials, DHTML Objects, DHTML Events, WinHttpRequest, XmlHttpRequest, Cross-Frame Scripting, Office object model

Automate input type=file (Related)

Alternative to _IECreateEmbedded? better: _IECreatePseudoEmbedded  Better Better?

IE.au3 issues with Vista - Workarounds

SciTe Debug mode - it's magic: #AutoIt3Wrapper_run_debug_mode=Y Doesn't work needs to be ripped out of the troubleshooting lexicon. It means that what you tried did not produce the results you expected. It begs the questions 1) what did you try?, 2) what did you expect? and 3) what happened instead?

Reproducer: a small (the smallest?) piece of stand-alone code that demonstrates your trouble

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0