Using breakpoints to debug Javascript in IE and VS2008 - javascript

I am not able to use the breakpoint in Studio with Javascript. I'm able to debug if I use the debugger;
I've seen this Breakpoint not hooked up when debugging in VS.Net 2005 question already. I tried the answer and it didn't work.
Looking in the Modules window, V.Mvc.Jobtrakt.PDB is loaded properly, but it points to a temp folder
C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files\root\dbc0c0c5\f64a99b3\assembly\dl3\9de055b3\eb1303b1_9760c901\V.Mvc.Jobtrak.pdb: Symbols loaded.
I would have thought that it would point to:
\JobTrak\Website\V.Mvc.Jobtrak\V.Mvc.Jobtrak\obj\Debug ( this is within the project directory)
But regardless of the location I closed VS 2008 and then blew away the temp folder (listed above), the bin and obj folders.
Opened VS 2008 and did a clean. I set a break point in the js and it seemed like it would work now ( The breakpoint was filled in)
Started to debug and it never breaks on the breakpoint. Look at the break point and it now is a red circle with a red dot and a warning indicator. Hovering over the breakpoint gives me this useful information: The breakpoint will not currently be hit. The location could not be mapped to a client side script. See help for ASPX Breakpoint mapping. I am not being redirected, the breakpoint is with in a function. blah blah blah this should be working.
So I was wondering if anyone has any ideas?
Is anyone able to set breakpoints in VS2008 and have them work?

try typing "debugger" in the source where you want to break

Make sure you are attached to the correct process. For example, once you have your page loaded in IE,
Switch to Visual Studio and go to the Debug menu.
Choose "Attach to Process"
Find iexplore in the list and select it.
Click the "Select..." button.
In the dialog, choose "Debug these code types:" and select only "Script".
Click "OK"
Click "Attach"
See if that helps get you debugging javascript.

this happened to me also. The breakpoints stopped to work in some functions. In my case, the problem was that I used <%=..%> inside the script. As far as I could figure out reading MSDN, this happens because Visual Studio maps the breakpoint lines from the .ASPX to the resulting HTML based on line content, so when you put a <%=..> your resulting script will be different from the one in the .ASPX file.

You shouldn't have to put debugger in the javascript. I had this happen and the reason was there was an error in the script in a try catch block in terms of syntax. As soon as I fixed the syntax, breakpoints mapped correctly again.

Greg answered the question, however just to add some more value to answer -
Put debugger in the java script code.
As well make sure you have debugger enabled in the internet explorer > Tools > Internet Options > Advance
the check boxes for disabled debugging should not be checked.

