The list of albums displayed, but I want to be able to click on an album in the table and it shows a list of tracks on the same page. When I do this the url says "http://localhost/cm0665-assignment/#/album/undefined".
I think it has something to do with the 'albumcode'. But not sure what to do.
javascript
$scope.selectedalbum = {};
$scope.selectAlbum = function ($event, album){
$scope.selectedAlbum = album;
$location.path('/album/' + album.albumCode);
};
html
<table>
<tr data-ng-repeat="album in albums"
data-ng-click="selectAlbum($event, album)"
data-ng-class="{'selected':selectedAlbum.albumCode===album.album_id}"
style="cursor: pointer;">
<td>{{album.album_id}}</td><td>{{album.Name}}</td>
</tr>
</table>
Related
I am building a children web game using PHP and MySQLi and I am now making a page having pictures and audios sorted in a table having the picture displayed on the left side and the audio on the right as so:
what I want to do is, I want to add a button where user can choose another picture and audio and after selected, it will automatically add the media in a new row like so: I have found a way to add new rows but it will dissapear when I reload the page. Code
<body>
<button onclick="myFunction()">Add new row</button>
<table border="1" align="center" id="table1">
<tr>
<td><img src="images/croc.png" width="200"></td>
<td><audio controls src="music/crocodile.mp3"></audio>
</tr>
<tr>
<td><img src="images/caution.png" width="200"></td>
<td><audio controls src="music/crocodile.mp3"></audio>
</tr>
</table>
<script>
function myFunction() {
var table = document.getElementById("table1");
var row = table.insertRow(-1);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = "NEW CELL1";
cell2.innerHTML = "NEW CELL2";
}
</script>
</body>
</html>
May I know how to browse for file and automatically, permanently add user's choice of media into new row of the table in the webpage?
I'm building a website where the admin can make settings for the website. I would like the admin settings page to have a similar "feel" as the rest of the website, which has some nice looking jQuery features.
On the admin site there's a hidden div, which is shown when one of six links has been clicked. I'd like the content of the hidden div to change content before showing itself. I'm not sure how to do this. I could have a div box for every link on the page. But this becomes pretty cumbersome since I'd need to repeat my css and jquery for every link. I imagine that this, somehow, can be done with some javascript/jquery code that determines which link that was click and then decides which php function to call inside the hidden div. Then the php could "echo" out the content of the div, which then could be shown.
How could one do this?
My HTML/jQuery code is as follows:
--- The html links ---
<table id="settings">
<tr>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
<td>
<img src="images/folder.gif" alt="" height="100"/>
</td>
----- The Hidden div -----
<div id="dashboard_box">
<div class="dashboard_inside">
<form action="#" method="post">
<p style="font-size:20px; font-weight: bold;">Change color</p>
</br>
<fieldset>
<? load_content1();?>
</fieldset>
</form>
</div>
</div>
---- jquery code (working)----
var mouse_is_inside = false;
$(document).ready(function() {
$(".action").click(function() {
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
return false;
});
$("#dashboard_box").hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").click(function(){
if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});
});
You probably want to use ajax to load the content from the server. Take a look at jquery's .load() method: http://api.jquery.com/load/
You could include a data attribute per link:
<a class="action" data-content="content.php?method=load_content1"></a>
<a class="action" data-content="content.php?method=load_content2"></a>
js would look something like this:
$(".action").on('click', function() {
$("#dashboard_box fieldset").load($(this).data('content'), function() {
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
}
return false;
});
Then, in your content.php file you could check the method parameter in the url to determine what content to return.
My php is a little rusty, but something like this:
<?
call_user_func($_GET['method']); // i'm not sure how safe this is. you may want to be more explicit
?>
You can just add data attribute in each of your link's
<a href="#" data-url="content1.php" ..
Then on click of any of the a you can get the php to be called.
$('a').on('click',function(){
var phpFunctionToCall = $(this).data('url');
});
You probably need to make ajax call to load content into your fieldset As this <? load_content1();?> run's on server and javascript have no control over it.
Thanks for all the help. this is what I ended up doing.
--- HTML ---
<a class="action" data-content="content.php?method=load_content2"></a>
---Jquery---
var mouse_is_inside = false;
$(document).ready(function() {
$(".action").click(function() {
var phpFunctionToCall = $(this).data('content');
$('#indhold').load(phpFunctionToCall);
var loginBox = $("#dashboard_box");
if (loginBox.is(":visible"))
loginBox.fadeOut("fast");
else
loginBox.fadeIn("fast");
return false;
});
$("#dashboard_box").hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").click(function(){
if(! mouse_is_inside) $("#dashboard_box").fadeOut("fast");
});
});
--- PHP (shortened)---
function load_settings_panel($settingOnRequest) {
return $settingOnRequest;
}
$result = call_user_func('load_settings_panel', $_GET['method']);
echo($result);
I know very well that this question is ask many time but some how my problem is different and i didn't find the solution.
Now comes on issue.
I have a an image,so whenever i click on to the image the pop up window is open and show the data.now i want to make this dynamic and wants that the data should be come according to the id.
here is my image code.:
<div id='contact-form'>
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='<?php echo base_url();?>assets/images/img/contact/loading.gif' alt='' />
</div>
And on its click the ajax is called from js file here is the code of that js file:
//here the provider is controller and show_coupon_pre is a function which call the view having the data.
$.get("provider/show_coupon_pre", function(data){
// create a modal dialog with the data
$(data).modal({
closeHTML: "<a href='#' title='Close' class='modal-close'>x</a>",
position: ["15%",],
overlayId: 'contact-overlay',
containerId: 'contact-container',
onOpen: contact.open,
onShow: contact.show,
onClose: contact.close
});
});
I have a table having no of records and each record having this type of image.where the user can click and get the preview in pop window.
But i want to show the data in pop up according to the row like for id=1 it should be show the data of id==1 and so on. now can you you guys please help me how can i pass this id to the js file by which i can fetch the required data.
I am working in codeignitor.
Simplest solution
<table>
<tr>
<td><img class="banner" src="/image1.png" post_id="1"></td>
<td>some other data 1</td>
</tr>
<tr>
<td>
<td><img class="banner" src="/image1.png" post_id="2"></td>
<td>some other data 2</td>
</tr>
</table>
Javascript:
$('.banner').click(function() {
post_id = $(this).attr("post_id");
// send your ajax with post_id
} );
If you have the ID in php when outputting the image, I would do this:
<script>
var randomId = <?php echo '"' . $phpId . '"'; ?>
</script>
When you open the application can you please click on the "Add Question" twice so it adds 2 table rows.
Now you will see in the application that above the horizontal line there is a textarea and a plus button, and below the horizontal line shows 2 table rows, both rows displaying its own textarea and plus button.
Now my question is that I want these 2 outcomes to happen but I do need help from somebody who is good at using Jquery/Javascript in order to solve this situation:
Situation 1. If the user clicks on the plus button ABOVE the horizontal line, then it displays a modal window which contains a search bar, Please type in search bar "AAA". You will now see a list of results. Now what I want is that if the user selects a row by clicking on the "Add" button, then I want the "QuestionContnet" within that row to be displayed in the textarea above the horizontal line. At the moment the Add button just closes the modal window but doesn't add anything into the textarea.
Situation 2: This deals with the user clicking on a plus button within one of the table rows BELOW the horizontal line. I want the same thing to happen except the "QuestionContent" added is displayed in the textarea within the same row the user has clicked the plus button, no where else.
How can both situations be solved so that it adds the QuestionContent into the correct textareas depending on which plus button is clicked? I am using an Iframe to display the content within the modal window.
UPDATE:
If you look at the application, it is now displaying "[Object] [object]" in textaea when I click "Add" button. Not the "Question".
Below is the code for the application:
<head>
<script type="text/javascript">
var plusbutton_clicked;
function insertQuestion(form) {
var $tbody = $('#qandatbl > tbody');
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $plusrow = $("<td class='plusrow'></td>");
var $question = $("<td class='question'></td>");
$('.questionTextArea').each( function() {
var $this = $(this);
var $questionText = $("<textarea class='textAreaQuestion'></textarea>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());
$question.append($questionText);
});
$('.plusimage').each( function() {
var $this = $(this);
var $plusimagerow = $("<a onclick='return plusbutton();'><img src='Images/plussign.jpg' width='30' height='30' alt='Look Up Previous Question' class='imageplus'/></a>").attr('name',$this.attr('name')+"[]")
.attr('value',$this.val());
$plusrow.append($plusimagerow);
});
$tr.append($plusrow);
$tr.append($question);
$tbody.append($tr);
form.questionText.value = "";
$('.questionTextArea').val('');
}
function plusbutton() {
// Display an external page using an iframe
var src = "previousquestions.php";
$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
return false;
}
function closewindow() {
$.modal.close();
return false;
}
$('.plusimage').live('click', function() {
plusbutton($(this));
});
function plusbutton(plus_id) {
// Set global info
plusbutton_clicked = plus_id;
// Display an external page using an iframe
var src = "previousquestions.php";
$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
return false;
}
function addwindow(questionText) {
if(window.console) console.log();
var txt = $(this).val(questionText);
if($(plusbutton_clicked).attr('id')=='mainPlusbutton') {
$('#mainTextarea').val(txt);
} else {
$(plusbutton_clicked).parent('td').next('td.question').find('textarea.textAreaQuestion').val(txt);
}
$.modal.close();
return false;
}
</script>
</head>
<body>
<form id="QandA" action="<?php echo htmlentities($action); ?>" method="post">
<div id="detailsBlock">
<table id="question">
<tr>
<td rowspan="3">Question:</td>
<td rowspan="3">
<textarea class="questionTextArea" id="mainTextarea" rows="5" cols="40" name="questionText"></textarea>
</td>
</tr>
</table>
<table id="plus" align="center">
<tr>
<th>
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage" id="mainPlusbutton" name="plusbuttonrow"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
</th>
</tr>
</table>
<table id="questionBtn" align="center">
<tr>
<th>
<input id="addQuestionBtn" name="addQuestion" type="button" value="Add Question" onClick="insertQuestion(this.form)" />
</th>
</tr>
</table>
</div>
<hr/>
<div id="details">
<table id="qandatbl" align="center">
<thead>
<tr>
<th class="plusrow"></th>
<th class="question">Question</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
</body>
The details stored in the modal window comes from a seperate script known as "previousquestions.php", Below is the code where it shows the result of the "QuestionContent" field only displayed and it's "Add" button after the user has compiled a search:
<?php
$output = "";
while ($questionrow = mysql_fetch_assoc($questionresult)) {
$output .= "
<table>
<tr>
<td class='addtd'><button type='button' class='add' onclick='parent.addwindow();'>Add</button></td>
</tr>";
}
$output .= " </table>";
echo $output;
?>
Thank you
Application here
The first issue is this ->
<button id="add">
You cannot reuse an ID over and over, or, the page will iterate to the last element with that ID and NEVER run anything on any previous elements.
Quick fix:
<button class="add">
Simple enough.
We need to get the question text, from the first column, there are so many methods to do this with jQuery selectors it's mind blowing.
Situation 1
Let's take a peek at one option ->
$(document).on('click', '.add', function(){
//now that we've declared the click function, let's jump up to our parent element, and grab the text in the first cell.
var theQuestion = $("td:first-child", $(this).parent()).text();
//Now that we've figured out how to traverse the DOM to get the data we want, we need to move that data elsewhere.
$('.questionTextArea').val(firstCell);
});
Simple enough, right? That should solve the first problem you had.
Note: Textareas use value to set the data, whereas other elements will use .text()
Situation 2
Alright, now we need to figure out how to add a unique identifier to the "+" row when we click, and check for that "unique identifier" when appending the data, let's do it.
You have a <td> with a class of plusrow, sounds good, let's make a click function out of it, and give it a cool new class to reference.
$(document).on('click', '.plusrow', function(){
//adding a unique class for the purpose of the click.
$(this).addClass('activePlusRow');
});
So now the "+" we clicked has a new class -- activePlusRow, let's go back to our initial click handler for the add button, and give it some new conditional statements.
$(document).on('click', '.add', function(){
//lets get our Question Text...
var theQuestion = $("td:first-child", $(this).parent()).text();
//the row is present, let's then make sure that the proper cell gets your data.
if($('.activePlusRow').length > 0){
$('.activePlusRow').next('.textAreaQuestion').val(theQuestion);
$('.activePlusRow').removeClass('activePlusRow');
}
});
Alright, as you can see of the above, we test to see if the activePlusRow class exists, if it does, then we iterate to the next textarea with a class of textAreaQuestion and change the value of it, to theQuestion from the .add button we clicked.
Let me know if you've any questions.
I think best way to target chosen question to specified textarea is to parameterise your plusbutton function:
function plusbutton(plus_id) {
// Set global info
plusbutton_clicked = plus_id;
// Display an external page using an iframe
var src = "previousquestions.php";
$.modal('<iframe src="' + src + '" style="border:0;width:100%;height:100%;">');
return false;
}
Of course you have to declare global var plusbutton_clicked; before insertQuestion function so other functions could change/use this information. You have to call this function with unique parameter for each plusbutton (you generate it dynamically, so this is up to you how you want to do it)
Then you can simply use it in your $(document).on('click', '.add', function(){}); - when user clicks 'add' button you have your plusbutton id so you can navigate with jQuery to corresponding textarea and place text there.
I'm thinking next() isn't the right function, since it only searches for the immediately following sibling... Try this:
$(document).on('click', '.add', function(){
console.log("clicked");
//lets get our Question Text...
var theQuestion = $("td:first-child", $(this).parent()).text();
//the row is present, let's then make sure that the proper cell gets oru data.
if($('.activePlusRow').length > 0){
$('.activePlusRow').next('.question').find('textarea.textAreaQuestion').val(theQuestion);
$('.activePlusRow').removeClass('activePlusRow');
}
$.modal.close();
return true;
});
I have a list of products from a particular supplier being displayed in a <table> populated with data from my mysql database.
Within this table, each product has a link that, when clicked, should show the product details in a ui-dialog, <div id = "detalhe_produto"></div>. The dialog does open, however, it only works only for the first item in the list. The other links of the following lines do not open the dialog.
Can anyone help me?
Here's the script I am using to open the ui-dialog:
<script type="text/javascript">
$(function(){
$('detalhe_produto').click(function(){
var selectedVal=$("#detalhe_produto").val();
var url="produto_detalhe.php?codigo="+selectedVal;
var dialog = $("#detalhe_produto");
if ($("#detalhe_produto").length == 0) {
dialog = $('<div id="detalhe_produto" style="display:hidden"></div>').appendTo('body');
}
dialog.load(
url,
{},
function (responseText, textStatus, XMLHttpRequest) {
dialog.dialog({
close: function (event, ui) {
dialog.remove();
},
modal: true,
width: 460
});
}
);
});
});
</script>
and then the code table:
<table border="0" cellpadding="0" cellspacing="3">
<?php do { ?>
<tr>
<td align="left" valign="top" class="lista_produto"><?php echo $row_lista_produtos['codigo']; ?></td>
<td width="15"></td>
</tr>
<?php } while ($row_lista_produtos = mysql_fetch_assoc($lista_produtos)); ?>
</table>
I have tried to change the href="#" to href="javascript: void (0)"
and the result was the same.
Suggestions?
If you have many distinct dialogs that can be clicked open, you need to use a class selector, . instead of an ID selector, #. You may have also forgotten the #.
So instead of this:
var dialog = $("#detalhe_produto");
do this:
var dialog = $(".detalhe_produto");
**Please see this jsfiddle: http://jsfiddle.net/trpeters1/uFDdb/2/
It has a complete working demonstration of the jqueryUI dialog for multiple dialogs specific to your use case. Meaning, the dialog shows a value specific to which link was clicked.
you missed a # in $('detalhe_produto').click(function(){