Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

issue with jquery load functionality

Posted on 2012-04-04
4
Medium Priority
?
318 Views
Last Modified: 2012-04-20
i am in a problem where my page does not become editable unless and untill its all images and everthing does not appear. so to make that, i tried the image in one scenario to be load my an ajax call.

i just mad a small call like this

$("#refresh").html('<img src="/dummy.gif"'>');
$("#refresh").load('abc.cfm?id=#id#');
<div id="refresh"></div>

now the case is what i am trying page should separately and initially the dummy.gif should be shown and then a ajax call will be made immediately after it to load the actual image from the server which is taking time to show and display in the div.

just trying to separate the load taking image from actual page call so page should become editable while image could keep loading later.


but this approach is not working, as initially i load a page, it does not eve show an image nor it load the file

then i tried adding the setInterval function to the load method like this:

setInterval(function() {
           $("#refresh").load('abc.cfm?id=#id#');
},1000);

so by this it makes call every 1 sec and then it keeps on executing that specific code every one second. this approach works, but i am not sure if this is a feasible solution and it is making a call again and again, it will hit performance, so anyone can guide better

Thanks
0
Comment
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 37805653
did you tried this approach?

<script>
$(document).ready(function(){
    $("#refresh").load('abc.cfm?id=#id#');
});
</script>

<div id="refresh"><img src="/dummy.gif"'></div>
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 37805687
btw document.ready is already defined at the top of the Page but that is for another jquery function, so do i need to declare again
0
 
LVL 40

Accepted Solution

by:
Gurvinder Pal Singh earned 2000 total points
ID: 37805696
you don't have to declare it again, but simply call this jquery line in that document.ready() event

("#refresh").load('abc.cfm?id=#id#');

Idea is to make sure that element with id 'refresh' is loaded into the document before this jquery statement is executed
0
 
LVL 16

Author Comment

by:Gurpreet Singh Randhawa
ID: 37806056
well i have noticed few the document.ready is opening for some jquery functions and then it is closed, like in a page which is like a set of included page , some included pages have jquery, that has already declared document.ready but that closed it too

but also my concern is if i have 100 records the document.ready will run 100 times
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

609 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question