In my case, was due I was using
$.ajax({
type: "GET",
instead
$.ajax({
type: "POST",...

Just type alert function in script for each line or any line, if the alert is not triggered then we can identify the line where its through the error
<script type="text/javascript">
$(function() {
//event handler to the checkbox selection change event
$("input[type=checkbox]").change(function() {
//variables to store the total price of selected rows
//and to hold the reference to the current checkbox control
var totalPrice = 0, ctlPrice;
//iterate through all the rows of the gridview
$('#Grid2 tr').each(function() {
//if the checkbox in that rows is checked, add price to our total proce
alert("Hi")
if ($(this).find('input:checkbox').attr("checked")) {
ctlPrice = $(this).find('[id$= lblPackAmount]');
//since it is a currency column, we need to remove the $ sign and then convert it
//to a number before adding it to the total
totalPrice += parseFloat(ctlPrice.text().replace(/[^\d\.]/g, ''));
}
});
//finally set the total price (rounded to 2 decimals) to the total paragraph control.
//alert(totalPrice);
$('#lblAmount').text(totalPrice);
});
});
</script>

Related

Trying to programatically click a button on a web page with cefsharp

I'm using cefsharp and vb.net to put some code together to move to the next page of this site:
https://www.recommendedagencies.com/search#{}
The idea is to read the list of company names on each page and store to a csv file. This part I can do.
The problem I have is that I can't find the name of the 'Next' button - presumably if I had that I could execute some javascript on the browser to press the button.
I've inspected the page in Firefox, but can't see any name I can use - I'm not really familiar enough with html/page design to know why not or how it works.
Could anyone tell me a good method to get button names from a web page? - I've done some searching and even asked a similar question myself before, but I can't find anything which helps, given my patchy knowledge.
Thanks
Inspect the DOM for the 'Next' button.
Look for id's or classes that you can use to identify it.
use document.querySelector() to find the element by the css selector
call the element.click() function to programatically press next
const nextButton = document.querySelector('.sp-pages-nav_next')
nextButton.addEventListener('click', (event) => {
console.log('something clicked next')
})
nextButton.click()
<div class="sp-pages-nav sp-pages-nav_next" data-reactid=".1.3.4.1">Next</div>
In the above snippet on load you can see the code nextButton.click() invokes the console log. You can click the word Next manually to the same effect.
in cefsharp perhaps something like:
browser.ExecuteJavaScriptAsync("(function(){ document.querySelector('.sp-pages-nav_next').click(); })();");
A very similar example can be found here :
https://github.com/cefsharp/CefSharp/wiki/General-Usage#1-how-do-you-call-a-javascript-method-from-net
// When executing multiple statements, group them together in an IIFE
// https://developer.mozilla.org/en-US/docs/Glossary/IIFE
// For Google.com pre-populate the search text box and click the search button
browser.ExecuteJavaScriptAsync("(function(){ document.getElementsByName('q')[0].value = 'CefSharp Was Here!'; document.getElementsByName('btnK')[0].click(); })();");

Click on div to focus on input

I'm working on a small coding game project where the user has to search the page by hovering for clues in order to advance to the following level.
For this specific example, the clue is 1+1 (can be found by hovering around the bottom 2/3 of the page) and the answer is to type number '2' (keycode 50).
When the page loads I autofocus the input field where the script is looking for '2' to be pressed, but my issue is if the user clicks on any of the letters inside "#search" or "#math" it removes the focus from the input.
If the user clicks anything inside either "#search" or "#math", I need the focus to still be thrown to the "text" input. I've looked on stackoverflow for the solution and found this article (Click on <div> to focus <input>), but I can't seem to make it work with my code. I'm assuming it's some stupid simple incorrect syntax, but I need some fresh eyes to look over it because I've got nothing!
Here is a JSFiddle: http://jsfiddle.net/ncx54y3r/2/
Here is the JS I'm using to attempt to accomplish this:
$('#search').click(function() {
$('text').focus();
});
$('#math').click(function() {
$('text').focus();
});
All other code can be seen in the JSFiddle. To check if the script works correctly, just click on any of the letters and type "2". If it redirects to an error page, that means it worked correctly!
Thanks guys! I appreciate it.
You are not including the class indicator "." in the jquery
$('text').focus();
should be
$('.text').focus();
Any errors on the console? Is that all the code ? Its not working for me because Jquery is not loaded.
ReferenceError: $ is not defined

Actually register a "user" key input programmatically

Background:
I am writing a Chrome extension that programmatically replaces abbreviations with snippets of text. Like, it can auto-replace "brb" with "be right back".
The way (simplified to this question) I insert this snippet expansion is like this:
var newFullText = textBeforeAbbrev + expansionText + textAfterAbbrev;
textarea.value = newFullText; // OR
div.innerHTML = newFullText;
Problem:
The problem here is that although this correctly inserts the expanded text, the website does not catch it as an update to the textarea/div contents.
Some sites internally keep a track of textarea/div contents, updating it on input events. That means, if I do this expansion and submit the form, on some sites (like Facebook, Hipchat), this newFullText won't be registered - because it wasn't a user input event - so the website didn't catch it either!. So, the submitted value would be having the text prior to this expansion.
My attempts:
I've already tried firing the keydown and input events - on the concerned textareas - in this manner with NO luck at all:
function triggerKeypress(keyCode){
var ev = new Event("input");
ev.keyCode = keyCode;
this.dispatchEvent(ev);
}
My question:
Is these a way to achieve what I am requesting? Specifically:
Simulate a user keypress/keydown/input/whatever_necessary on the textarea/div/input element, so that the website internally catches it as an input/keypress(whatever event it is supposedly looking for), and updates its internal text, so that the submitted text correctly shows up
I'm looking for a native JS solution. My app is a Chrome extension so naturally I plan to support Chrome code, although cross-browser support is appreciated.
Minimum viable code sample:
Here's the zip file of the minimum code (11KB) you need to reproduce the issue. Please run it and try changing those two methods in the code to get them work, as stated in this question. I've confirmed the linked code does STILL NOT work on Hipchat, Facebook posts and comments. More details inside file README.txt.
How to use it?
1. Open Hipchat team chat, or Facebook.
2. Type "brb" into the team chat box/Facebook post/comments.
3. Press Shift+Space.
4. The expanded text "be right back" would clearly show up inside the textarea.
5. Press enter.
6. The submitted value will show up as "brb" instead of "be right back"
This question is not a duplicate question: please note that the other questions are about:
1. firing a keydown that fires their own custom handler, and which naturally do NOT work here
2. are way too out-dated and have become convoluted over time
3. use deprecated methods like Document.createEvent
Please let me know for more clarification. Thanks!

Use code pasted in Chrome developer console to Auto Enter information in joomla form

I'm updating a bunch of Joomla sites and need to enter the same information through the admin console in each site. There are 25 individual fields in a specific module that need to be updated in each site. What I need is some type of code that I can paste into the developer console in Chrome that will fill in the 25 fields, each field holding different information.
Right now I copy and past text from a document into each of the 25 fields in the form. Very time consuming.
Not sure what type of code is easiest. Any help would be really appreciated.
The easiest way would not to copy and paste the code every time but to have the code in a javascript file on your server to add this code in a random page you can add a bookmark with the following content:
javascript:void(function(doc){
var s= document.createElement('script');
s.src='myrul';
document.head.appendChild(s);
})(document);
I've added whitespace so it's easier to read but this should be all on one line. The value for myurl should be the location of your script.
Your script can then make an XMLHttpRequest to the server that reads the parameters needed for the current page and sets them in the needed text boxes.
To start the script you can just open the bookmark when viewing the page.
[UPDATE]
As for the script to set the values of the inputs you can get all the inputs and set them with values from an array like so:
var myInputs=[0,1,2,3,5],//skip inputs[4] because it's a button
var myValues=["hello","how","are","you","today"];
inputs=document.getElementsByTagName("input"),i
for(i=0;i<myInputs.length;i++){
inputs[myInputs[i]].value=myValues[i];
}
//you can repeat this with textareas or checkboxes
//by re setting inputs: inputs=document.getElementsById("textarea");
//then re set values and if needed myInputs (if you need to skip some textareas)
You can use the JavaScript Console from Google Chrome.
Go on Chrome and Press the key sequence:
CTRL + SHIFT + J for Windows
or CMD + OPT + J for Mac.
Paste (CTRL + V) your code an press ENTER

How do I access changed (via GridDropDownListColumnEditor) values of a Telerik RadGrid server-side?

Details:
I'm basically trying to implement the functionality of the example here (http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/editondblclick/defaultvb.aspx) on my own site, but instead of using a data source control located in the page markup (like in the example: SessionDataSource), I'm using a dataset that I get from some server code-behind. I am able to successfully get my double-clicked row into edit mode with my dropdowns successfully populated, however when clicking onto another row to update the one in edit mode, no-dice.
I've discovered that apparently the client-side JavaScript function updateItem() does not initiate an AJAX callback like I originally thought, so I've been trying to work my way around that. Currently I'm using my RadAjaxManager to perform an AJAX callback with the row index number like so:
function RowClick(sender,eventArgs)
{
if(editedRow && hasChanges)
{
hasChanges = false;
$find("<%= RAM.ClientID %>").ajaxRequest(editedRow);
}
}
This gets me to my server code. Awesome. But,
Problem: I must be accessing something wrong, because the GridDataItem cell text that I'm trying to obtain for the edited row all has the value " ".
Dim gdi As GridDataItem = FieldOpsScheduler.Items(rowIndex)
Dim d As DateTime = DateTime.Parse(gdi.Item("EndDate").Text) //<--FAIL
I've been scouring the Internet for hours now trying to find how I can pull off what I'm trying to do, but to no avail.
Additional Info: I'm using GridDropDownListColumnEditors on the front-side to do the editing for my table, declared like so:
<telerik:GridDropDownListColumnEditor ID="ddlce_SunAct" runat="server" DropDownStyle-Width="60px"></telerik:GridDropDownListColumnEditor>
So does anybody have any ideas on what I have to do to access the values that have been changed in my RadGrid?? Is the problem that I somehow need to rebind my RadGrid when clicking on a new row? If so how do I do that? Any solutions or ideas would be greatly appreciated. (Also although I'm doing this in VB.NET, feel free to write responses in C# if you wish as I understand that too. :-) ) Thank you in advance.
With manual binding updateItem() should still raised the UpdateCommand server event of the grid, but you will have to update the grid source by hand. Modify the local version of the online demo where you Telerik AJAX controls installation is and go from there.
Dick
http://www.telerik.com/help/aspnet-ajax/grdaccessingcellsandrows.html
If anyone else has the same problem as I did, go to the above link and scroll down to the section titled "Accessing the value of cells in edit mode".

Categories

Resources