Put HTML tabs using ajax - javascript

I want to put tabs created using JQueryUI in my existing HTML page. I have created to display HTML content received using Ajax. But tabs are not shown correctly. Below is my ajax function
function GetVendorProfile(Category,Business) {
var xmlhttp;
if ((Category== 0) || (Business == 0)) {
document.getElementById("ShowVendorProfile").innerHTML="Please select Category";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{ document.getElementById("ShowVendorProfile").innerHTML=
xmlhttp.responseText;
}
}
if ((Category == "Function Hall") && (Business != 0)){
xmlhttp.open("GET","vendorprofile.php?Business="+Business,true);
}
xmlhttp.send();
}
My vendorprofile.php contains simple tabs. Pls let me know if there is any other way to display HTML successfully using ajax.

Try Jquery load
You can easily load from server directly to html:
$("#ShowVendorProfile").load("vendorprofile.php?Business="+Business);

Related

Changing HTML group class with JavaScript variable

I'm using an AJAX function to grab some data from a database and run a simple if statement. I want to use the output variable "test" to change the class (and therefore styling) of an SVG group. I was originally using PHP on page load but now that I'm using AJAX I have to use JavaScript and it isn't working.
Here's the AJAX:
function loadfacebook1()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var obj = JSON.parse(xmlhttp.responseText);
document.getElementById("fbname").innerHTML=obj.name;
document.getElementById("fbtraffic").innerHTML=obj.traffic;
document.getElementById("fbrevenue").innerHTML=obj.revenue;
document.getElementById("fbprofit").innerHTML=obj.profit;
document.getElementById("fbrafrica").innerHTML=obj.rafrica;
var test = document.getElementById('fbrafrica').value;
if(test > 100)
{var africastyle = "b1";
}
}
}
xmlhttp.open("GET","getfacebook.php",true);
xmlhttp.send();
}
And here is the group that I'm trying to change the class of:
<g class="<?php echo $africastyle ;?>" transform="translate(0,239) scale(0.016963,-0.016963)">
As you can see it uses PHP at the moment but how to I replace this with the JavaScript variable "test" that I assigned in the AJAX function?
Thanks,
Will
Here's what I would do. Add an ID to your group element.
HTML:
<g id="myGroup">
JS:
if(test > 100){
var el = document.getElementById('myGroup');
el.setAttribute('class', 'b1');
}

AJAX - PHP to Javascript Multi Array and Split

New to JSON/AJAX here but trying...
PHP page appears to be returning [{"id":"1"},{"id":2}] to my javascript.
How would I convert it to something useful like a dropdown in html?
Code:
<script>
function show(str) {
if (str=="") {
var ajaxDisplay=xmlhttp.responseText;
var res=ajaxDisplay.split("#");
document.getElementById("ajax1").innerHTML=res[1];
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var ajaxDisplay=xmlhttp.responseText;
var res=ajaxDisplay.split("#");
document.getElementById("ajax1").innerHTML=res[0];
}
}
xmlhttp.open("GET","get.php?q="+str,true);
xmlhttp.send();
}
</script>
<div id='ajax1'><b>ID dropdown will be listed here.</b></div>
I am not sure why you declared the variables twice, but I think this may help If you are asking what I think.
function showUser(fo,to)
{
if (fo=="")
{
document.getElementById("show").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
var arr=xmlhttp.responseText.split(":||:");//I used this as the delimiter
document.getElementById('show').innerHTML=arr[0];
document.getElementById('show1').innerHTML=arr[1];
}
}
xmlhttp.open("GET","some.php?q="+ fo + "&w=" + to,true);
xmlhttp.send();
}
And the php side is different than normal, you;ll need something like this.
if (!$result=mysqli_query($con,$sql))
{
die('Could not get data: ' . mysqli_error($sql));
}
$test=mysqli_fetch_all($result,MYSQLI_ASSOC);//this was key to fetching the array properly for display
$length=count($test);
$half_length=$length/2;
//echo $half_length."<br />";/used for testing
$test12=array_chunk( $test,$half_length+.5,false);//here use true to preserve keys, worked both ways for me
$test5=$test12[0];
$test6=$test12[1];
while(list($key,$val)=each($test5))
{
echo "<p>".$val[$colunm_name]."<p/><br />";//Here you can put in the tags you want and will list your array in the format you want
}
echo ":||:";//Make sure the delimiter is out of the loop
while(list($key2,$val2)=each($test6) )
{
echo "<p>".$val[$colunm_name]."<p/><br />";//Here you can put in the tags you want
//echo "result_count_".count($test)."_-st<br/>";//used for testing
Took me a while to get this, I hope it helps.

Combine AJAX request to load new page with variables

I currently have three stored JS variables (wordChoiceOne, wordChoiceTwo, wordChoiceThree). Now that I have these stored, I want to run a function called saveUsername(). This function should do the following:
Take the jQuery variables above and pass them into PHP and load the file register-form.php into the div register-login-form
So I currently have the following AJAX request, but this only handles the reloading of the form. I've never combined jQuery with PHP before so how can I add the part in this to pass the three variables?
function saveUsername(wordChoiceOne, wordChoiceTwo, wordChoiceThree){
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("login-register-form").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","register-form.php",true);
xmlhttp.send();
}
What do I add to this to pass the three variables and convert them to PHP vars like with a $ sign?
function saveUsername(wordChoiceOne, wordChoiceTwo, wordChoiceThree){
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("login-register-form").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","register-form.php?one="+wordChoiceOne+"&two="+wordChoiceTwo+"&three="+wordChoiceThree,true);
xmlhttp.send();
}
Then PHP side, use $_GET['one'], $_GET['two'] and $_GET['three']

multiple ajax calls using only javascript

isn't it possible to execute multiple ajax calls using javascript only and without using Jquery. I tried the below javascript code with two ajax calls but the code is not working when I place the second ajax call
<script type="text/javascript">
var class1;
var class2;
var sec1;
var sec2;
function func()
{
class1 = document.getElementById('selcla');
class2 = class1.options[class1.selectedIndex].value;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("secdiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getsec.php?q="+class2,true);
xmlhttp.send();
}
function funcsec()
{
sec1 = document.getElementById('selsec');
sec2 = sec1.options[sec1.selectedIndex].value;
alert("selecting class and section details " + class2 + " " + sec2 );
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert("successfully received " );
document.getElementById("studiv").innerHTML=xmlhttp.responseText;
}
else
alert("unsuccessful ajax second call ");
}
xmlhttp.open("GET","getstu.php?x="+class2"&y="+sec2,true);
xmlhttp.send();
}
It is, but you need a different "xmlhttp" handler for each request you make.
Setup a new xmlhttp object and make a second request with the new object.
My suggestion is to break out the part with you initializing the xmlhttp object, into a standalone function, and use it to create a few instances of those objects.
However I must advise against such an approach. It is better to use a library for ajax requests.

How to add a file extension to a user input field with javascript

Im trying to retrieve a txt doc from server with ajax request. The name of the txt doc depends on a text input on html doc. Basically I want to append .txt to the end of the input field following an onclick event
// JavaScript Document
function getData(){
var xmlhttp;
var user=document.getElementById("nameDetails").value;
var userText = user + ".txt"; //**not the solution
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("userSubmit").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","userText",true);
xmlhttp.send();
}
If you want to append .txt to the input field itself, you could try this:
document.getElementById("nameDetails").value = document.getElementById("nameDetails").value + ".txt";
or the short form:
document.getElementById("nameDetails").value += ".txt";

Categories