I currently have a div which when clicked posts data to another page and reloads the div. I would like to add a back button (#backref) to the new div to take me back to the previous div. I have found several posts on this whereby you add display:none; to the div you want to browse to, but obviously this is my initial div so I cannot use that css. Any suggestions on how to get round this would be appreciated!
Code I am using to achieve this:
$(document).ready(function () {
$('.clickthrough2').click(function () {
// get car id
carId = $(this).attr('id'); // get the car id to access each class element under the car div container
$.post('referrer-ajax2.php', {
clickthrough: $('#car-'+carId+' .clickthrough').val(),
ref_date_from2: $('#car-'+carId+' .ref_date_from2').val(),
ref_date_to2: $('#car-'+carId+' .ref_date_to2').val()
},
function (data) {
$('#car1').html(data);
});
});
});
index.php:
<div id="car1" class="declined3 statdivhalf2">
<h4>Select Car</h4>
<div class="statgrid">
<?php
$result=$ mysqli->query($sql);
if($result->num_rows === 0) { echo 'No Cars in selected time period.'; }
else { while ($row = $result->fetch_array()) {
?>
<div id="car-<?php echo $row['car_id'];?>">
<input type="hidden" class="ref_date_from2" value="<?php echo $date_from; ?>" />
<input type="hidden" class="ref_date_to2" value="<?php echo $date_to; ?>" />
<input type="hidden" class="clickthrough" value="<?php echo $row['car_name'] ?>" />
<a><div id="<?php echo $row['car_id'];?>" class="clickthrough2 col-5-6"><?php echo $row['car_name'] ?></div></a>
</div>
<div class="col-1-6">
<?php echo $row[ 'quantity']; ?>
</div>
<?php } } ?>
</div>
</div>
referrer-ajax2.php:
<div id="car1" class="declined4 statdivhalf2">
<h4>Car Details</h4>
<div class="statgrid">
<?php
$result=$ mysqli->query($sql);
if($result->num_rows === 0) { echo 'No Cars in selected time period.'; }
else { while ($row = $result->fetch_array()) {
?>
<div id="clickthrough2" class="col-5-6"><?php echo $row['car_details'] ?></div>
<div class="col-1-6"><?php echo $row[ 'quantity']; ?></div>
<?php } } ?>
<a><div id="backref">< Back</div></a>
</div>
</div>
EDIT: I have tried the below be it did not work:
$('#backref').click(function () {
$('.declined4').hide();
$('.declined3').show();
});
Instead of reloading the div with the new content you could create a new div each time hiding the old one. You would then cycle through them by indexing each div with either an id or (probably better) a "data-" attribute.
Related
I've flexible content based on wordpress page which gives our client opportunities to configure pop-ups in specific page by himselfs.
So the problem is that on one page we've quite a few, let's say infinity numbers of rows of content.
Every specific row has a unique ID created by counting "$i++;".
I'm trying to create a script which will give me the possibility to create unique pop-ups for unique flexible content automatically, based on numbers of current rows.
Here is PHP code
<div class="row">
<?php if( have_rows('service_component') ): $i = 0; ?>
<?php while( have_rows('service_component') ): the_row(); $i++; ?>
<div class="six columns">
<img onclick="openRightMenu()" src="<?php the_sub_field("feature_image"); ?>">
<h3><?php the_sub_field("title"); ?></h3>
<div class="servicesHidden sidenav" id="right_slider_<?php echo $i; ?>">
×
<?php the_sub_field("services"); ?>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
Code above works correctly: content is generated and every div is unique:
<div class="servicesHidden sidenav" id="right_slider_<?php echo $i; ?>">
So next step is to create javascript. Code below also works properly, but only on one unique ID.
<script>
function openRightMenu() {
document.getElementById("right_slider_1").style.width = "33%";
document.getElementById("main").style.marginRight = "33%";
document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}
function closeRightMenu() {
document.getElementById("right_slider_1").style.width = "0";
document.getElementById("main").style.marginRight = "0";
document.body.style.backgroundColor = "white";
}
</script>
Question is: how to modify function above to to let it display and hide unique content endlessly?
You could pass the id into the function
function openRightMenu(id) {
document.getElementById(id).style.width = "33%";
...
}
And in your html
<img onclick="openRightMenu('right_slider_<?php echo $i; ?>')" src="<?php the_sub_field("feature_image"); ?>">
This form contains a dropdown list that has multiple options with checkboxes, now when a user selects 1 or more checkboxes and presses submit, the values should be processed with the matching search results. Previously, I had a select tag with an option tag that was used to get the results. Now, since I added the functionality of searching for more than one option, I added checkboxes, but now I am not sure how to get the results.
Html and Php Code
<form action="<?php the_permalink() ?>" class="ajax-search-form leaders-header" id="searchform" method="post" role="search">
<?php get_template_part( 'blocks/leaderboard/search-form' ) ?>
<div class="sort">
<body>
<?php if ($departments = get_field_object('field_5da06da87ae0f')) : ?>
<div class="sort-item">
<div id="list1" class="dropdown-check-list" tabindex="100">
<span class="anchor" style="font-size: small">All Departments</span>
<ul id="items" class="items" name="department" >
<label for="test">
<?php foreach ($departments['choices'] as $key => $department) : ?>
<input type="checkbox" name="check" id="test" value="unchecked" /> <option style="font-size: small" <?php if ( isset($_REQUEST['role']) and $_REQUEST['role'] == $key) echo 'selected' ?> value="<?php echo $key; ?>">
<?php echo $department; ?></option></label></br>
<?php endforeach; ?>
<input style="font-size: small" type="submit" value="Submit" "/>
</ul>
</div>
</div>
<?php endif ?>
</body>
JavaScript:
<script type="text/javascript">
var checkList = document.getElementById('list1');
var items = document.getElementById('items');
var isChecked = document.getElementById('items').checked;
checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
if (items.classList.contains('visible')){
items.classList.remove('visible');
items.style.display = "none";
}
else{
items.classList.add('visible');
items.style.display = "block";
}
}
items.onblur = function(evt) {
items.classList.remove('visible');
}
</script>
Problem is that every checkbox will have the same name and id so you will be not able to recognize which option belongs to which checkbox but you can try something like this
<?php foreach ($departments['choices'] as $key => $department) : ?>
<input type="checkbox" name="<?= $department ?>" id="<?= $department ?>" value="unchecked" />
I have a WordPress loop where I list the data. I create a button dynamically and set their ids.
When I set that id into a textbox I can see that all buttons have different ID because I increment the number each time. Until here everything is okay and working fine.
but need to use javascript for setting the textbox value with value of button ID.
I use this following code:
<script>
jQuery(document).ready(function($){
$('.p-name-x').click(function(){
$('#dynamic-field').val($(".the-prod-counter").val());
});
alert($(".the-prod-counter").val());
});
</script>
on my $('.p-name-x').click(function() x should be changed with the number if ID i get from the loop.
on my alert it always gives the first ID. For example if I have 3 buttons the alert gives 3 times the first id!
How can get the alert to show the other numbers as well?
------------- EDIT --------------
Here is part of my code
<?php
$type = 'stiel_privatkunden';
$args=array('stiel_privatkunden_cat' => $post_slug, 'post_type' => $type, 'posts_per_page'=>-1, 'order'=>'ASC');
$my_query = new WP_Query($args);
$i=1;
$idh=1;
while ($my_query->have_posts()) : $my_query->the_post();
if($i%2==0) {
?>
<div class="row" style="background:#f3f3f3" id="<?php the_field('prod_slug'); ?>">
<div class="col-xs-12 col-sm-6">
<figure class="pro-innerpage-img">
<?php the_post_thumbnail(); ?>
</figure>
</div>
<div class="col-xs-12 col-sm-6" style="padding:20px;">
<div class="title_content">
<div class="the-title"><?php the_title();?></div>
<div class="the-desc"><?php the_field('description'); ?></div>
<?php if( get_field('passende_Produkte') ): ?>
<div class="vc_toggle vc_toggle_square vc_toggle_color_black vc_toggle_color_inverted vc_toggle_size_md">
<div class="vc_toggle_title" tabindex="0"><h4>passende Produkte</h4><i class="vc_toggle_icon"></i></div>
<div class="vc_toggle_content" style="display: none;">
<p><?php the_field('passende_Produkte'); ?></p>
</div>
</div>
<?php endif; ?>
<?php if( get_field('link_mehr_erfahren') ): ?>
<span class="theme-button-inner">mehr erfahren</span>
<?php endif; ?>
<?php if( get_field('link_jetz_anfragen') ): ?>
<span class="theme-button-inner">jetzt anfragen</span>
<?php endif; ?>
</div>
<!--<input type="text" name="the-prod-name" class="the-prod-name-<?php echo $idh; ?>" value="<?php the_field('prod_slug');?>">-->
<input type="hidden" name="the-prod-counter" class="the-prod-counter" value="<?php echo the_field('prod_slug') . '-'. $idh; ?>">
<!--<input type="text" name="the-prod-idk" class="the-prod-idk" value="<?php //echo $idh; ?>"> -->
<script>
jQuery(document).ready(function($){
$('.p-name').click(function(){
$('#dynamic-field').val($(".the-prod-counter").val());
});
//alert($(".the-prod-counter").val());
});
</script>
</div>
</div>
<br/>
<?php } else { ?>
On my controller I have a a data array which lets me find image location and then sets it as a
$data['template_image']. And on view <img src="<?php echo $template_image;?>" alt="" id="template" class="img-thumbnail" />
When I save form then the image changes, but what I am trying to get is that when I use my drop down select it will change with the drop down option.
How can I get that effect with jquery or java script with codeigniter.
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Website extends Controller {
public function __construct() {
parent::__construct();
$this->load->model('admin/website/model_website');
$this->load->model('admin/website/model_website_setting');
$this->lang->load('admin/website/website', 'english');
$this->model_website_setting->setWebsiteID($this->uri->segment(4));
}
public function index() {
$this->document->setTitle($this->lang->line('heading_title'));
if (!empty($this->input->post('config_template'))) {
$data['config_template'] = $this->input->post('config_template');
} else {
$data['config_template'] = $this->model_website_setting->get('config_template');
}
$data['templates'] = array();
$directories = glob(APPPATH . 'modules/catalog/views/theme/*', GLOB_ONLYDIR);
foreach ($directories as $directory) {
$data['templates'][] = basename($directory);
}
if (is_file(FCPATH . 'image/templates/' . $this->model_website_setting->get('config_template') . '.png')) {
$data['template_image'] = base_url('image/templates/' . $this->model_website_setting->get('config_template') . '.png');
} else {
$data['template_image'] = base_url('image/no_image.png');
}
return $this->load->view('website/website_form', $data);
}
}
View
<form action="<?php echo $action;?>" method="post" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="input-template"><?php echo $entry_template; ?></label>
<div class="col-sm-10">
<select name="config_template" id="input-template" class="form-control">
<?php foreach ($templates as $template) { ?>
<?php if ($template == $config_template) { ?>
<option value="<?php echo $template; ?>" selected="selected"><?php echo $template; ?></option>
<?php } else { ?>
<option value="<?php echo $template; ?>"><?php echo $template; ?></option>
<?php } ?>
<?php } ?>
</select>
<br />
<?php if (is_file(FCPATH . 'image/templates/' . $this->model_website_setting->get('config_template') . '.png')) { ?>
<img src="<?php echo base_url('image/templates/' . $this->model_website_setting->get('config_template') . '.png');?>" alt="" id="template" class="img-thumbnail" />
<?php } else { ?>
<img src="<?php echo base_url('image/no_image.png')?>" alt="" id="template" class="img-thumbnail" />
<?php } ?>
</div>
</div>
</form>
$(document).ready(function(){
$("select").on('change',function(){
$("#my_image_id").attr("src",this.value);
});
});
http://jsfiddle.net/83xn35nk/
EDIT
in your case it will be:
$(document).ready(function(){
$("#input-template").on('change',function(){
$("#template").attr("src",this.value).;
});
});
<form action="<?php echo $action;?>" method="post" role="form">
where is your $action value? you are not sending the action value from controller.try to send it. like $data['action']='your action path'
add a id to your form like
<form id="myForm" action="<?php echo $action;?>" method="post" role="form">
now submit the form onchange of your select box
$(document).ready(function()
{
$(document).on("change", "#input-template", function(event)
{
$("#myForm").submit();
});
});
am having javascript functionality for images whose id is dynamically assigned as like_1,like_2.........., how to make the functionality to made to work for every image these images are in li tag in wow slider.
this is javascript
<script type="text/javascript">
$(document).ready(function() {
$("#like_0").click(function() {
$("#tipid").val(1);
$("#like_0").attr("src","images/ic_like_select.png");
$("#unlike_0").attr("src","images/ic_unlike_unselect.png");
});
$("#unlike_0").click(function() {
$("#tipid").val(0);
$("#like_0").attr("src","images/ic_like_unselect.png");
$("#unlike_0").attr("src","images/ic_unlike_select.png");
});
});
</script>
this is the data which is sliding, am getting it from database dynamically
<div id="wowslider-container1">
<form action="#" method="post">
<div class="ws_images">
<ul>
<?php
if ($stmt->execute(array($_GET['id']))) {
while ($row = $stmt->fetch()) {
$counter =0;
foreach ($int_arr as $x) {
if ($stmt1->execute(array($x))) {
while ($row1 = $stmt1->fetch()) {
// print_r($row);
//echo $row1['title'];
?>
<li><img src="engine1/bg.png" alt="" title="" id="wows1"/><div><span style="font-size:12px;text-transform:uppercase;"><b><?php echo $_GET['id'];?></b></span><br><span style="color:#3B8BD7;font-size:22px;"><?php echo $row1['title'];?></span></div><img src="images/list_hr.png" style="background-repeat:repeat-x;width:303px;height:4px;margin-top:-3px;" /><span style="font-size:12px;"><?php echo $row1['body'];?><br><br><br></span><img src="images/list_hr.png" style="background-repeat:repeat-x;width:303px;height:4px;"/><div align="center"><b><p style="color:#3B8BD7;font-size:14px;">Helpline?</p></b><img src="images/ic_like_unselect.png" height="40" width="40" id="like_<?php echo $counter;?>" name="offer" /> <img src="images/ic_unlike_unselect.png" height="40" width="40" id="unlike_<?php echo $counter;?>" name="offer"/></div>
<input type="hidden" name="tipid" id="tipid" value="" />
<input type="text" name="tip" id="tip" value="<?php echo $counter;?>" /><?php $counter++;?></li>
<?php }}}}} echo $counter;?>
</ul></div>
<div class="ws_bullets">
<div align="center">
<?php if ($stmt->execute(array($_GET['id']))) {
while ($row = $stmt->fetch()) {
foreach ($int_arr as $x) {
if ($stmt1->execute(array($x))) {
while ($row1 = $stmt1->fetch()) {
// print_r($row);
//echo $row1['title'];
?>
<a href="#" ></a>
<?php }}}}}?>
</div></div>
<div class="ws_shadow">
</div>
</form>
as you see in the javascript i gave like_0 and it is working for first slide images, i have to make it work for all the images in other slides also but how to give it is not known can someone help me please thanks.
If you are using ID's which start with like/unlike, you can use attribute selector instead.
$("[id^='like_']" ).click(function() {
//do something
});
$("[id^='unlike_']" ).click(function() {
//do something
});
Use a class, instead of an id. That is what classes are for - remember a class can apply to multiple elements, and an ID only to one.
Example:
$(".like").click(function() {
$(this).closest(".tipid").val(1);
$(this).attr("src","images/ic_like_select.png");
$(this).closest('.unlike').attr("src","images/ic_unlike_unselect.png");
});