jQuery Forum

How to integrate Jquery with html

in Using jQuery • 4 years ago

Hi All,

This is my first question on this forum.

I am automating a process wherein I need to login to a website and navigate to specific tab and then download few CSV files from that website.

I have written a Jquery code which works fine in chrome console but I want to integrate this code with html and I am not able to do that as I am not sure what should be called in body tag of html.

Can somebody please help me ?

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.ibody tr').each(function (a, b) {
var count=0;
var name = $('.cl', b).text();
if(name.indexOf(".CSV")!==-1 && name.indexOf("TAS")!==-1){
var d= a-9;
var hiddenIFrameID = 'hiddenDownloader' + count++;
var element=document.createElement('a');
element.href = "https://www.shipper-ml.com/viewReports.do?ctrl=reportListForDownload&action=DownloadReport&param="+d;
element.target='_blank';
element.classList.add("download");
document.body.append(element);
}
});
setTimeout(function(){
var linkslength=$(".download").length;
for(var i=0;i<linkslength;i++)
{
$(".download")[i].click()}
},500);
});
</script>
</head>
<body>
<div class="container">
<div id="objectsDiv">
<div id="lc_ctrl1341970887">
<table class="ibody">
<tbody>
<tr class="header">
<td>
Report ID
</td>
<td>
Version No.
</td>
<td>
Report Type
</td>
<td>
Date Created
</td>
<td>
Status
</td>
<td align="center">
Excel
</td>
<td align="center">
XML
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
</body>
</html>

Replies(23)

Re: How to integrate Jquery with html

4 years ago

Hello,

First off you have this:

</body>
</html>
</body>
</html>

It should simply be:

</body>
</html>

Secondly you could have this as your code:

<html>

<head>

$(document).ready(function(){

alert('Document Ready!');

});

</script>

</head>

<body>

</body>

</html>

OR you could have this:

<html>

<head>

</head>

<body>

</body>

$(document).ready(function(){

alert('Document Ready!');

});

</script>

</html>

Or even:

<html>

<head>

</head>

<body>

$(document).ready(function(){

alert('Document Ready!');

});

</script>

</body>

</html>

As just 3 examples. All 3 will execute correctly.

Jim

Re: Re: How to integrate Jquery with html

4 years ago

Your second example has invalid HTML. Don’t do it.

All your examples work, but only the first one is normal/modern style. Number 3 is often considered sloppy/kludgy.

JΛ̊KE

PS.

Specifying type="text/javascript" was never needed. Scripts work without specifying that type.

PPS

