Change state of HTML page without refresh? - javascript

Currently, I have a mySQL database setup as follows:
fullname
address
cellphone
homephone
email
It is for users registering for my company. In the employee section of the site, there is a drop down menu, which is populated from the fullname row of the database. Is there a way using JavaScript/AJAX to display the entire column of data, based on the person currently selected in the drop down menu?

As pimvdb and myself stated, you will require a server-side language to accomplish this.

Yes there is a way.
Look into jQuery
http://jquery.com/ where you can create element.
Use ASP.NET to read the data from the SQL server, then make a jQuery AJAX call to your ASP.NET page, and finally display it.
Here is a snippet from my code, that should help you out.
$.ajax({
type: "POST",
url: "YOURPAGE.aspx/YOURMETHOD",
contentType: "application/json; charset=utf-8",
data: "{ 'upc':'" + value + "' }",
dataType: "json",
success: function (result) {
var yourelement = document.getElementById("someelement").options;
//mess around with the element here
}
},
error: function(){}
});

It's easy with AJAX. Just have a page that prints the resultset formatted however you like. Then do a simple jQuery call like:
$("#personDiv").load("person.php?name="+$("#fullname").val());

i highly recommend the use of jQuery and the use of .ajax()

Related

Accordion creation in CRM

I am very much new to CRM, I got a requirement, asking me to create a simple accordion with name and status - as panel heading. And after expanding the panel, I should give all the details about the user details in the entity. All the details will be fetched dynamically from the back end. Can some one help me in writing this. I don't know how to start. everything will be dynamic, depends on the field in the DB. Hope I explained clearly
First of all you should design a accordion or dropdown-toggle etc with html, css and JavaScript . Second you should call Ajax to fetch data from back-end then back-end gonna return a JSON. After that you should assign values to their own places. The code below is a sample for calling an Ajax with JQuery:
var parameters = {id:10};
$.ajax({
type: "POST",
data: parameters,
datatype: "json",
url: '#Url.Action("ProductList", "Product")',
success: function(result){
$("#username").attr('value', result.Username);
}

Laravel - Ability to filter database using AJAX

This is my first time attempting filtering and searching the mySQL database. From my research I have found out I need an AJAX call and some PHP query that will help my achieve the filtering I want to achieve.
This is what I want the AJAX search to do:
Have an Apply button. When I click the button I want a URL to get generated and the AJAX call to happen.
Only reload part of the page where the data queried is contented.
So far I have managed to create this:
$("#filteridname").change(function() {
$value=$(this).val();
$.ajax({
type: "get",
url: "{{$myurl}}",
data: {'search':$value},
success: function(data){
$('#data-holder').html(data);
}
});
});
This manages to create the URL one of the filters, but it does not take the other filters into consideration. I also did not manage to create the button. I am guessing you would need a where statement in the PHP to filter the database?
Would anyone be willing to assist me in creating the AJAX call and PHP query for the filters?
In total I have three filters, and when I click a button I want an AJAX call to filter my database with the three filters and return the results without having to reload the whole webpage.
EDIT: Here is my JS AJAX query:
$("#apply").click(function() {
$country=$('#filter-country').val();
$type=$('#filter-type').val();
$year=$('#filter-year').val();
$.ajax({
type: "GET",
url: "{{$launchsitename->site_code}}",
data: {'country':$country, 'type':$type, 'year':$year},
success: function(data) {
$('#data-holder').append(data);
}
});
});
Now I just need to create a PHP query.
you can use propriety called .Append() instead of .html() ,also here you are getting one element value on change , if you want to get the three of them at one button click , you can make it the same way that you got the val of the first one , and just adding it to the request and handle it back in PHP to divide and execute each one or just pass the three of them to your procedure , depends on what you have
$("#filteridname").change(function() {
$value=$(this).val();
$.ajax({
type: "get",
url: "{{$myurl}}",
data: {'search':$value},
success: function(response){
$('#data-holder').append(response);
}
});
});
Read about .append()

My ajax call not pulling in dynamic data from PHP/Mysql

Hello: I am working on a project where I am going to have divisions from a league listed as buttons on a page. And when you click on a button a different team list shows for each division. All divisions and teams are stored in a mysql database and are linked together by the "div_id". The plan was have the buttons use javascript or Jquery to send the 'div_id" to a function; which would then use ajax to access an external php file and then look up all the teams for that division using the div_id and print them on the page. I have been piecing this all together and getting the various pieces to work. But when I put it all together; it seems like the ajax part - does not pull in fresh data from the database if the data is changed. In fact, if I change the PHP file to echo some more data or something, it keeps using the original unaltered file. So, if the data is changed that is not updated, and if the file is changed that is not updated. I did find if I actually copied the file with a new name and then had my ajax call use that file instead; it would run it with new code and the new data at that time. But then everything is now locked in at that point and cannot get any changes.
So - I do not know much about ajax and trying to do this. I am not sure if this is totally normal for what I am using and for a dynamic changing team list, it cannot be done this way with ajax calling a PHP file.
OR - maybe there is something wrong with the ajax code and file I have which is making it behave this way? I will paste in the code of my ajax code and also the php fileā€¦
here is the ajax call:
var answer = DivId;
$.ajax({
type: 'GET',
url: 'path_to_file/gscript2.php',
data: 'answer=' + answer,
success: function(response) {
$('#ajax_content').html(response);
}
});
and here is the script.php file that it calls (removed db credentials):
<?php
if (!empty($_SERVER['HTTP_X_REQUESTED_WITH'])
&& strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'
) {
// AJAX request
$answer = $_GET['answer'];
$div_id=$answer;
echo "div id is: " . $div_id . "<br/>";
mysql_connect($hostname,$username, $password) OR DIE ('Unable to connect to database! Please try again later.');
mysql_select_db($dbname);
$result_g1 = mysql_query("SELECT * FROM teams WHERE div_id=$div_id");
while($row = mysql_fetch_array($result_g1, MYSQL_BOTH))
{
$team_id=$row[team_id];
$team_name=$row[team_name];
echo $team_id . " " . $team_name . "<br/>";
}
}
?>
So - to sum up - is there something wrong with this making it do this? Or is what it is doing totally normal and I have to find a different way?
Thanks so much...
Most likely your browser is caching.
Try adding cache: false as such:
$.ajax({
cache: false,
type: 'GET',
...
The jQuery documentation explains that by doing so, it simply adds a GET parameter to make every request unique in URL.
It works by appending "_={timestamp}" to the GET parameters.
I believe this is caused by your browser's cache mechanism.
Try adding a random number to the request so the browser won't cache the results:
var answer = DivId;
$.ajax({
type: 'GET',
url: 'path_to_file/gscript2.php?r=' + Math.random(),
data: 'answer=' + answer,
success: function(response) {
$('#ajax_content').html(response);
}
});
Or turning jQuery's caching option off by:
var answer = DivId;
$.ajax({
type: 'GET',
url: 'path_to_file/gscript2.php',
data: 'answer=' + answer,
success: function(response) {
$('#ajax_content').html(response);
},
cache: false
});
Or (globally):
$.ajaxSetup({ cache: false });

Instagram get profile data

Is it possible to use jQuery or javascript to get the amount of followers a user has on instagram and then display that number inside a div element? I've found several PHP answers but I can't use PHP. Any help would be GREATLY appreciated.
Instagram supports RESTfull webservices. The solution you found for PHP can also be used in jquery. You just need to make jsonp calls to the server.
Hope this helps.
Trying to access Instagram API using jQuery
Use something similar. Use the resulting JSON data to print the followers number into a div.
$(document).ready(function(e) {
$('#fetch_followers').click(function(e) {
var $url = 'https://api.instagram.com/v1/users/{user-id}/?access_token={access-token}&count=100';
var $access_token = '{access-token}';
$.ajax({
method: "GET",
url: $url,
dataType: "jsonp",
jsonp : "callback",
success: function(data) {
$('#followers').append(data.counts.followed_by);
}
});
});
});
The code is rough, untested, but something along those lines will work.

Saving elements to database with $.ajax()

I'm trying to save dynamically created elements in my application.js file to the database. Would the code look something like this?:
$.ajax({
type: "POST",
data: { title: 'oembed.title', thumbnail_url: 'oembed.thumbnail_url'}
});
Is there anything I'm missing? Assume that oembed.title and oembed.thubnail_url hold the values I want to save, and that title and thumbnail are the database columns.
First problem I see is your data is strings. Get rid of the ' quotes
$.ajax({
type: "POST",
data: { title: oembed.title, thumbnail_url: oembed.thumbnail_url}
});
I'm going to assume you need to incorporate some user-supplied data into the new DB object - otherwise, it would be way easier to just create it from Rails.
If you're using entirely user-supplied data, you can use the serialize() method (use hidden fields for server-generated stuff):
jQuery.ajax({
url: '/path/to/whatever',
data: $('#MyForm').serialize(),
type: 'POST'
});
Or you could use the jQuery Form Plugin - it'll let you easily combine user-supplied data with server-generated data. For example:
$('#MyForm').ajaxForm({
//Hardcoded/server-generated stuff goes in here
//(and will be added to the data from the form inputs):
data: {title: oembed.title},
type: 'POST'
});
The ajaxForm() function will set up the form and its defaults, and sends an AJAX call when the user hits the submit button (see also: ajaxSubmit()).
On the Rails side, everything should work exactly the same as if the user had submitted the form normally (though you might want to just respond with a status code/message - no call for a redirect or page render).
Hope this helps!
PS: From your example, it looks like you might be able to use data: oembed in your AJAX calls. This will submit all oembed's attributes...

Categories

Resources