I have an asp.net 4.0 web application I want to use Sys.UI.DomElement.getBounds to get panel's bounds. I have used following JQuery code:
var el = $get('#panel1');
var box = Sys.UI.DomElement.getBounds(el);
but I am getting error that Sys is not defined. Can you please tell me what are the pre requisites of using Sys.UI.DomElement.getBounds ?
Thanks,
Your mixing ASP.NET AJAX with JQuery, change your code to:
var el = $get('<%= panel1.ClientID %>');
var box = Sys.UI.DomElement.getBounds(el);
I'm assuming panel1 is a server control, otherwise, just do $get('panel1'); if not. You could also use JQuery's outerwidth and outerHeight or other methods found here: http://api.jquery.com/category/manipulation/ to get the size of an element.
HTH.
"Sys is undefined" will occur if the Microsoft Ajax JavaScript file(s) fail to load. Make sure this is not the case. To do so use Fiddler or Firebug and inspect your page for failing HTTP requests. Look for 404 and 500 HTTP codes.
I solved the problem. I used
var el = $get('#panel1');
var box = Sys.UI.DomElement.getBounds(el[0]);
and it worked.
Related
I'm adding a script tag to a web page once it's fully loaded in a WebEngineView, but it's silently failing somehow.
I inject the script by invoking webview.runJavaScript with this code:
var s = document.createElement('script');
s.src = "qrc:/jquery-2.1.4.min.js";
document.body.appendChild(s);
That's perfectly standard and to a certain extent it works as expected, i.e., if I view the html source of the page, the script tag has indeed been appended to the body.
The problem is that the script isn't being downloaded, or isn't being evaluated, or something. All I know is in the above example the jQuery functions aren't available. If I load a small JavaScript test file with one global variable, that variable's not available either. Changing the url to http instead of qrc and pointing it to a web server makes no difference.
Injecting an img tag works fine; the image is loaded and displayed.
But JavaScript is broken somehow. Does anyone know how to fix this?
The problem had to do with the asynchronous nature of QML and JavaScript.
I was inserting a script tag to inject jQuery, and then I was calling a function to de-conflict my inserted version of jQuery from whatever version of jQuery might already be in the original page.
But I believe the webview had not finished parsing the inserted jQuery library before my de-conflicting function was called, so it failed. (I'm not very experienced with browser programming or I might have suspected this from the beginning.)
The solution was to insert a script tag with a small bit of JavaScript that inserts jQuery and then sets a timeout to wait 200ms before calling the de-conflict function. Like so:
function insertAuhJQuery(){
var s = document.createElement("script");
s.src = "qrc:/jquery-2.1.4.min.js";
document.body.appendChild(s);
window.setTimeout(deConflictJQuery, 200);
}
function deConflictJQuery(){
auh = {};
auh.$ = jQuery.noConflict(true);
}
insertAuhJQuery()
That works reliably and is acceptable for my purpose.
Microsoft JScript runtime error: 'txtGivenName_OnFocus' is undefined
After adding what I thought was unrelated javascript code to a web page, I am suddenly getting errors that suggest that the browser cannot locate a javascript function that, to me, appears plain as day in design mode.
I'm thinking that this is a load sequence order problem of some sort. Originally, my script was at the bottom of the page. I did this with the intent of helping my site's SEO ranking.
When I moved the function to the top of the web page, the error went away. Now it is back.
I have a feeling someone is going to suggest a jQuery solution to execute some code only when the page is fully loaded. I'm I ignorant of jQuery. IfjQuery is given in the answer, please explain what I need to do (references, placement of script files) for VS 2010 RTM.
I am trying to set the focus to the first textbox on the webpage and preselect all of the text in the textbox
More info:
If I disable this Validator, the problem goes away:
<asp:CustomValidator ID="valSpecifyOccupation" runat="server" ErrorMessage="Required"
ClientValidationFunction="txtSpecifyOccupation_ClientValidate"
Display="Dynamic" Enabled="False"></asp:CustomValidator>
function txtSpecifyOccupation_ClientValidate(source, args) {
var optOccupationRetired = document.getElementById("<%=optOccupationRetired.ClientID %>");
if (optOccupationRetired.checked) {
args.IsValid = true;
}
else {
var txtSpecifyOccupation = document.getElementById("<%=txtSpecifyOccupation.ClientID %>");
args.IsValid = ValidatorTrim(txtSpecifyOccupation.value) != "";
}
}
Yep, I would say most likely it's a loading order issue as well. And... I would totally recommend jquery...
Wherever you are calling your JavaScript function txtSpecifyOccupation_ClientValidate; I would assume you are possible dynamically writing a script block to the page on load or something...
if this is the case. I would add the following to your generated script block...
$(function() {
... call to function
txtSpecifyOccupation_ClientValidate();
...
});
jquery is very easy to learn. http://docs.jquery.com/Main_Page
Is there a JQuery equivalent of ASP.Net Ajax's $find() function?
$() != $find()
There is not since $find returns the AJAX component related to the DIV element, and not the DOM element. You could build your own plugin that shortcuts the find method.
Microsoft created $find as a way to link their ASP.NET AJAX components to the DOM.
There is not a 1to1 equivalent but what you want is $('selector')
Check out the docs on the different selectors
$find('MyComponent') would be $('#MyComponent')
$find('MyComponent',div) would be $(div).find('#MyComponent')
I'd just do the following, no muss, no fuss, straight to the point.
$('#' + <%=myControl.ClientID%>)
If you want to find an element by its ASP.NET code ID rather than the generated ClientID (ctl00_RealId) then you can use this function. It just looks for elements that have an ID that ends with _{the real ID here}:
var $$ = function (id, context) {
var $ = (jQuery) ? jQuery : return ;
var el = $("#" + id, context);
if (el.length < 1)
el = $("[id$=_" + id + "]", context);
return el;
}
For example, say your ID in your code is pnlSuccess, say a panel:
<asp:Panel ID="pnlSuccess" runat="server"></asp:Panel>
But in the rendered code it comes out as: ctl00_content_ctl00_pnlSuccess
calling $$("pnlSuccess") will find that rendered panel.
I know it's a LOOOOOOOONG time overdue, but I think I have the kind of solution you're looking for. If I'm correct, you're looking for a $find jQuery substitute because you don't know the ID of the element (which $find doesn't have selectors as far as I know but jQuery is awesome with). I just ran into this issue using Telerik controls on a SharePoint page, so my object ID is some long crazy mess, and since Sharepoint 2010 is on .NET 3.5, I can't use a static ID.
The solution is simple, but it racked my brain for a while. $find() is searching by ID, which luckily we can return as a string through jQuery: $("elem").attr("id"). So basically what we do is use jQuery inside the $find function and it works. Here's a sample from my project:
var contextMenu = $find($("[id*=mnuContext]").attr("id"));
This worked for me, and is going to help me out a lot with the rest of my SharePoint solution.
How do I POST to a web page using Firebug?
You can send POST request to any page by opening console (e.g. in FireFox ctrl + shift + k) and typing simple JS:
var formPost = document.createElement('form');
formPost.method = 'POST';
formPost.action = 'https://www.google.com'; //or any location you want
document.body.appendChild(formPost);
formPost.submit();
AFAIK Firebug can't do this. However, there is a very useful Firefox extension, in the spirit of Firebug, called Tamper Data. This should be able to do what you want.
It allows you to monitor each request made by the browser, and you can turn on an option that allows you to look at, and edit, every single request before it gets sent.
Firefox 27 (maybe earlier versions too, never checked) has built-in developer tools to modify and resend requests. If you don't have Firebug installed, the console is available by pressing the F12 key. If Firebug is installed, press Ctrl+Shift+K instead.
I know this is an old question, but I recently stumbled upon the same problem and wanted to share the method I am using.
Assuming the web site you want to POST to has a form with method="POST" (a very likely scenario), you can use Firebug's JavaScript command line to programmatically submit a POST request. Just click the "Show Command Line" icon in Firebug and enter something like this in the narrow text box at the very bottom of the window:
document.forms[0].submit()
Maybe this helps someone.
Another simple solution is to load any webpage that uses jQuery, and type up a $.post() in the console.
HTTP resource test is a firefox plugin that can do this.
Another powerful Firefox plugin to perform post request and some more features is the Hackbar.
Related:
To resend a POST already made, right click the POST request in the Net/XHR view and click "Resend".
Using Firebug 1.12.0:
Got here looking for a Firebug way of doing this. Then I realized that I could use Fiddler. This is the most powerful tool I know when it comes to debugging web requests.
Fiddler The free web debugging proxy for any browser, system or
platform
Click the Composer tab and write your request as desired - then click Execute.
NO NEED of plugins !!
Just drag any url in BOOKMARK BAR, then right click and EDIT, and insert javascript code:
javascript:var my_params=prompt("Enter your parameters","var1=aaaa&var2=bbbbb"); var Target_LINK=prompt("Enter destination", location.href); function post(path, params) { var form = document.createElement("form"); form.setAttribute("method", "post"); form.setAttribute("action", path); for(var key in params) { if(params.hasOwnProperty(key)) { var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", key); hiddenField.setAttribute("value", params[key]); form.appendChild(hiddenField); } } document.body.appendChild(form); form.submit(); } parsed_params={}; my_params.substr(1).split("&").forEach(function(item) {var s = item.split("="), k=s[0], v=s[1]; parsed_params[k] = v;}); post(Target_LINK, parsed_params); void(0);
then enter the target site-link, and click that button in BOOKMARK BAR! That's all!
( source: https://stackoverflow.com/a/38643171/2377343 )
I wonder why I can't get value from FCKEditor with this javascript? I work with asp.net so I know the controls get different names, mine is in a placeholder and in a usercontrol. How should I approach it to find the FCKEditor?
thx
function test()
{
var oEditor = FCKeditorAPI.GetInstance('FCKeditor1');
var pageValue = oEditor.GetHTML();
alert(pageValue);
}
This should work, but the problem is that using this approach you can not have this function in external JavaScript file. It has to be inline in your asp.net page.
function test()
{
var oEditor = FCKeditorAPI.GetInstance(<%= FCKeditor1.ClientID%>);
var pageValue = oEditor.GetHTML();
alert(pageValue);
}
FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID%>')
ASP.NET generates different IDs to the ones you use based on their position within the DOM. You should use the ClientID from within the client code to get at the actual ID, but without seeing the mark-up I can't tell for sure.
i tried this code an it work
FCKeditorAPI.GetInstance('ctl00_ContentPlaceHolder1_ctl00_FCKeditor1');
i tried
FCKeditorAPI.GetInstance('<%=FCKeditor1.ClientID%>')
thing that last wont work cause i got page - usercontrol - fckeditor
so the intellesence wont show the fckeditor. i would like to make it work with the last one
so i dont have to put the "ctl00_ContentPlaceHolder1_ctl00_FCKeditor1"