AJAX :: Pull In Specific Element From Separate Page
Nov 25, 2009
I'm trying to find out how you would pull in specific elements from a HTML file using AJAX.
For example, my AJAX script takes in the URL of the HTML page I want to grab content from (this HTML page is on my server so there are no cross-platform security issues) and it pulls in the HTML document as a string of text rather than a XML/DOM document.
I want to be able to grab a DIV element with a specific ID and pull in all the content from that DIV element.
I know that JavaScript libraries have the ability to do this, but I'm not looking to use a library, I want to use my own Js code. For example this can be done using jQuery's load() method but again I'm looking to implement this with *home-grown* Js code and not have reliance on a Js library for this one aspect of my project.
Does anyone know if there are any ajax functions that would allow me to pull certain content from one page and display on another in a named <div>?
I currently have some code that pulls all the content and works very well. I am looking to enhance this to say only pull the first <div></div> content.
I have this function among many that houses forms. I'm also using an ajax page that is supposed to deal with form's entries and insert everything into my DB and I don't know how to separate the different requests on the ajax page so that it can do what the correct request is.
I'm using AJAX to pull in a page into another page. The page I am pulling looks like so:
<script type="text/javascript"> $('#conditionslink').click(function () { var content = $(this).parent().parent().parent(); content.find('#progConditions').toggle();
[Code].....
And the second looks roughly the same with a different ID for the outer most div "module". I know my problem is related to the $('#conditionslink').click() and that its pulling the conditionslink of the first fragment and therefore causing that click event to fire twice. I suppose i'm looking for a way that i can be more specific about which conditionslink the script is talking to. Whether the answer is to put the script elsewhere or if i need script on my receiving page idk.
My goal is to load the JS for a specific element before displaying that element. I integrated a third part script, and it works well. I set the timer here:
The JS is in my heading as <script type="text/javascript" src="countdownpro.js"></script>
About mid-body I have: <span id="countdown1">2010-07-20 00:00:00 GMT+00:00</span> which allows for the setting of a target date to countdown to.
When the page first loads it shows the above long format target time, until the js/meta tags kick in to modify it to just show the actual countdown as 00:00:00.
I have attached countdownpro.js to this post. I tried shifting the function CD_Init() to the top of the script, and also appended it inline with the .html. I tried setting the big external script to "defer", but neither arrangement worked. I also tried placing the src file right at the top.
I am using a dropdown box with 6 options. On change I want ajax to return part of an HTML/PHP page that corresponds to one of the 6 questions. I was trying to put and if statement on the return page to determine the part that I wanted but I didnt work. I rather not create 6 HTML/PHP files for each of the options. Here is part of the CODE
I am using slideDown() and slideUp() in an accordian style menu to reveal and conceal sections of the menu. By default it seems that these methods will open and close from the top or bottom respectively.
Is there a way to use the methods so that the bottom of the element seems to be being pulled down or pushed up rather than simply revealed or concealed? There are styling elements added dynamically to wrap each heading and section which is why they have containers and why the iteration through parents() is necessary.
This can't be too hard, but I'm not seeing the answer. Elements on a web page may contain a class starting with "tr_". Sample HTML:I'm using the following to select matching elements: $('[class*=tr_]').each(function() So far so good. But now, I need to get the name of the class that starts with "tr_" from each matching element.
I'm working on a project and within a document I have content being loaded into an iframe. When a user clicks on an item in the iframe, a pop-up div is loaded using the facebox plugin but it's obviously contained by the iframe. Is there any way that I can pull that element out of the iframe into the parent document? Or at least position it so it looks like it's part of the parent document and not the iframe? My reasoning for this is sizing and positioning. I want to expand the size of the facebox div and position it over top of some of the parent document elements but, since it's within the iframe, I'm limited to the size of the iframe and positioning is limited to being within the iframe.
Lets say i have a menu with elements "A", "B" and "C" on index.html (my homepage).So classically I should createa.htm, b.htm and c.htm.and link to menu. but rather, I want to have a single "home.htm" that would do all this purpose.My home.htm has all contents same for a,b & c except a "div element" whose content i want to load from different files, different for all the three pages.
if the dt-element in one of the definition lists has a specific css-property (e.g. length > 100px) then the dd-element with the css-class "subtitle" in the same definition list should be removed.
I am trying to use AJAX to pull back mysql table information. I tried to alter an example I found (w3 schools) where they showed how use a selection table to pull a specific line out of a mysql table, using the "q" (not really sure if the "q" character is important or not). xmlhttp.open("GET","xxxxxxx.php?q="+str,true) I follow what they were doing there, but I want to pull the entire table back not just specific lines. (So I got rid of the Q)
Here is a snipit of HTML. The showdata function is part of the testpull.js code. You click the button and it should run the javascript to pull back the entire table and place it in the "placedata" div section.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head>
What is happening is $(this) is no longer based on .expand being the (this) that is clicked.
like if i have a button SOMEWHERE randomly on the page with this
<div onclick="Minimize('_alerts');">Click Here</div> this will minimize alerts but because the (this) in minimize function doesn't actually point to the right button that I want to add a class to.
Is there a way to modify the minimize function so that it finds the <div id="mytoggle"><ul> <li class="expand boxminimize" rel="_alerts"> using the rel toggle, and then changes the class of the li from expand boxminimize to boxexpanded??
just like the .expand click function I posted on the top of the post that works?
My DOM structure in HTML page have some elements 'IMG'. One of 'img' element have attribute 'src' = 'lolo1.jpg'. How can i find the 'DIV' element with this specific 'img' element inside? I have to find nearest 'DIV'.
[Code]...
I wanna write function like a GetNearestDivID('lolo2.jpg') which would give me result 'mix2'
there is a selection of menus on the screen that you can change select different options to show you a price.
issue is as follows; i want to be able to create url's for every product in the database for google adword purposes; for example if they click on the google ad they come direct to the page/selection from the table/drop downs that is what they want. currently we have got as far as creating the below link;
[URL]
this link will take you to the product, but the drop downs from the menus haven't changed, just the price and the quantity.
i need to know of a way of selecting from the database and it be able to change the drop downs from a specific url.
our problem is we need to populate a select option in order of the one we send.
How would I seperate a text string such that it would appear on seperate lines ie. Initial Input: StrMsg = "This is an example of a string that will appear on seperate lines" "Hoping that this fully works, there will be no errors and all will be well" "This is the last line of text."
Is there a way to pull a text off a certain div on a page, and put it into a javascript string? I'm certain that the field has a particular name and id that I can use, if need be.
I have a form on page1.php that will need multiple copies of page2.php to be placed or removed accordingly.
On page2.php it needs to have a select box (populated from a database) and a text area that will be posted along with the information on page1.php
Not sure if it'll help understand it, but basically page 1 has the employee's information, and they can add various details (and remove them) by pressing 'Add skill' then selecting a type from the drop down (communication, marketing, admin or whatever) and then a comment next to it.
I'm trying to access a web application that allows single sign-on when it is passed the following HTTP Request headers:
AUTHENTIC: YES AUTHORIZED: YES USER: (user ID from active directory) Here is the code I have so far: $.ajax({
[Code].....
This script is within a blank webpage on my IIS server. Essentially, all the elements of the web app's UI get thrown within a div, but it doesn't seem to be loading the other parts of the page such as the <head>. I read on another thread that it is not a good idea to try and put everything within a div cause of the other html and head tags that already exist. Basically, what I want to do is access the webpage that has the above script and have it re-direct me to the Web Application's URL and adding in the custom HTTP Request headers.
Is it possible to load a separate page into a div tag using Javascript? or doo I need to resort to C# and ASP.NET? What I have is a main page with one content div I wanted to switch based on which heading item a user chooses. I know I will probably need to set the other pages to a fixed width which is fine.Might it be easier to just make my content into an image and load the image? There will be a few lines of text in the image.
I am new to Javascript and I am having problems with loading a pull down menu.
I get this error: javax.servlet.ServletException: No data found
It will list the items just fine if I just list the items without using the select & option tags. I would like to know why I am getting an error with the following statement:
Attempting to develop [URL] The site uses the onclick() to call a random link.All the links seem to be heavy on the page.Is it possible to store them elsewhere, like a separate webpage?
I have several forms on the same page that need to use the datepicker plug-in. I have datepicker working PERFECTLY on one form. Now I need to add other forms on the page. I haven't been able to get two datepickers working on the same page nor can I find any documentation on whether it's possible. What do I have to do to get two datepickers working in two separate forms on the same page?
