Consider a table with 3 rows "ID" "Name" "phone-Number".
I am using PHP for connecting the UI with my SQL database.
the thing i want on my UI is ...
full IDs will b displayed on the page...
using jQuery Toggle function . When clicking on one of ID it should fetch information according to its value from data base and show Name and phone-Number down. Similarly by clicking the ID it should hide the content.
I have tried several ways but I am not getting it write. Can anyone help me out with this.
This is my PHP code.
http://snipsave.com/user/profile/karthikeyan#5351
I used jQuery for toggling but when I click on button it hides all other data and vice versa.
remove that <button id="hide">Hide</button>
and use...
$(document).ready(function(){
$("#show").click(function(e) {
e.preventDefault();
var i = $(this).next("i:first");
i.toggle();
$(this).text( ( i.is(":visible") ) ? "Hide" : "Show" );
});
});
and i suggest you to use class instead of id
Related
My problem is that i have 2 dropdowns that get its content from my DB, a simple SELECT * with the category and then select a item from that category.
First dropdown : "dropdown_type" is the category.
Second dropdown : "dropdown_abo" is the item.
At the second dropdown, i am using a JQuery pluging that makes it possible to search inside the dropdown, to get the item faster then scrolling (theres gonna be a lot of items in it). You can see the plugin here
When you select a item from the second dropdown, a div(abo_info) below shall show all the info of the selected item.
My problem is that I'm stuck, and don't know how to proceed. How can i make it so, when i select a category, and then an item i get the content from that item shown in the div below?
I'm using PHP, JQuery and Mysql_*(to DB connect, know about PDO but im not that good at it).
Can i please get some help here, or some examples on how it can be done?
I have made a JSfiddle so you can see the complete code
You seem to be headed the correct way and doing a good job of it.
Please proceed further by using the following steps as a guideline,
Using jQuery.ajax() or jQuery.post() you can basically send a request to a PHP file.
In the PHP file you can connect to your DB using either PDO or normal mySQL connectors and return your required data back to the AJAX call.
The returned data can be rendered and displayed as required at the HTML sections.
Please use these following references that can give you a better idea code wise:
Beginner’s Guide to Ajax Development with PHP
jQuery Ajax POST example with PHP
as #WisdmLabs mentioned, you are on the right track...
The steps to continue shouls be:
Add a JS event once both dropboxes were selected (using onchange() or a submit button)
The event will fire an AJAX request for a PHP file with the POST
data of the item you want to get the data for.
On the PHP file you will run your SQL query and send back the information needed- preferable as in json.
On the JS AJAX function you will get the Json object and inserted neede info into the page DOM
JS Code
$(".dropboxClass").change(function(){ // you can use a button instead or any other event type
// here you can first check that bothdropboxes were selected
// now get the values of the dropboxes
drop1 = $("#dropbox1").val();
drop2 = $("#dropbox2").val();
// run the AJAX request for the PHP file
var request = $.ajax({
url: 'test2.php',
dataType: "json" ,
method: "POST",
data: { d1: drop1, d2:drop2 }
});
request.done(function(itemData){
// here you will get the Json object , get the data you need and insert into the DOM
console.log('Status:' + itemData['status']);
console.log('Name:' + itemData['name']);
alert('success');
});
request.fail(function(){
// AJAX call failed - do something.....
});
});
PHP Script
// connect to your DB and get the data you need into an array
$DB_data = array(
"status"=>"code",
"name"=>"item Name",
"desc"=>"Item Description"
);
echo json_encode($DB_data);
I'm quite new to PHP and I'm dealing with a problem I have no idea how to solve. I'm generating a table of users (name, username, e-mail) from a MySQL database. There is an edit link in each row. This links displays a pop-up DIV (made using jQuery) that contains three form fields (name, username, e-mail) that can be used to edit (update) the particular row.
I would like to pre-load the current values from the database into these form fields to make it more convenient to edit them.
The problem is that the DIV is displayed without refreshing the web page, meaning that I'm unable to pass any parameters from the edit link and therefore I cannot tell the server which values to pre-load.
Is there any solution to this?
Thanks!
You can pass them using this way:
Note : when u generate the values(name,username,email) in Server (using PHP)..do it as follows :
<a class='editBtn' data-x="the username info" data-y="the email info" data-z="name">Edit</a>
then at Client side catch them using on click events:
jQuery('.editBtn').each(function(i,v){
jQuery(v).click(function(eve){
eve.preventDefault();
eve.stopPropagation();
var username= jQuery(v).attr('data-x');
var email= jQuery(v).attr('data-y');
var name= jQuery(v).attr('data-z');
/*
display ur Modal Box here
Happy Coding :) ,
*/
});
});
try this:
$(your var in JS) = <?PHP echo $(your rowname in the prepaired statement)['(your ID tablevariable)'];?>
that could work but i hadn't seen the code so, this is the only thing i could give tou to try
if you want to refresh the data in realtime about your html with your new values, you must use AJAX. JQuery give us a simple api about this: https://api.jquery.com/jQuery.ajax/
I like to use a hidden <iframe> at the bottom of all my pages. I can load a php script into that, which than can be used to update the parent frame by using javascript.
<iframe name="hidden" id="hidden" style="display:none"></iframe>
To call the script, just use a link or button to call it.
Click to load script!
Once you get the data from mysql, use javascript to change the variables.
<script language="javascript">
parent.document.getElementById('name').value = '<?PHP= $sqlResults['name']; ?>';
parent.document.getElementById('username').value = '<?PHP= $sqlResults['username']; ?>';
parent.document.getElementById('email').value = '<?PHP= $sqlResults['email']; ?>';
</script>
I am new to PHP and am trying to figure out how to code some specific functionality. I have a product page that shows a photo and has two dropdown menus, one for size and one for color. What I would like to do is when the page first loads I set a variable that has the default product SKU. When the menus change I want to change the variable to the combined values of the two menu items selected. As the variable changes I want to reflect this in the photo and in a hidden form value (for eventual submission to a cart).
So when the page loads it shows picture A with the associated values in the size and color dropdowns. Then when either of the dropdowns change the photo dynamically changes to reflect it (while also updating the hidden form value).
Any suggestions would be much appreciated.
JavaScript, or a JS library like jQuery, is what you need here.
For jQuery (preferred, way easier):
var $select = $('#Dropdown'),
$img = $('#Picture');
$select.on('change',function(){
$img.attr('src',$(this).val());
});
For JavaScript:
var dropdown = document.getElementById('Dropdown'),
img = document.getElementById('Picture');
dropdown.addEventListenter('change',function(){
img.src = this.value;
});
Not tested, but should work.
Edit: when using the JavaScript solution, make sure the window is loaded first (it won't work if the elements dont exist yet).
window.onload = function(){
// do your magic here
}
Firstly, PHP is a server side language which effectively means, anything that it generates must be processed by the server and then sent back to the browser. Therefore in this particular case, you need to use a client side language such as Javascript, or to make the code easier, a library such as jQuery.
To learn more about jQuery, see here:
http://jquery.com/
In very generalised terms (as you have not posted any code), here is an example of changing
an image using jQuery:
// Select the dropdown from the DOM
var dropdown = $('#dropdown_id');
// Select the image from the DOM
var image = $('#image');
// Set the onchange event
// This will be fired when the select value is changed
dropdown.on('change',function(){
// Get the value of the selected option
var value = $(this).val();
// Change the source of the image
image.attr('src',value);
});
This is my first attempt at jQuery and I'm using a basic tutorial I found here: http://papermashup.com/simple-jquery-showhide-div/#
This is my current code and how the jQuery works: http://jsfiddle.net/mZQsu/
As you can see, when you click the '+/-' it opens all 4 of the tables/DIVs.
How can I modify this code to open just the relevant secondary table/div according to the original table?
(Please note the secondary tables are generated dynamically from PHP and SQL data)
Thanks.
P.S all my code is here http://jsfiddle.net/mZQsu/ instead of clogging up this question page :)
DEMO fiddle
$('.toggler').click(function() { // had to differentiate the main togglers with a new class
var ind = $(this).parents('tr').index()-1; // could change
$(".slidingDiv").eq(ind).slideToggle();
});
$('.show_hide').click(function() { // this are the 'togglers' inside the big menus
$(this).parents(".slidingDiv").slideToggle();
});
The best solution would be if you tag each of your div's with an id. E.g.
<div class="slidingDiv" id="ip_127_0_0_1">
and then modify the equivalent links to do
$("#ip_127_0_0_1").slideToggle();
so just the associated div gets expanded.
See my updated fiddle: http://jsfiddle.net/mZQsu/1/
You can use the index of the row, and toggle only the matching row of the other table using jQuery index and eq
See the relivant docs here:
jQuery index
jQuery eq
This should work:
$('.show_hide').click(function() {
$(this).parents(".slidingDiv").slideToggle();
});
Since the slidingDiv class is a direct parent of the show_hide link, I could have used "parent" rather than "parents". The latter provides more flexibility because it traverses all ancestors looking for the class.
Here is a modified code - http://jsfiddle.net/mZQsu/3/
I have added show-hide1, show-hide2, show-hide3, show-hide4.
And clicking on it opens respectively slidingDiv1, slidingDiv2, slidingDiv3, slidingDiv4.
When you are binding to an event: You can always grab that event target and reference it.
$('.show_hide').click(function(e) {
$(e.target).parent("div.slidingDiv").slideToggle();
});
.parent() is a good place to start, but .closest() also might work. That being said, this is the preferred way to go about it.
On a side note if you ever want to do the opposite you could use .not(e.target) and all the other elements except for the one your click will be called.
Since your html is PHP-generated, it should not be a problem to include unique IDs for both +- links and sliding divs, for example:
a href="#" class="show_hide" id="show_hide2"
And
div class="slidingDiv" id="slidingDiv2"
Then in your click function you get the index of the div that you want to open:
$(.show_hide).click(function(){
var $str = $(this).attr('id');
var $index = $str.charAt( $str.length-1 );
});
Now you can use index to open the div:
var divName = "#slidingDiv" + $index;
$(divName).slideToggle();
I am trying to pass an id value to a php script with jquery.
So, I was trying to create a link:
Superman
and when this link is clicked, I would like jquery to grab the id value and place it in the php script or php grabs the id? im not sure the best way.
I want the id value so it can be placed in a mysql query like this:
SELECT * FROM hero_db WHERE category="superman"
So, i get the id and place it in for the category as seen above.
I have trying many things, but am unfamiliar with jquery but trying to learn as much as I can.
Thank you for any help on this.
It sounds like you want to load HTML when the link is clicked. If so you need markup something like this:
Superman
<div id="superman_data">
</div>
with Javascript:
$("a.loaddata").click(function() {
$("#" + this.id + "_data").load('/loaddata.php', {id: this.id});
return false;
});
What this does is binds an event listener to all anchors with a class of "loaddata". When it's clicked on, the ID is passed to loaddata.php. That script should return HTML. It is loaded into the named div.
There are various jQuery Ajax methods. Which one you use depends on what you want to achieve.
$.post('http://PHP_SCRIPT_URL', {id: $('a.yourlik').attr('id')});