Develop Reference

HTML table- Create pop up box for each <td> and display xml data

I am working on a project and I am trying to create a web application. So far, my code is like this example. I press the button and a table appears. As you can see in the example, this table contains data of an XML file. THE PROBLEM: I want by clicking each 'td', a popup box to appear. This box will contain different data for each 'td', from the same XML file. Specifically, it will contain an image and some text that refers to the 'td'. Actually, I want something like this. I tried adding this code to my code and I created a popup button in every 'td'. But clicking these buttons, nothing happens. It would be nice if you share your knowledge with me!

i think its help full for your logic.
$('td').click(function () {
$("#MyModal").modal("show");
});

you can assign a class to td , and by click of that id with jquery modle called by
$("#MyModal").modal("show");
checkout this example
P.S. i have used bootstrap model for popup, but any other can be used with minimum change in code.

Information shows in a div while pressing button from another div without loading page by jQuery & PHP

At first I apologize for not having the code of my desire & I've no idea how I'll ask the exact question by focusing any specific keywords.
However, I want to show my product information in an area(div) whenever I click a button in another area(div). & The work should be done without refreshing pages.
Again I apologize for that I've not the code. But I can provide an
image and hope you'll understand my desire
Example: Whenever I click on angry burger, the price and quantity should be shown in the right(California Fried Chicken) area. And multiple selecting product should also work one by one. After that I should be able to submit product information bu pressing submit button where a PHP operation should be done.
I want to do the whole task by jQuery & PHP
Thanks

You can achieve this by setting up click listeners in your javascript/jquery code and assign them to the ids of your pictures or fields. For example you can assign an id to an tag like below;
<p id="div">Hello world</p>
And then set up a click event in your jquery code to execute a function whenever that tag is clicked
$( "#div" ).bind( "click", function() {
var tag = $(this).html(); //get the value of the tag
alert(tag);//this will display Hello world
});
You can do this for any tag and retrieve its value or contents or anything and carry out an activity like changing the display of another element as below
$("#change").append(tag) //this will change the display of the tag with id change
Please ask if you have any questions

On link click new image with text appears

I am trying to create a page where when a link is clicked the corresponding image appears with a clickable link below it that will say "Click to view Gallery"
So far I have the code written to change the image using an 'onclick' command, but I am unsure how to add the text below the image.
Here is my website with the current code now.
JS:
function changeImage(element) {
document.getElementById('imageReplace').src = element;
}
HTML:
1025 W 3rd
959 - 965 Schrock Rd
7099 Huntley Rd
So the text that reads Click to view Gallery of Property is what I need to be added beneath the image. That link needs to be a unique link that leads to the corresponding property based on the 'onclick' link that the user selects in the left column.
So for example, the user selects 1025 W 3rd in the left column and it's corrisponding image shows up with an option for the user to view a gallery of that property alone (which will be a separate web page)
I am not sure what my next steps should be. Is it better to change the links to and 'onclick change div' type of command?
Thank you so much for your help.
-Kas
EDIT
I added my current code so any reader can better understand what I currently have.

You need to add a link bellow your image and add it an id.
<div id="divright">
<img src="http://new.oxrealty.com/wp/wp-content/uploads/2015/08/CommercialPropertiesDef.png" alt="Images" id="imageReplace">
Click to view Gallery
</div>
Then change your function changeImage to accept an additional argument for a link, and it should also change the href attribute of the link.
function changeImage(image, link) {
document.getElementById('imageReplace').src = image;
document.getElementById('linkReplace').href = link;
}
Then you change the links to call the updated function with the link
onclick="changeImage('CUSTOM_IMAGE', 'CUSTOM_LINK');"
Example jsfiddle

You're fine with your code as you are. To change the value of a div with an id of "text" for example, you would just do in your JS:
document.getElementById('text').value = 'Type the new value here';
Hope this is what you're looking for!

Change displayed price based on a button click

Really hope someone can help with this.
I am building a site and need to be able to have people display a price based on their preferred option.
To see what I mean, please look at this link where it is done perfectly: https://swiftype.com/pricing
...when people select monthly or yearly, the displayed price in the chart beneath changes dynamically and instantly (without page reload).
This is what I need (except with three option to choose, not one). I suspect it is jquery with dynamic divs, but I cannot make it happen.
If anyone can help, I would be so so grateful.
Best wishes, and thanks for your time. AB.

// make the billing period selected tabs work
$(function() {
var $pricingTable = $('#pricing-table');
$('#billing-picker .tab').click(function() {
var $selectedTab = $(this);
var selectedPeriod = $selectedTab.data('period-length');
$('.tab').removeClass('selected');
$selectedTab.addClass('selected');
$pricingTable.removeClass().addClass(selectedPeriod);
})
});
This is the SCRIPT which does the selection of button ..

The link that you provide, is using a monthly or yearly class to hide and show the divs that already contains the prices, without any Ajax call. Try to inspect the elements with firebug or other console and you will see by yourself how is working.

You can either have an empty div which, on button click loads ajax content dynamically. If it's always going to be the same content, than I would suggest just have three divs and simply hiding the ones that are not being shown.
Have a look into the Jquery 'hide' method.
Hope that helps

drop down list with multiple check box levels in JQuery

I need to create a drop down list that contain multiple checkboxes as well as multiple levels. The user should be able to select an option and/or dig deeper to select sub categorical. See the example from the code below.
So far, I was able to create the drop down list and the check boxes. I am having problems getting the id of the button selected and opening the corresponding div
http://jsfiddle.net/Ammarcola/e5CZb/
How can I get the button working?
edit: I will explain my approach to make the code easier to read.
I am trying to create multiple with each of them containing a list of check boxes. Whenever a button is clicked, all the s should .hide() and only the requested would .show(). I am not worried about how the main would be reached again, but all the should reset once the drop down list is collapsed. Hope that helps.

I have given the corresponding id of the buttons to the Div's that have to be manipulated.. Then finding the button that was clicked and constructing the div that has to be opened..
Check this FIDDLE and let me know if this is what you were looking for ..
Or is it a different requirement..
$("button").click(function() {
$("p").toggle();
var btnID = $(this).attr('id');
var coresDiv = $('div#' + btnID);
coresDiv.toggle();
});