I have a loop of data from my Lesson table.
When I click Specific lessons link it opens a Model.
I want to pass specific Lesson_id to Videos form but jquery repeats the first Index of data(first lesson's id).
I have used both an Id and Class but the results are the same.
here is my code.
<a class="btn btn-info add_video" data-id="<?php $lesson->id ?>" data-toggle="modal" data-target="#myModal">Add Video</a>
And this is Jquery Function
$(document).ready(function(){
$('#add_video_form').on('submit', function(event){
event.preventDefault();
var link = $('.add_video').attr('data-id');
alert(link);
});
});
Here, you are getting value of link with class name. May it get duplicate or used in you html structure more than one time.
I suggest you to check the length of add_video class with $('.add_video').length;
If It is returning more that 1, you have got the error. It needs to return 1. In above case. Also, you can try to check length with $('#add_video_form .add_video').length;
If it returns 1, then you can get the same value with var link = $('#add_video_form .add_video').data('id'); or you can use Id as well to retrieve the specific element.
Related
i should tell you my code is actually work, but a litle bit of annoying problem i cant solve by my self.
The problem is i only can retrieve the first record(id) from my data grid but i cant retrieve the second or other record id
example :
when i click my edit button of my first record of my data then i want to send the id to my jquery and show it in console and use it for selecting data form database (this is work)
but when i click edit of my second record of my data it wont send data to my Jquery and show it in console
This is my Grid code
<?php foreach($data['gakubu_data'] as $gakubu):?>
<li class="list-group-item d-flex justify-content-between align-items-center"><?= $gakubu['code_gakubu'];?> | <?= $gakubu['gakubu'];?>
編集
</li>
<?php endforeach;?>
</div>
</div>
this is my Jquery Script
$(function(){
$('#showUpdateModal').on('click',function(){
$('#formModalLabel').html('データ編集');
$('.modal-footer button[type=submit]').html('データ編集');
const id = $(this).data('code');
console.log(id);
});
});
Your loop creates multiple elements with the same id (id="showUpdateModal"). Id's must be unique within a document, so when you select it with: $('#showUpdateModal'), it will always return the first element with that id (since there shouldn't be any more elements with the same id).
You can solve it by using a class instead:
編集
(I removed the id and added showUpdateModal as a class instead)
Now you can register the event on the class instead:
$('.showUpdateModal').on('click', function() {
// Your current code
});
I am stuck in a problem and in need of support from you guys.
My problem is I want to pass a php variable(dynamically called through database in loop) to another div on the same page without page refresh
//This is a loop
<td><a class="linkright" href="#existingcase?case_id=<?php echo $row_mycases['case_id']; ?>"><?php echo $row_mycases['case_id']; ?></a></td>
//The div which should get the above php variable
<div class="tabright" id="existingcase">
<?php
$c_id = $_GET['case_id'];
echo $c_id;
?>
</div>
//the javascript code for calling divs on the same page
<script>
$(".linkright").click(function(){
$(".tabright").hide();
theDiv = $(this).attr("href");
$(theDiv).slideToggle();
});
</script>
It shows in the url like this index.php#existingcase?case_id=2012001 but never passes the case id to #existingcase. And also #existingcase div does not load either but without passing caseid value, #existingcase loads.
Any suggestions would be great.
I think you want to print clicked case_id in div without page load. To do this, you don't want to pass it using url. you can simply achieve it using javascript.
If your div id existingcase is just change your code like this below.
you are printing that same case_id as a text of anchor tag using $row_mycases['case_id'];. So, you can easily get that text using javascript and you can easily print it in your #existingcasediv.
<td><a class="linkright" href="#existingcase"><?php echo $row_mycases['case_id']; ?></a></td>
I don't know about your other scripts. in .linkright click function place this code like this
$(".linkright").click(function(){
$('#existingcase').text($(this).text()); //if your div id is existingcase it will print your case id.
});
try this code. And let me know the result.
SEE THIS FIDDLE DEMO
UPDATED:
To pass client side value to serverside without page reload, you can use jquery.post() method.
Place this PHP code at the top of your page.
<?php
if (isset($_POST['id'])) {
$caseid = $_POST['id'];
return print_r($caseid);
}
?>
$caseid will contain currently clicked case_id value. So, you can use this $caseid wherever you want in this page. If you click on the another case id, it will update with respect to currently clicked case_id
replace your js with below code,
$(".linkright").click(function () {
$(".tabright").hide();
theDiv = $(this).attr("href");
$(theDiv).slideToggle();
$.post("yourPHPFile.php", { //use your current php file name instead of "yourPHPFile.php"
id: $(this).text()
}, function (caseid) {
$('#existingcase').text(caseid);
});
});
id : $(this).text() means, get the current element .text() and assign it to $_POST variable name of id. It will post to yourPHPFile.php. And you can retrieve that value like $caseid = $_POST['id'];.
In function (caseid) {, caseid contains the value of $caseid. So, only in this code, I assigned $caseid = $_POST['id'];
By this you can directly print clicked case_id text to your #exixtingcase div.
Any values after # are not sent to the server. Since PHP is a server technology you php code will never see the values after #
<a class="linkright" href="#existingcase?case_id=<?php echo $row_mycases['case_id']; ?>">
try doing
<a class="linkright" href="existingcase?case_id=<?php echo $row_mycases['case_id']; ?>">
instead and your php code should fill the div.
In my understanding of your explanation I think you are making a mistake. You are trying to mix Javascript and PHP with out page refresh. This is not possible through your code as PHP is server side and only works on the server. You can't do href within the same page and expect PHP code inside this div to be executed. The PHP code will not be there. You can try "view source" in your browser and check it out.
I think the only way to solve your problem is to make AJAX call using Javascript, get the response and put wherever you want (without refreshing the page)
Hope this helps and excuse my English
EDIT : Here is a working example for making a simple AJAX call using Jquery.
Your table should be some thing like this:
<td>
<a class="linkright" href="#" data-id="<?php echo $row_mycases['case_id']; ?>"><?php echo $row_mycases['case_id']; ?></a>
</td>
You will notice I added "data-id" attribute. We will use this id in our AJAX call. Put this in your JS :
// Create Jquery ajax request
$("a.linkright").click( function() {
$.get("example.php", // Put your php page here
{ case_id : $(this).attr("data-id") }, // Get data, taken from the a tag
function(data) { // Call back function displays the response
$(".tabright").html("<p>" + data + "</p>");
}); // Get
}); // click event
}); // Document Ready
I tested the code and it is working. You will need to customize it to work for you. If all of this AJAX is new to you I suggest these links for you :
http://www.w3schools.com/ajax/default.ASP
http://learn.jquery.com/ajax/
I am working on a tag system:
1.you can select some tags from a list and display them in a tag container (the tag can be selected only once and the sum is limited to 10), and different tag has different colors.
2.you can delete some selected tags in the tag container
3.pass the information to the php and store in the database.
4. display the tags in another page and you can update the selected tag list in this page.
For now the first two steps has finished by javascript but I am quite confused how I can pass the selected information to the php and the database （the content and colors) so they can be displayed and updated in another page.Anyone can give me some suggestions? Thanks.
The link to the jsfiddle is http://jsfiddle.net/V9Euk/1015/
Here is the html:
<ul>
<li data-val="300"><span class="label label-morning">Morning</span></li>
<li data-val="301"><span class="label label-afternoon">Afternoon</span></li>
<li data-val="302"><span class="label label-evening">Evening</span></li>
</ul>
<div class="tagHandler">
<ul class="tagHandlerContainer" id="tag_handler">
</ul>
</div>
here is the javascript:
$(function(){
var tags = [];
function add_tag(that){
var tag = $(that).text();
if($.inArray(tag, tags)>=0|| tags.length >= 10) return;
tags.push(tag);
var singleValues = $(that).find('span').clone();
singleValues[0].innerHTML += "×";
$("#tag_handler").append(singleValues);/*display the selected tags in the tag_handler with × style*/
}
$("li").click(function(){
add_tag(this);
});/*add tags to the tag_container when click the li*/
$('#tag_handler').on('click', 'span', function(){
var tag = $(this).text();
var index = $.inArray(tag, tags);
tags.splice(index,1);
$(this).remove();
});/*remove the tag when click this tag in the tag_container*/
});
First of all the jsfiddle link doesn't work for me.
Now, the only way is to use http methods like POST/GET to pass the data from client to server. The implementation depends of what you like the most or better a friendly and easy to use interface, so my suggestions are:
You can create (dynamically or not) a form (with hidden fields for example) and update their values with JS and pass the data through a submit button which is an easy implementation.
An another implementation is to use Ajax if you take care of user selection and create the data structure dynamically.
In both cases, you should validate the correctness of the submitted data with php. Never trust the user or the "supposed" JavaScript restrictions.
I don't know if this is possible but what I'm trying to accomplish is that when ever I click this link
<a href=?name=$value1 id=$value1 class='txt_value'>Edit</a>
$value1 is a variable of my ID which i retrieved from my database.
my link could be
<a href=?name=$value1 id=$value1
<a href=?name=$value2 id=$value2
<a href=?name=$value3 id=$value3
etc..
my point is whenever I click any link above, a dialog box(jquery) would appear and insert
$value1 into a textbox inside the dialog box. Question is, is it possible that whenever I click a link all data that is associated with that ID (ex. first name, last name with ID #1 ) would also be called and displayed into that dialog box.
this is my initial code
$(".bordered a").click(function(){
$(".ok").val($(this).attr("id"));
$(".create-modal").dialog({
height: 200,
modal:true,
width:300
});
});
<div class="create-modal">
<input class="ok" type="text">
</div>
This is possible. The simplest way is to make a ajax request via jQuery to a PHP script which will return a json string. You can get a PHP array and print it via json_encode function to accomplish that. The JQuery function will take care of the json string and convert it into a JavaScript object.
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