Populate A Div In Html Via Ajax?
Jan 12, 2010
I'm trying to populate a div in html via ajax. The data source is a google search for "bing sucks"
I call the method with
loadXMLDoc('http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=Bing%20sucks')
It works in InternetExplorer, but it doesn't work with Firefox/Chrome. If I load just a file from the local domain (test.txt) , then it works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>AJAX</title>
[Code]....
View 2 Replies
Similar Messages:
Sep 28, 2010
I'm using Ajax to dynamically populate a DIV. I have each page content stored in XML files as CDATA. When a user clicks on a link from the navigation bar, the Ajax loads the XML for that particular page, parses it, and populates the DIV with it's content.
Everything is working GREAT, except for one thing. I have a jQuery modal popup whose markup is loaded from that page's XML file. The .js and .css files from the jQuery plugin are all loaded, and when this is HARD CODED (i.e., not loaded from XML), it works fine. But when it's loaded from the XML, the modal doesn't work.
When the page is loaded from the XML file- What the page is supposed to do is load the HTML from the XML file, which it does, and there's a hyperlink that when clicked, it's supposed to create the modal popup window. Instead, clicking on the link does NOT fire up the modal popup window.
When the page is hard coded- it does everything it's supposed to do.
A live example is at:
http://mikemarks.net/clientSites/tabras/
Click on "The Band", and at the bottom you'll see the hyperlink called "Demo". Clicking on that should bring up a modal popup window, but instead as you can see it just takes you to the top of the page.
Below is my markup (notice the div id="copy", which is the placeholder for my HTML content that's loaded from the XML file), my Ajax JavaScript code, and my XML file (which is shown as the markup that's loaded into the div id="copy").
<div id="leftTwoThirdsColumn">
<div id="menu">
<ul class="menu">
<li style="width:65px;"><a id="default" href="#" onclick="makeRequest('xml/default.xml');"><span>Home</span></a></li>
<li style="width:65px;"><a id="lyrics" href="#" onclick="makeRequest('xml/lyrics.xml');"><span>Lyrics</span></a></li>
<li style="width:110px;"><a id="merch" href="#" onclick="makeRequest('xml/merch.xml');"><span>Merchandise</span></a></li>
<li style="width:93px;"><a id="bio" href="#" onclick="makeRequest('xml/bio.xml');"><span>The Band</span></a></li>
<li style="width:80px;"><a id="contact" href="#" onclick="makeRequest('xml/contact.xml');"><span>Contact</span></a></li>
<li style="width:150px;" class="last"><a id="friends" href="#" onclick="makeRequest('xml/friends.xml');"><span>Friends of Tabrs</span></a></li>
</ul>
</div>
<br /><br />
<div id="copy">
</div>
</div>
function makeRequest(url)
{
if(window.XMLHttpRequest)
{
request = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
request = new ActiveXObject("MSXML2.XMLHTTP");
}
sendRequest(url);
}
function sendRequest(url)
{
request.onreadystatechange = onResponse;
request.open("GET", url, true);
request.send(null);
}
function checkReadyState(obj)
{
if(obj.readyState == 0) { document.getElementById('copy').innerHTML = "Sending Request..."; }
if(obj.readyState == 1) { document.getElementById('copy').innerHTML = "Loading Response..."; }
if(obj.readyState == 2) { document.getElementById('copy').innerHTML = "Response Loaded..."; }
if(obj.readyState == 3) { document.getElementById('copy').innerHTML = "Response Ready..."; }
if(obj.readyState == 4)
{
if(obj.status == 200)
{
return true;
}
else if(obj.status == 404)
{
// Add a custom message or redirect the user to another page
document.getElementById('copy').innerHTML = "File not found";
}
else
{
document.getElementById('copy').innerHTML = "There was a problem retrieving the XML.";
}
}
}
function onResponse()
{
if(checkReadyState(request)) {
var response = request.responseXML.documentElement;
var root = new Array();
root = response.getElementsByTagName('');
//alert("Total Number of HTML Elements Found: " + response.getElementsByTagName("").length);
var html = '';
for (var i = 0; i < root.length; i++) {
var tagName = response.getElementsByTagName("").item(i).nodeName;
var tagObj = response.getElementsByTagName("").item(i);
html += tagObj.firstChild.nodeValue;
}
document.getElementById('copy').innerHTML = html;
}
}
<div style="padding-top:5px; margin-left:auto; margin-right:auto; text-align:center;">
<img src="images/ShawnBioActive.png" />
<img src="images/JasonBioActive.png" />
<img src="images/WillBioActive.png" />
<img src="images/RasoulBioActive.png" />
<img src="images/bioStrip.png" />
<div id='basic-modal'><h3>Basic Modal Dialog</h3><p>A basic modal dialog with minimal styling and no additional options. There are a few CSS attributes set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p><input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a></div><script type="text/javascript" src="../js/modal/jquery.simplemodal.js"></script><script type="text/javascript" src="../js/modal/basic.js"></script><link type="text/css" href="../css/modal/demo.css" rel="stylesheet" media="screen" /><link type="text/css" href="../css/modal/basic.css" rel="stylesheet" media="screen" /><script type='text/javascript'>jQuery().ready(function () {$('#basic-modal-content').modal();});</script>
<div id="basic-modal-content"><h3>Basic Modal Dialog</h3></div><div style='display:none'><img src='images/modal/basic/x.png' alt='' /></div></test2>
</div>
View 2 Replies
Feb 10, 2011
I'm look for a way to pre-populate Asp.net form from E-mail Link. I tried several method such as:[URL]Our vendor is saying this should work but I'm having no luck with it. If someone can tell me what might be wrong with this or if there is another solution. This is being used for an e-mail campaign so that the user receiving the e-mail does not have to fill the form link is navigating to.
View 1 Replies
Oct 29, 2010
I have two tables, Users and Roles. The roles table is a reference table for the different roles of my site (RoleId and RoleName columns). The Users table contains profile data for each user, including a RoleId column that is FK'd back to the Roles table [RoleId].
Both tables are in a Linq to SQL model.
I have an edit page created which lists all the profile values of a user. The edit page inherits the User model. One of the editable values is the RoleId field. I want to set this up to be a drop-down list that contains items labeled using the RoleName column of the Roles table, and matched with values of RoleId.
View 3 Replies
Dec 10, 2010
I've created a static table, which looks just as I would expect it to, but I want to reduce my work in the future, as I'll need to create more rows and columns to store extra data that's added to my application.
So rather than creating new rows and columns whenever I need to, I'd like to automate the task by pulling the data from the database and populating a table that's dynamically created based on how much data is pulled.
e.g. if there are 10 rows of items in the database, create 10 columns and 10 rows, if a further 5 things get added next week, I want to add another 5 rows and 5 columns etc
Is this where "Dynamic Data" would play a role? If so, it's completely new to me, my needs are just for a single table on a page, not something that needs to be done en'masse all over the website, if that makes a difference?
View 5 Replies
Sep 27, 2013
i need to display whole table including headers with repeater ,,
View 1 Replies
Jul 26, 2010
I have a very long list of items for a dropdownlist. As the list is very long, I would like to only show the items in the list if the user actually clicks on the dropdownlist to expand it. I found various tutorials on how to use AJAX with cascading dropdownlists but none explaining if it is possible to have just one dropdownlist which gets populated with AJAX when the user expands it. Are there any extenders coming with the AJAX toolkit that I missed? What would be the best way of achieving this?
View 1 Replies
Feb 3, 2011
I am using Ajax to get the data from the database then passing that to javascript to populate my dropdown... The issue I am having is when i try to pull that value out in my code behind the value is empty... I am new to javascript and I am not sure what I need to do... Can someone take a peek at what i have and let me know what i might be missing.
[Code]...
View 3 Replies
Jan 19, 2010
i have application with 2 cascading dropdownlists that got populated using web service, when a value was picked in the first one the second filled with values, now when the second one got selected i want to poulate listview with images links.
View 2 Replies
Sep 27, 2010
I've been trying to get this to work for weeks. I am trying to use a cascading drop down to populate drop down lists. The service method is working as i'm able to view the data in the browser but when i run the application the drop down list is empty. see below for the service method.
[Code]....
The code for the drop down list:
Location Name:<asp:DropDownList ID="DropDownList3" runat="server">
</asp:DropDownList>
<asp:CascadingDropDown ID="CascadingDropDown1" runat="server"
Category="Locations"
TargetControlID="Dropdownlist3"
PromptText="[Select Location]"
ServicePath="~/LocationWebService.asmx"
ServiceMethod="GetLocation"
EmptyText="Nothing">
</asp:CascadingDropDown>
View 4 Replies
Dec 23, 2015
I have developed one web application, I used ComboBox control, I got data successfully from database. My issue is I ComboBox ListItem Message is not working. I want to fist record is “Select Patient Name”. Below is my code...
<cc1:ToolkitScriptManager ID="ToolkitScriptManager2" runat="server">
</cc1:ToolkitScriptManager>
<cc1:ComboBox ID="ComboBox2" incrementalfilteringmode="StartsWith" runat="server"
CssClass="txtbox" DropDownStyle="DropDownList" AutoCompleteMode="SuggestAppend"
[Code] ....
View 1 Replies
Oct 13, 2010
i have a drop down list tied to a database called location.
what i hope to achieve is once a location is selected, my other drop down list will auto-populate a list of department in that location. how do i go about on connecting the two drop down list together so when location is changed, it connects to the appropriate row in the database?
View 1 Replies
Aug 25, 2010
I want to populate the cascading Dropdown values without Promttext.
Scenario is .If a single value is retrived from the database then I think no need to populate the promt text. It may populate only that value and call the next function from the inside of it. Can it be possible using web methods.
View 1 Replies
Feb 11, 2011
I am working on a project where the customer has a large database of products, they want to select the product by the id number and I thought it best that the description also show up. What I have is a dropdownlist that is linked to the id number in the database table and that works just fine. My problem comes when populating the corresponding description from the table into either a textbox or label(doesn't matter which one I use) I can accomplish this without ajax just fine but we would like to reduce the postbacks to the server. I have never used ajax before Here is my code from the aspx file.
[Code]....
Here is the code in the cs file
[Code]....
View 6 Replies
Feb 21, 2011
am using VS 2010.I am new to this (AJAX RAD Controls/AJAX RAD Charts).I am having an xml file having 3 tables.Now my requirement is to plot a Stacked bar Chart dynamically retrieving values from different tables.
I have retrive values from different table into One Datatable named "ValuesToDisplay"
05:30 06:00 06:30 07:00 07:30 08:00 08:30 09:00 09:30 10:00 10:30
View 2 Replies
Mar 2, 2011
I am trying to get two cascading dropdownlist to work but cannot get either to populate. How do I de-bug this? I'm not getting any errors, just blank dropdowns.
I've been trying to fill in webservice from SQL Server. But in-case this was the problem. I found an example on this site to fill with test values, but this still does not work. Since I cannot even get first to populate, to simplify I'm just giving code for first dropdown and its function(s)
[code]....
View 6 Replies
Aug 2, 2010
I have a textbox control and a checkbox list control on my page.
I am first populating my checkbox list with a list of employee objects in the code-behind. An employee has an id and a name. Both are displayed in the checkbox list like so:
Jim (1)
Alex (2)
Gary (3)
When a user checks one of the boxes, the employee's name needs to be populated in the textbox. So if Jim is selected, the textbox value is "Jim". It also needs to support multiple values, so if Jim and Gary are selected, the textbox value is "Jim, Gary".
Also, if a user enters a valid value in the textbox, the correct employee should be checked. This needs to support names and id's. So if I enter "1,Alex" in the textbox and then click outside the textbox, Jim and Alex should be selected.
I'm using ASP.NET and I need to do this using AJAX, but I have no experience with using jQuery and AJAX. Could someone show me a simple example of how to do this?
View 1 Replies
Jan 12, 2011
I have 4 xml files.When user select any one xml file and and enter data into textbox
it populates data from xml file.
My xml file is
[Code]....
When User typed as '13' in textbox....how retrive all 13 related data into textbox using autocomplete control. i want populate data
[Code]....
View 6 Replies
Aug 26, 2010
i have two combo cboCountry and cboCityi want to change cboCity with new value.
[code]...
View 8 Replies
Feb 16, 2010
This is my first time trying to use the UpdatePanel component. It's a very simple task. I have a search panel on a page and I want to populate a ListBox according to text the user typed. Here's my basic aspx:
[Code]....
On my .CS file, I have the following function for ButtonSearch click:
[Code]....
But when I press the button nothing happens. I see on debugger that the procedure is being called but the ListBox isn't populated. I tried to place the ListBox inside the UpdatePanel but I got the same results.
View 2 Replies
Oct 21, 2015
I want to Bind div From the Parent Table and Get All Child item also in a div But I am not get that properly...
Jquery Code with html.
Testing.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Testing.aspx.cs" Inherits="WebApplication14.Testing" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[Code] ....
Web method For Retriving Data From the Database.
Getdata.asmx:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Configuration;
[Code] ....
Parent class
allclass.cs:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace WebApplication14
[Code] ....
In this code how can we get data proper format like parent table data show and this data parent id in child table this child table data also show with parent table.
View 1 Replies
May 7, 2015
I am using web method for delete row from repeater but how to reresh repeater or how to delete row from repeater .
record is deleted from database but display in repeater.
can i do this thing without postback?
View 1 Replies
Oct 26, 2013
how o create menue and sub menue from data base?
View 1 Replies
Aug 21, 2012
I am drawing the line graph from the following array
var abc=[20,30];
var line = new RGraph.Line('cvs', abc)
.set('spline', true)
.set('numxticks', 11)
.set('numyticks', 5)
[Code] .....
and storing the same value in jquery session
$.session("abc",abc);
and retrieving the same value on button click and re drawing the graph but i am unable to draw it.
i have retrieve the values as below
var def=[];
def =$.session.get("abc")
and passing this array in place of abc array, whats wrong in my code?
View 1 Replies
May 7, 2015
how can we have the ajax slide show which take the image path from database, instead of define the image path static in service method.
View 1 Replies