$(document).ready(function(){ is considered old-fashioned. $(function(){ is shorter and does the exact same thing.

PPPS

var name = $('.cl', b).text(); finds nothing. as there is no class=cl inside any <tr>.

Re: How to integrate Jquery with html

4 years ago

You should spend time at the jQuery Learning Center. There are lots of lessons/tutorials there and all over the Internet.

JΛ̊KE

https://getbootstrap.com/docs/4.0/getting-started/introduction/

Re: How to integrate Jquery with html

4 years ago

"but I want to integrate this code with html"

My examples were based on the sense that Shivangi believed that scripts need exact placement otherwise they would not execute.

I was merely trying to illustrate that is not the case. Example 2 does execute but introduces a new problem. I should have not included that.

Example 3 is a Bootstrap example, see:

But I prefer the first example as well. That is the way I would code it.

Jim

Re: How to integrate Jquery with html

4 years ago

HI Jim,

Thanks for quick response.

I have tried all the options but nothing seems to work.

Can you please suggest me where I am going wrong ?

Thanks

Shivangi

Re: How to integrate Jquery with html

4 years ago

Hello,

I thought you were asking where to place the script as a general question.

In any case I tested your code, and you are correct there are no errors in the console. But it does not do anything either.

As JΛ̊KE points out, "var name = $('.cl', b).text(); finds nothing. as there is no class=cl inside any <tr>".

There seems to be a bigger problem besides this.

I assume when the page loads you expect to see for more than this ( a Table Header ) :

Report ID

Version No.

Report Type

Date Created

Status

Excel

XML

I am guessing you should have many table rows on page load and the jQuery is used to interact with these rows.

What you have as code does not help me to solve the problem.

Jim

https://api.jquery.com/jQuery.ajax/

Re: Re: How to integrate Jquery with html

4 years ago

The more I think about it, you seem to be missing code from:

or even:

https://api.jquery.com/jQuery.get/

In other words maybe you try to build the table rows using something like:

$.get( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
  alert( "Load was performed." );
});

I am thinking your code needs $.get

You need some mechanism to get the <tr>'s to the page.

Jim

Re: How to integrate Jquery with html

4 years ago

It's downloading the csv file from the table.

the code is working in console but I am not how to go ahead in integrating it with html. Should I go for AJAX call to call the table class used in JQuery in body tag of html ?

Re: How to integrate Jquery with html

4 years ago

Here is what I see:

<table class="ibody">
<tbody>
<tr class="header">
<td>
Report ID
</td>
<td>
Version No.
</td>
<td>
Report Type
</td>
<td>
Date Created
</td>
<td>
Status
</td>
<td align="center">
Excel
</td>
<td align="center">
XML
</td>
</tr>
</tbody>
</table>

I do not see a table with data, only headers.

Re: How to integrate Jquery with html

4 years ago

Delete your last post.

Re: Re: How to integrate Jquery with html

4 years ago

Launch the url - "https://www.shipper-ml.com"

Navigate to "https://www.shipper-ml.com/viewReports.do/" page.

I am trying to download the data from this page.

I am not sure what should I give in body tag of html.

https://www.shipper-ml.com/viewReports.do <--- this is your page or this is a service you subscribe to?

https://www.shipper-ml.com/viewReports.do/

Re: How to integrate Jquery with html

4 years ago

I have to get going, but anyone else that can work on this I have saved the resultant code generated from:

Jim

Attachments

reports.html
Size : 26.0 KB Downloads : 588 Download

Re: How to integrate Jquery with html

4 years ago

https://www.shipper-ml.com/viewReports.do -> this is the 3rd party website from where I am downloading the files.

Re: How to integrate Jquery with html

4 years ago

The web has "security" to prevent what you are trying.

Unless they provide you an API, you will have to use server code to fetch that page.

JΛ̊KE

Re: How to integrate Jquery with html

4 years ago

Hi Jake,

Can you please tell me how can I use server code ?

Can you please elaborate a bit more ?

Thanks & Regards,

Shivangi Anand

Re: Re: How to integrate Jquery with html

4 years ago

It would depend on your server language. Each language has its own way to fetch pages from the internet.

JΛ̊KE

Re: How to integrate Jquery with html

4 years ago

It's all in html.

But I am not sure what you are saying. Can you please explain a bit ?

Re: How to integrate Jquery with html

4 years ago

PHP, PERL, ASP, NodeJS,… these are server languages. They can break web "security" that can’t be broken in the browser.

JΛ̊KE

Re: How to integrate Jquery with html

4 years ago

Can you please help me with this ?

Re: Re: How to integrate Jquery with html

4 years ago

No. This is a jQuery forum. We don’t deal with server languages here. You need to identify what language you want to use on your server, then find a forum or tutorials on how to do it.

JΛ̊KE

Re: How to integrate Jquery with html

4 years ago

Hi Jake, Thanks.

watusiware

Re: How to integrate Jquery with html

4 years ago

It's silly "security", since you can easily get around it with a server program.

https://en.wikipedia.org/wiki/Same-origin_policy

Browsers will refuse to make Ajax requests to a site other than the origin (the site the HTML was loaded from initially) unless the other site sets a header that gives "permission".

https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

With a server program, you can just not bother to check for permission.

See, I said it was silly!

That said, if the site doesn't set the header to give permission, they probably have a reason. Make sure you aren't violating the third-party site's policies, or some law.