I am getting xml file content using jquery and binding in to textbox, if anybody change the value in the text box , same has to be reflected in the source xml file, how to do that, i am new to xml.
Here is the code i am using to get the data from xml file.
<html><head>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
type: "GET",
url: "employees.xml",
dataType: "xml",
success: function(xml) {
$(xml).find('Employee').each(function() {
var id = $(this).attr('id');
var name = $(this).find('Name').text();
var designation= $(this).find('Designation').text();
// alert(id + '|' + name + '|' + designation);
$('<div class="items" id="' + id + '"></div>').html('<input type="text" value="' + name + '">').appendTo('#page-wrap');
});
}
});
});
function saveXMLFiles() {
$("#page-wrap").find('id').each(function() {
var description = $(this).find('Designation').text();
alert(description);
});
}
</script>
</head>
<body>
<div id="page-wrap">
<h1>
Employees</h1>
</div>
<input type="button" value="Save" onclick="saveXMLFiles();" />
First create a web method for updating the XML in your server side.
Again you have to write an ajax request for updating the XML.
This is purely depends on your server-side.
Keep these things in mind:
You have to take the value of xml in a variable that is accessible to all the functions so that you can change it when somebody change the value in text box
Pass the value of updated xml to the server;
So do like this;
<script type="text/javascript">
$(document).ready(function() {
var globalXML = null;
$.ajax({
type: "GET",
url: "employees.xml",
dataType: "xml",
success: function(xml) {
globalXML = xml;//this is going to set in global variable
$(xml).find('Employee').each(function() {
var id = $(this).attr('id');
var name = $(this).find('Name').text();
var designation= $(this).find('Designation').text();
// alert(id + '|' + name + '|' + designation);
$('<div class="items" id="' + id + '"></div>').html('<input type="text" value="' + name + '">').appendTo('#page-wrap');
});
}
});
});
function saveXMLFiles() {
$("#page-wrap").find('id').each(function() {
var description = $(this).find('Designation').text();
//change to globalXML;
//and send it to server;
$.ajax({
type: "POST",
url: "saveEmployeesToXML",//path to post
data: globalXML,
success: function(response) {
alert(response);
}
});
}
});
alert(description);
});
}
</script>
Related
What i require? I need to get a total share count using javascript.
Using this link: https://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=http://google.com
I can get the result:
receiveCount({"url":"http://google.com","count":11278})
My code which is not working, i'm not sure which part of the code is wrong. Below:
#pin-div {
color: red
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<div id="pin-div">0</div>
<script type="text/javascript">
$(function() {
var url = "http://facebook.com";
var apiUrl = "https://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=" + url;
$.ajax({
url: apiUrl,
success: function(result) {
$.each(result, function(key, val) {
console.log(key + " - " + val["receiveCount"]["count"]);
var shareCount = val["receiveCount"]["count"];
$("#pin-div").html(shareCount);
});
}
});
});
</script>
Your data is jsonp: receiveCount({"url":"http://google.com","count":11278}). Where the receiveCount function must be created in the window context to hold the data.
You need to add: dataType: "jsonp" in your $.ajax code.
You can try with this version of your code:
#pin-div {
color: red
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<div id="pin-div">0</div>
<script type="text/javascript">
$(function() {
var url = "http://facebook.com";
var apiUrl = "https://api.pinterest.com/v1/urls/count.json?callback=receiveCount&url=" + url;
$.ajax({
url: apiUrl,
dataType: "jsonp",
success: function(result) {
receiveCount(result);
}
});
});
function receiveCount(data) {
$("#pin-div").html(data.count);
}
</script>
I have a total of 4 XML files in same format representing 4 different categories of project contents. However some projects does have more than 1 category.
I want to merge all 4 XML files using jQuery and display all projects contents in a single page within a , but due to the fact that some projects have more than 1 category, the displayed results show duplicates of project contents.
How do I remove duplicates within the combined extracted XML files?
Here is my jQuery Code:
XMLLIST = {
//general settings
xml1: 'xml/structural_steel.xml?' + Math.random(0,1), //solve ie weird caching issue
xml2: 'xml/building_work_id.xml?' + Math.random(0,1), //solve ie weird caching issue
xml3: 'xml/shear_stud_welding.xml?' + Math.random(0,1), //solve ie weird caching issue
xml4: 'xml/custom_solution.xml?' + Math.random(0,1), //solve ie weird caching issue
appendTo: '#list', //set the id/class to insert XML data
init: function () {
//jQuery ajax call to retrieve the XML file
$.ajax({
type: "GET",
url: XMLLIST.xml1,
dataType: "xml",
success: XMLLIST.parseXML
});
$.ajax({
type: "GET",
url: XMLLIST.xml2,
dataType: "xml",
success: XMLLIST.parseXML
});
$.ajax({
type: "GET",
url: XMLLIST.xml3,
dataType: "xml",
success: XMLLIST.parseXML
});
$.ajax({
type: "GET",
url: XMLLIST.xml4,
dataType: "xml",
success: XMLLIST.parseXML
});
}, // end: init()
parseXML: function (xml) {
//Grab every single ITEM tags in the XML file
var data;
data = $('item', xml).get();
var i = 1;
//Loop through all the ITEMs
$(data).each(function () {
//Parse data and embed it with HTML
XMLLIST.insertHTML($(this));
i++;
});
}, // end: parseXML()
insertHTML: function (item) {
//retrieve each of the data field from ITEM
var url = item.find('url').text();
var image = item.find('image').text();
var title = item.find('title').text();
var html;
//Embed them into HTML code
html = '<div class="item">';
html += '<img src="' + image + '"><br>';
html += '<span class="contentsubtitle">' + title + '</span><br><br>';
html += '</div>';
//Append it to user predefined element
$(html).appendTo(XMLLIST.appendTo);
}, // end: insertHTML()
}
//Run this script
XMLLIST.init();
I hope my code is correct. Had no data to test with, but I think the idea of it should be a bit more clear.
edited: Now working, version after receiving xml test-data
<html>
<head>
<title>asdasd</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
</head>
<body>
<div id="list">
</div>
<script>
XMLLIST = {
dataToLoad: [
'test.xml'
],
loadedData: [],
appendTo: '#list',
rand: function() {
return new Date().getTime();
},
loadData: function(file) {
$.ajax({
type: "GET",
url: file + "?" + XMLLIST.rand(),
dataType: "xml",
success: XMLLIST.parseXML,
error: function(r) {
console.error(r);
}
});
},
init: function () {
XMLLIST.dataToLoad.forEach(function(file) {
XMLLIST.loadData(file);
});
},
parseXML: function (xml) {
var data = $('item', xml).get();
$(data).each(function (i, value) {
var $value = $(value),
item = {
url: $value.find('url').text(),
image: $value.find('image').text(),
title: $value.find('title').text()
};
if (!XMLLIST.itemIsInList(item)) {
XMLLIST.loadedData.push(item);
XMLLIST.insertHTML(item);
}
});
},
itemIsInList: function(item) {
var hits = XMLLIST.loadedData.filter(function(value){
return XMLLIST.compareItem(item, value);
});
return hits.length > 0
},
compareItem: function(item1, item2) {
return item1.url === item2.url && item1.image === item2.image && item1.title === item2.title;
},
insertHTML: function (item) {
var html = '<div class="item">';
html += '<img src="' + item.image + '"><br>';
html += '<span class="contentsubtitle">' + item.title + '</span><br><br>';
html += '</div>';
$(html).appendTo(XMLLIST.appendTo);
}
};
XMLLIST.init();
</script>
</body>
</html>
You have a list, where you push your objects to. This list has a checkFunction "itemIsInList". Additionally you need a seperate check-function "compareItem", because indexOf won't work with objects
Managed to modify my original script by adding a masterArr for comparison of duplicated data received accross the 4 XMLs.
Here's the codes:
XMLLIST = {
//general settings
xml1: 'xml/structural_steel.xml?' + Math.random(0,1), //solve ie weird caching issue
xml2: 'xml/building_work_id.xml?' + Math.random(0,1), //solve ie weird caching issue
xml3: 'xml/shear_stud_welding.xml?' + Math.random(0,1), //solve ie weird caching issue
xml4: 'xml/custom_solution.xml?' + Math.random(0,1), //solve ie weird caching issue
appendTo: '#list', //set the id/class to insert XML data
//end general settings
masterArr: [],
init: function () {
//jQuery ajax call to retrieve the XML file
$.ajax({
type: "GET",
url: XMLLIST.xml1,
dataType: "xml",
success: XMLLIST.parseXML
});
$.ajax({
type: "GET",
url: XMLLIST.xml2,
dataType: "xml",
success: XMLLIST.parseXML
});
$.ajax({
type: "GET",
url: XMLLIST.xml3,
dataType: "xml",
success: XMLLIST.parseXML
});
$.ajax({
type: "GET",
url: XMLLIST.xml4,
dataType: "xml",
success: XMLLIST.parseXML
});
}, // end: init()
parseXML: function (xml) {
//Grab every single ITEM tags in the XML file
var data;
data = $('item', xml).get();
var i = 1;
//Loop through all the ITEMs
$(data).each(function () {
//Check if masterArr[] already contains a duplicate of the item by checking using the XML label <image> or any other value/label that is unique.
//Insert into masterArr[] if not duplicate and publish HTML if not duplicate.
var string1 = $(this).find('image').text();
if( jQuery.inArray(string1, XMLLIST.masterArr) == -1){
XMLLIST.masterArr.push(string1);
//Parse data and embed it with HTML
XMLLIST.insertHTML($(this));
};
//If it reached user predefined total of display item, stop the loop, job done.
//if (i == XMLLIST.display) return false;
i++;
});
}, // end: parseXML()
insertHTML: function (item) {
//retrieve each of the data field from ITEM
var url = item.find('url').text();
var image = item.find('image').text();
var title = item.find('title').text();
var html;
//Embed them into HTML code
html = '<div class="item">';
html += '<img src="' + image + '"><br>';
html += '<span class="contentsubtitle">' + title + '</span><br><br>';
html += '</div>';
//Append it to user predefined element
$(html).appendTo(XMLLIST.appendTo);
}, // end: insertHTML()
}
//Run this script
XMLLIST.init();
this is javacript and ajax dont know what is error i tried this without ajax its working but with ajax not working.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/javascript" >
$(function() {
$(".submit").click(function() {
var name = $("#User_Name").val();
var email = $("#User_Email").val();
var mobno = $("#User_Email").val();
var landlineno = $("#user_MobileNo").val();
var proprTd = $("#propertyids").val();
var dataString = 'User_Name='+ name + 'User_Email=' + email + 'User_Email=' + mobno + 'user_MobileNo=' + landlineno + 'propertyids=' + proprTd;
if(name=='' || email=='' || mobno=='' || landlineno=='')
{
$('.success').fadeOut(200).hide();
$('.error').fadeOut(200).show();
}
else
{
$.ajax({
type: "POST",
url: "SaveContactDetails.php",
data: dataString,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
}
return false;
});
});
</script>
this is html code
dont know what is error i tried this without ajax its working but with ajax not working.
<form method="post" name="form" >
<input type="hidden" name="propertyid" id="propertyids" value="<?php echo $Propid ?>" >
<input id="individual" name="rdoiam" value="individual" type="radio" class="input-38-ieo">
Individual
<input id="Agent" name="rdoiam" value="individual" type="radio" class="input-38-ieo">
Agent
<input id="builder" name="rdoiam" value="individual" type="radio" class="input-38-ieo">
Builder <span id="ReqTypeErrorDiv12968081_left" class="span-41-ieo"></span> </li>
<li class="li-42-ieo">
<label class="label-43-ieo">Name<span class="span-37-ieo">*</span></label>
:
<input type="text" id="User_Name" name="User_Name" maxlength="30" class="input-45-ieo11">
<input type="text" class="input-276-ieo11" id="Mobileno" name="user_MobileNo" maxlength="12">
<input type="text" class="input-276-ieo11" id="userLandlineno" name="userLandlineno" maxlength="12">
</form>
and this is php file
<?php
include 'config.php';
$iam ="";
$User_Name="";
$User_Email="";
$user_MobileNo="";
$user_LandlineNo="";
$txtMessage="";
if (isset($_POST['rdoiam']))
{
$iam =$_POST['rdoiam'];
}
if (isset($_POST['User_Name']))
{
$User_Name=$_POST['User_Name'];
}
if (isset($_POST['User_Email']))
{
$User_Email=$_POST['User_Email'];
}
if (isset($_POST['user_MobileNo']))
{
$user_MobileNo=$_POST['user_MobileNo'];
}
if (isset($_POST['userLandlineno']))
{
$user_LandlineNo=$_POST['userLandlineno'];
}
if(isset($_POST['txtMessage']))
{
$txtMessage=$_POST['txtMessage'];
}
$Propid=$_POST['propertyid'];
$iam =trim($iam);
$User_Name=trim($User_Name);
$User_Email=trim($User_Email);
$user_MobileNo=trim($user_MobileNo);
$user_LandlineNo=trim($user_LandlineNo);
$txtMessage=trim($txtMessage);
$str="Call sp_SaveContactDetails('".$iam."','".$User_Name."','".$User_Email."','".$user_MobileNo."','".$user_LandlineNo."','".$txtMessage."','".$Propid."')";
// $sql=mysql_query($str);
if(!mysql_query($str))
{
die('Error:'.mysql_error());
}
else
{
}
?>
You are missing & in your data string:
var dataString = 'User_Name='+ name + 'User_Email=' + email + 'User_Email=' + mobno + 'user_MobileNo=' + landlineno + 'propertyids=' + proprTd;
It has to be:
var dataString = 'User_Name='+ name + '&User_Email=' + email + '&User_Email=' + mobno + '&user_MobileNo=' + landlineno + '&propertyids=' + proprTd;
Thats why its not sending proper data, as you want. Of course, you can serialize all your data...
Also you should be using encodeURIComponent because if the user adds a & or =, your string is going to break.
var dataString = 'User_Name='+ name + 'User_Email=' + email + 'User_Email=' + mobno + 'user_MobileNo=' + landlineno + 'propertyids=' + proprTd;
That is not how you build a querystring
The string looks like User_Name=nameUser_Email=email...., you are missing the & between each. Also you should be using encodeURIComponent because if the user adds a & or =, your string is going to break.
Look at jQuery serialize() it does all of it for you.
Or just use serialize function, you are using jQuery anyway.
$( "form" ).on( "submit", function( event ) {
event.preventDefault();
var formData = $( this ).serialize();
$.ajax({
type: "POST",
url: "SaveContactDetails.php",
data: formData,
success: function(){
$('.success').fadeIn(200).show();
$('.error').fadeOut(200).hide();
}
});
});
Before sending ajax you can always add your validation.
You can use this
<script>
$(function () {
$('form#person').on('submit', function(e) {
$.ajax({
type: 'post',
url: 'show.php',
data: $('form').serialize(),
success: function (data) {
alert(data);
}
});
e.preventDefault();
});
});
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
url: "XML/Website.xml",
dataType: "xml",
success: function (xml) {
var arr = new Array();
$(xml).find("board").each(function () {
var option = $(this).find('brand').text();
if ($.inArray(option, arr) > -1) {
// Do nothing
}
else {
$('#dropdown').append('<option>' + option + '</option>');
arr.push(option);
}
});
}
});
});
</script>
<form>
<select id="dropdown">
<option></option>
</select>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
url: "XML/Website.xml",
dataType: "xml",
success: function (xml) {
$(xml).find('board').each(function () {
var image = $(this).find('image').text();
var name = $(this).find('name').text();
var brand = $(this).find('size').text();
var brand = $(this).find('camber').text();
var price = $(this).find('price').text();
$('#table').append('<tr><td><img width="250px" src="' + image + '"/></td><td>' + name + '</td><td>' + brand + '</td><td>' + price + '</td></tr>');
});
}
});
});
</script>
<table id="table" border="1" cellspacing="5" cellpadding="20" class="center">
<tr><td></td><th>Name</th><th>Camber</th><th>Price</th><th>Size</th></tr>
</table>
</body>
</html>
My XML data is being displayed on the page, but when I use the drop down to select what specifics I want to be selected, It will not change anything. I do not know what I am doing wrong.
My XML tags are all correct I have made sure of it.
In the code you have posted, I don't see where you ask it to change anything when you select something in the drop down.What do you expect it to do? You will need to add a change listener to the drop down, and tell it what to do when it is changed, like this...
$("#dropdown").change(function() {
//Do what you want to do when the drop down is changed.
//You can get the text of the drop down like this...
var selected = $("#dropdown option:selected").text();
});
Also, as a side note, try refactoring your code so you only make the ajax call once, and use the output for both. Looks like your calling the same service twice for the same data which is extra work for no reason.
When I execute this JavaScript file in Firefox;
<script type="text/javascript" >
$(function () {
$(".comsubmit").click(function () {
var comsn = $("#comsn").val();
var comrn = $("#comrn").val();
var compic = $("#compic").val();
var comment = $("#comment").val();
var eventid = $("#eventid").val();
var dataString = 'comsn=' + comsn + '&comrn=' + comrn + '&compic=' + compic + '&comment=' + comment + '&eventid=' + eventid;
if (comment == '') {
alert('Must Type Comment to Post Comment');
} else {
$("#flash").show();
$("#flash").fadeIn(400).html('<img src="assets/uploading.gif" />Loading Comment...');
$.ajax({
type: "POST",
url: "comments_post.php",
data: dataString,
cache: false,
success: function (html) {
$("ol#update").append(html);
$("ol#update li:last").fadeIn("slow");
$("#flash").hide();
}
});
}
return false;
});
});
</script>
I get this error
Error: missing } in XML expression
Line: 31, Column: 2
Source Code:
}); });
The arrow points inbetween the first semi colon and the space.
What can I do to fix this error?
Few remarks about your code:
You don't need the cache: false option as you are performing a POST request.
Instead of concatenating the parameters into dataString let jQuery handle formatting and escaping:
$.ajax({
type: "POST",
url: "comments_post.php",
data: {
comsn: comsn,
comrn: comrn,
compic: compic,
comment: comment,
eventid: eventid
},
success: function (html) {
$("ol#update").append(html);
$("ol#update li:last").fadeIn("slow");
$("#flash").hide();
}
});
Check the Content-Type header returned by comments_post.php. If it is not properly set (for example if it is set to text/xml), jQuery might try to parse the returned XML, while in reality you are returning HTML.
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<font family="Arial" color="red" ><span style="font-size: x-small;"><script style="text/javascript" src="http://sites.google.com/site/attachanu/home/scrollingnew.js?attredirects=0&d=1"> </script>
<script style="text/javascript">
var nMaxPosts = 20;
var sBgColor;
var nWidth;
var nScrollDelay = 75;
var sDirection="left";
var sOpenLinkLocation="N";
var sBulletChar="•";
</script>
<script style="text/javascript" src="http://hackerz7.blogspot.com/feeds/posts/default?alt=json-in-script&callback=RecentPostsScrollerv2">
</script></span></font>
I think the HTML you are passing from the Ajax call is not properly formated. Can you add an alert and make sure it looks OK?