0

so I just had a quick question about jQuery .load().

Is there a way I can load the 'src' field of a div on another page into a variable on my current page? So if it is:

<div class="test"> <img class ="image" src="imagelink">

I would like to get the imagelink in my current HTML page using JS / jQuery. I've tried doing ${#loadhere}.load("URL .image") as per the documentation https://api.jquery.com/load/ but it doesn't seem to get me the image link. My plan is to get the link and then $(#loadhere).attr('src', LINK) as per this SO post: jquery changing image src

1 Answers1

0

If all you want is to parse something from another page using $.get() would be more practical as it won't insert anything into the current page unless you want to yourself.

You can wrap the response html in $() and maniplate or query that html the same as you would do in the current page

$.get('otherPage.html').then(function(res){
    const src = $(res).find('.test .image').attr('src');
    $('#currentPageImage').attr('src', src)
})
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • I'm not really sure why, but using this I'm having an issue where since I'm in a loop, my 'otherPage.html' should change each iteration. However, when reloading the page, it only uses one iteration of the loop and does it X amount of times (as specified in the loop) –  Jun 08 '21 at 17:47
  • Are you saying you need to get src from many different pages? Really not enough known how you will target multiple sources or multiple images in current page – charlietfl Jun 08 '21 at 17:48
  • Yeah so I have 3 pages, they have the same layout and HTML structure, just the images are different in each of the pages. So I have a loop that iterates through each pages, but when I run this code putting my loop variable in the $.get(), for some reason it only pulls the image src from one of the pages –  Jun 08 '21 at 17:52
  • Not sure if problem is not making 3 requests or problem is targeting same element in current page. Look in browser dev tools network tab to verify requests are made. – charlietfl Jun 08 '21 at 17:55
  • Yeah I think they're being made because I see the images in the network tab and the request URL is the page I need to pull it from. It's just not displaying for each of the appropriate divs they're all just replacing each other –  Jun 08 '21 at 17:58
  • So my loop makes divs with a unique ID, ie and . So in my jQuery, I have a loop through id1 id2 and id3 and use your get function so its $(id iteration here).attr('src', src). But it seems to only be updating only one of the src's –  Jun 08 '21 at 18:02
  • Could be a problem with loop approach if it is a `for` loop and how you configure the indexing. Still not enough known – charlietfl Jun 08 '21 at 18:04
  • I'm not really sure honestly. I have another variable within the same loop displaying another piece of information that I'm pulling and it displays a new content for each page, so the loop is working fine. The .get() function just seems to be pulling only from one page out of all of the pages. I'm using your exact .get function. My div generated is essentially: and then I use $.('#ids[i]').attr('src', src) –  Jun 08 '21 at 18:09
  • Put the loop code in a pastebin or other code sharing location – charlietfl Jun 08 '21 at 18:10
  • I suspect the problem is related to https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example but am blind guessing – charlietfl Jun 08 '21 at 18:11
  • Ah I think the problem is the .get() function only happens after the page is loaded / the rest of the loop is done? Because it seems to only pull the last iteration of the loop –  Jun 08 '21 at 18:17
  • @charlieftl I made an updated post with code in HAML here: https://stackoverflow.com/questions/67893332/jquery-get-function-happening-after-page-load-haml –  Jun 08 '21 at 19:22