I am building a wordpress onboarding plugin.
I have an array that contains the content for each step of onboarding process, then a function that outputs each step in it's own container, with it's own class:
static function action_build_steps() {
$items = Onboarding_Dashboard::dashboard_onboarding_content();
$output = '';
foreach ($items as $step => $item) {
// Classes
$step_class = array();
$step_class[] = str_replace("-", "", $step);
$step_class[] = (isset($item['class']) ? $item['class'] : NULL);
$step_class = implode( ' ', $step_class );
echo '<div id="onboarding_steps_container" class="'.$step_class.' onboarding-'.Onboarding_Setup::onboarding_slug().'" style="left:'.$item['left'].'; top:'.$item['top'].'; width:'.$item['width'].';">';
echo '<div class="onboarding_steps">';
echo '<h2>'.$item['title'].'</h2>';
echo '<p>'.$item['content'].'</p>';
if(isset($item['css_arrow'])) {
echo '<div class="arrow_'.$item['css_arrow'].'"></div>';
}
echo '</div>';
echo '<div class="button_holder">';
if (($item['show-prev'])=='true') {
echo '<button id="prev" class="'.$step_class.'"><i class="fa fa-chevron-left"></i> PREV</button>';
}
if(($item['show-next'])=='true') {
echo '<button onboarding_stage="dashboard" id="next" class="'.$step_class.'">NEXT <i class="fa fa-chevron-right"></i></button>';
}
echo '</div>';
echo '</div>';
}
return $output;
}
This results in showing ALL steps at once, however, the plan is to show one step at a time, and when the user clicks "Next" or "Prev" they see the next or previous step.
I know I need to do this using jQuery but can't think how I will do it, mainly because I have a dynamic number of steps - it's not a set number.
So far, I have just hidden all steps using this script:
jQuery(function($) {
$('.onboarding-<?php echo Onboarding_Setup::onboarding_slug(); ?>').hide();
});
My outputted html looks a bit like this (I'll take out the content)
<div id="onboarding_steps_container" class="step1 onboarding-dashboard" style="left:50%; top:320px; width:500px;">
<div class="button_holder">
<button onboarding_stage="dashboard" id="prev" class="step1 ">NEXT <i class="fa fa-chevron-right"></i></button>
<button onboarding_stage="dashboard" id="next" class="step1 ">NEXT <i class="fa fa-chevron-right"></i></button>
</div>
</div>
<div id="onboarding_steps_container" class="step2 onboarding-dashboard" style="left:50%; top:320px; width:500px;">
<div class="button_holder">
<button onboarding_stage="dashboard" id="prev" class="step2 ">NEXT <i class="fa fa-chevron-right"></i></button>
<button onboarding_stage="dashboard" id="next" class="step2 ">NEXT <i class="fa fa-chevron-right"></i></button>
</div>
</div>
Where you see the word 'dashboard' in the script above, that is also dynamically added depending on the page the user is on. Also, the first step doesn't have a previous button, and the last step doesn't have a next button (they do in my code above, but just for demonstration)
How would I iterate through each step, 1 at a time, hideing the previous step, then showing the next?
UPDATE:
Here is what I've managed to come up with so far:
jQuery(function($) {
var index = 0;
$(function() {
$('.onboarding_steps_container:not(:first)').hide();
$('#next').click(function() {
if (($('.onboarding_steps_container').length - 1) >= index) {
$('.onboarding_steps_container:eq(' + index + ')').hide();
index++;
$('.onboarding_steps_container:eq(' + index + ')').show();
}
});
$('#prev').click(function() {
if (index != 0) {
$('.onboarding_steps_container:eq(' + index + ')').hide();
index--;
$('.onboarding_steps_container:eq(' + index + ')').show();
}
});
});
I think my issue is that each step has a different button (even though the ID is the same a referenced in my script)
});
However, this only works for the first button click, no others
Here's a JSFiddle showing my situation:
https://jsfiddle.net/fwysy2rr/
Make a function in javascript call onclick on next btn
var current_div =1;
function showDiv(var i){
//first hide all div having class onboarding-
//show next div
$(".step"+current_div+1 + "onboarding-dashboard");
//set current div
current_div +=1 ;
}
Related
I have written code to upload multiple files by cloning input field in jquery.
Here the logic is; if #file_1 field is empty, the $('#addBtn').on('click', function () is supposed to go in else part of if condition and display the relevant hidden <p> tag. If first field is left empty, the add button (add more button) should not clone the field. Instead it should show a message to user to upload file in the first available field first and the click add button to upload more file. Here Jquery show()/hide function is not working.
Please have a look on my code, I'll be much obliged. Thank you!
console.log('objection page here');
var Index = 1;
// START CODE FOR BASIC DATA TABLE
$(document).ready(function () {
$('#addBtn').on('click', function () {
var uploadFieldVal = $('#file_'+ Index).val();
console.log(uploadFieldVal);
if(uploadFieldVal !="")
{
Index++;
var uFile = $('#file_1').clone();
//var id = "btnAdd_" + Index;
var fileItem = "<input type='file' name='fileUpload[file][]'' id='file_" + Index + "'class='form-control'/> ; " +
"<p id='fileMsg_" + Index + "style='visibility: hidden; color: red'>Please attach file here first </p>;"
$('#fileDiv').append(fileItem);
}
else
{
console.log('fileMsg_'+Index);
$('#fileMsg_'+Index).show();
//$('#fileMsg_1).show(); //its also not working
}
});
});
<button class="btn btn-sm btn-primary float-right" id="addBtn" type="button"><i class="fa fa-plus"></i>
</button>
<div class="form-group" id="fileDiv">
<label for="file_1">File</label>
<input type="file" name="fileUpload[file][]" id="file_1" class="form-control"/>
<p id="fileMsg_1" style="visibility: hidden; color: red">Please attach file here first </p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
.show() does not work on CSS for visibility.
The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css( "display", "block" ), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.
$(function() {
console.log('objection page here');
var Index = 1;
$('#addBtn').on('click', function() {
var uploadFieldVal = $('#file_' + Index).val();
console.log(uploadFieldVal);
if (uploadFieldVal != "") {
Index++;
var uFile = $('#file_1').clone();
var fileItem = "<input type='file' name='fileUpload[file][]'' id='file_" + Index + "' class='form-control'/> ; ";
fileItem += "<p id='fileMsg_" + Index + "' style='visibility: hidden; color: red'>Please attach file here first </p>;"
$('#fileDiv').append(fileItem);
} else {
console.log('fileMsg_' + Index);
$('#fileMsg_' + Index).css("visibility", "visible");
}
});
});
<button class="btn btn-sm btn-primary float-right" id="addBtn" type="button"><i class="fa fa-plus"></i></button>
<div class="form-group" id="fileDiv">
<label for="file_1">File</label>
<input type="file" name="fileUpload[file][]" id="file_1" class="form-control" />
<p id="fileMsg_1" style="visibility: hidden; color: red">Please attach file here first </p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
You need to change visibility to visible to "show" it.
See More: https://api.jquery.com/show/
my end objective is to edit the json data and post back to the server if there is any update on the row
I am using the following code to get the json data to the table and add an edit button at the end column dynamically.
$.getJSON("echo_int_ip.php", function get_mem_update(json) {
my_json = json;
var tr;
var n=5;
for (var i = 0; i < n; i++) {
tr = $('<tr/>');
var mem_date = "<td style=\"min-width:90px\"><label id='mem_date'>" + my_json[i].id + "</label></td>";
tr.append(mem_date);
var mem_name = "<td class=\"contact_name\" style=\"min-width:150px\"><label id='mem_name'>" + my_json[i].fi_name + "</label></td>";
tr.append(mem_name);
var mem_reason = "<td><label id='mem_reason'>" + my_json[i].agent_ + "</label></td>";
tr.append(mem_reason);
var mem_comment = "<td style=\"max-width:150px\"><label id='mem_comment'>" + my_json[i].date + "</label></td>";
tr.append(mem_comment);
var mem_butn = "<td><input type=\"button\" id=\"btnedt\" value=\"Edit\" /></td>";
tr.append(mem_butn);
$('#table_member').append(tr);
}
});
according to the solution provided here, i have used the the following script to create an onclick event and get row data.
<script>
$(document).ready(function () {
$(document).on('click', '#btnedt', function() {
// alert($(this).closest('tr').find('.contact_name').text());
$("#newModal").modal("show");
});
});
</script>
this is a sample modal i am currently trying to load but it does not work. i have spent hours trying figure out a way, but ended up asking from you experts. Thank you in advance
<div class="modal fade" id="newModal" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Error</h4>
</div>
<div class="modal-body">
<p> </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
First of all you can't have many id's with the same value in a one html page. Cause it will result an error in the future while your doing a lot of code to it. Please change your btnedt to a class not an id. then change your script like this.
<script>
$(document).ready(function () {
$(document).on('click', '.btnedt', function() {
// alert($(this).closest('tr').find('.contact_name').text());
$("#newModal").modal("show");
});
});
</script>
if modal is already the issue. Then here some reason's why its not appearing
Remove the fade class in your modal.
The versions of your Javascript and Bootstrap does not match.
You forgot to include bootstrap.js library in the document
please check this out enter link description here
Use class instead of multiple IDs
Share your modal code
var mem_butn = "<td><input type=\"button\" class=\"btnedt\" value=\"Edit\" /></td>";
<script>
$(document).ready(function () {
$('body').on('click', '.btnedt', function() {
$("#newModal").modal("show");
});
});
</script>
I am trying to implement like button when after clicked it should increment the number of likes but i am trying to implement inside the php code but it is not working and i am not able to figure out what is the problem here?
<html>
<script>
$(".like_button button").on("click", function() {
var $count = $(this).parent().find('.count');
$count.html($count.html() * 1 + 1);
});
</script>
<?php
echo '<div class="like_button">
<button>Like</button>
<span class="count">0</span>
</div>';
?>
</html>
why this code is not working?
It's because you're selecting your button before it exists. Put $(".like_button button") after the button :
<?php
echo '<div class="like_button">
<button>Like</button>
<span class="count">0</span>
</div>';
?>
<script>
$(".like_button button").on("click", function() {
var $count = $(this).parent().find('.count');
$count.html($count.html() * 1 + 1);
});
</script>
Edit :
Following up with your comments, you haven't included jQuery but you're trying to use it ($). Then the solution is simple : include jQuery. And open your console.
Working snippet :
$(".like_button button").on("click", function() {
var $count = $(this).parent().find('.count');
$count.html($count.html() * 1 + 1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="like_button">
<button>Like</button>
<span class="count">0</span>
</div>
<div class="like_button">
<button>Like</button>
<span class="count">0</span>
</div>
My html code is like this :
<input type='file' multiple style="display: none;" id="upload-file" />
<div class="img-container">
<button type="submit" class="btn btn-primary" id="upload-add-product">
<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
<?php
for($i=0;$i<4; $i++) {
?>
<div class="img-container" id="box<?php echo $i ?>">
</div>
<?php
}
?>
My javascript code is like this :
$("#upload-add-product").click(function(){
$("#upload-file").click();
});
$(function () {
$(":file").change(function () {
var noOfFiles = this.files.length;
for(var i=0; i < noOfFiles; i++) {
var reader = new FileReader();
reader.onload = imageIsLoaded;
reader.readAsDataURL(this.files[i]);
}
});
});
function imageIsLoaded(e) {
var imgTmpl = '<img height="142" width="162" src='+e.target.result+'>';
var IsImgAdded=false;
$('.img-container').each(function(){
if($(this).find('img').length==0 && IsImgAdded==false){
$(this).append(imgTmpl);
IsImgAdded=true;
}
});
};
Demo and full code is like this : http://phpfiddle.org/main/code/q47z-p15c
I want to make like this :
When user select 2 image, plus icon will move to box number 3
When user selects 5 image, plus icon will disappear
I had try to move the plus icon, but I can't do it
How can I solve this problem?
You can add buttons to each container only the first button will be visible initially.
display the next button only after the image is added to the container
Update your Html as given below :
<?php for($i=0;$i<5; $i++) { ?>
<div class="img-container" id="box<?php echo $i ?>" data-status="0">
<button type="submit" class="btn btn-primary upload-add-product"<?php
if($i!=0) echo' style="display:none;"'; ?> >
<i class="glyphicon glyphicon-plus"></i>
</button>
</div>
<?php } ?>
Update the JS Function imageIsLoaded() after you set the IsImgAdded flag
$(this).attr('data-status',1)
$(this).find('button').hide()
$('.img-container').each(function(){
if( $(this).attr('data-status') != 1){
$(this).find('button').show();
return false;
}
})
PS : i changed the id : upload-add-product to class upload-add-product
You might need to tweak the code..
Put the plus icon in each and every one of picture frames. Create a function that has an input. That input would be sent from the html such as;
function change(input) {
var a = input;
if (a == 1)
{
document.getElementById(second picture's plus icon).style.display = "block";
document.getElementById(first picture's plus icon).style.display = "none";
}
}
and have if statements for every picture frame. If you up to 5 you disable all the plus icons.
Everytime you finish selecting a picture use function change(frame's index);
I have the following php code:
foreach ($facility_names as $name)
{
echo '<div class="row facility-name">';
echo '<button id="facilityNameLeft" class="btn btn-default btn-fill btn-menu" onclick="javascript:showDetails()">'.$name.'</button>';
echo '</div>';
}
<h1 id="facilityNameRight">Aquatics Centre</h1>
That should simply show a button inside a div for every $name (right?).
And this piece of javascript:
function showDetails() {
var facilityName = document.getElementById("facilityNameLeft").innerHTML;
document.getElementById("facilityNameRight").innerHTML = facilityName;
}
Now, I am new to javascript, but I can't figure out why the onclick only works once before I have to reload the page and why it only updates the innerHTML of the h1 tag with the value of the first $name (no matter which of the buttons I press).