I am using a jquery slider in my application.The input type hidden has got some image url paths. I want to get "
img-paths- <?php echo $omsg_id; ?>
"
$omsg_id value into
var image_path_id = "#img-paths-"+$(this).data('id');
when i console printed in fire bug, the output was #img-paths-undefined
how to resolve it ?
<div class="post-image">
<?php $imagePathArray = explode(',',$uploads); ?>
<input id="img-paths-<?php echo $omsg_id; ?>" type="hidden" value="<?php echo htmlentities(json_encode($imagePathArray)); ?>" />
<div id="gallery7-<?php echo $omsg_id; ?>" ></div>
<script>
$(function(e) {
var image_path_id = "#img-paths-"+$(this).data('id');
var show_gallery_id = "#gallery7-"+$(this).data('id');
console.log(show_gallery_id);
console.log(image_path_id);
$(show_gallery_id).imagesGrid({
images:$.parseJSON($(image_path_id).val()),
align: true,
getViewAllText: function(imgsCount) { return 'View all' }
});
});
</script>
<!--<img src="<?php //echo $contentimage; ?>" class="image show-in-modal" alt="image post">-->
<p><?php echo $message; ?></p>
</div>
this refers to window object, thus $(this).data('id') will not return the desired data.
You can directly use $omsg_id in script.
var image_path_id = "#img-paths-<?php echo $omsg_id; ?>";
var show_gallery_id = "#gallery7-<?php echo $omsg_id; ?>";
Related
so I built crawler that crawl all the data in the link from the value so I need a way when clicking on the image the value of the image go to output to $_POST[''], and how?
require 'vendor/autoload.php';
use Symfony\Component\DomCrawler\Crawler;
$client = new \GuzzleHttp\Client();
$furl = 'https://hentaifox.com';
$res = $client->request('GET', $furl);
$html = ''.$res->getBody();
$crawler = new Crawler($html);
$url_f = $crawler->filter('#content .galleries_overview .item')->each(function(crawler $node, $i) {
//echo $node->html();
$image = $node->filter('img')->attr('src');
$src = $node->filter('a')->attr('href');
$href = 'https://hentaifox.com/'. $src;
?>
<form method="post" id="manga">
<input type="image" name="<?php echo $src ?>" src="<?php echo $image ?>" width="120" height="168" value="<?php echo $href ?>">
</form>
<?php }); ?>
i am reading and trying to get this to work for several hours. I am pretty new with javascript and only have a small knowledge base about it in general.
I hope someone can be so kind as to help me and share their knowledge with me.
The problem:
I have a image gallery with a php generated masonry look. And a visualization of either a selected or deselected image. (Info comes out of db). Now when i click a image it needs to call a method in one of my controllers.
And afterwards update the selected to deselected or vise versa css style.
The methods have been made and the return aswell.
This is what i got so far. But nothing seems to be working. I don't know if it is something specific to codeigniter or to javascript (jquery).
$(document).ready(function()
{
$('div#imagelink').click(function()
{
var imgId = $(this).find('a').attr('href');
$('#result').load('<?php echo base_url(); ?>selection/selectionImage/' + imgId);
return false;
});
});
If anything else is required i will be happy to provide.
<div class="flex-column width-1275">
<div class="d-flex justify-content-between">
<div class="p-2">
<h1><?php echo $this->session->userdata('username'); ?></h1>
<h3><?php echo str_replace( '_', ' ', $selected_gallery) . ' Galerij'; ?></h3>
</div>
<?php echo $this->session->flashdata('gallerymsg'); ?>
<div class="p-2 text-right">
<?php echo $this->session->flashdata('clientmsg') . '</br>'; ?>
</div>
<div id="result"></div>
</div>
<div class="grid imageGallery" data-masonry='{ "itemSelector": ".grid-item", columnWidth: ".grid-sizer" }'>
<div class="grid-sizer"></div>
<?php $counter=1 ; $sizeGallery=c ount($images); foreach($images as $img) : $imageLocation='img/jpg/' . $folderName . '/' . $img[ 'image_name']; $id=$ selected_gallery . $counter; ?>
<div class="grid-item">
<a href="#<?php echo $id; ?>">
<img src="<?php echo base_url($imageLocation) ?>" alt="<?php echo $selected_gallery . ' ' . $counter ?>">
</a>
<?php $class='' ; $selected=$ img[ 'image_selected']; switch($selected) { case '0'; $class='isNot' ; break; case '1'; $class='is' ; break; default; $class='isNot' ; break; } if($img[ 'image_locked']=='1' ) { $class='locked' ; } ?>
<div id="imagelink" class="<?php echo $class ?> selected">
<?php if ($img[ 'image_locked']=='0' ) : ?>
<!-- -->
<?php endif; ?>
</div>
</div>
<div class="cssbox">
<a id="<?php echo $id; ?>" href="#<?php echo $id; ?>">
<img class="cssbox_thumb">
<span class="cssbox_full">
<img src="<?php echo base_url($imageLocation) ?>">
</span>
<div class="<?php echo $class ?> Lightbox-Selected"></div>
</a>
<a class="cssbox_close" href="#void"></a>
<?php if($counter < $sizeGallery) : ?>
<?php $next=$ counter+1; ?>
<a class="cssbox_next" href="#<?php echo $selected_gallery . $next ?>">></a>
<?php endif; ?>
<?php if($counter> 1) : ?>
<?php $prev=$ counter-1; ?>
<a class="cssbox_prev" href="#<?php echo $selected_gallery . $prev ?>"><</a>
<?php endif ?>
</div>
<?php $counter++; endforeach; ?>
</div>
</div>
<script>
$(document).ready(function() {
$('div#imagelink').click(function() {
var imgId = $(this).find('a').attr('href');
$('#result').load('<?php echo base_url(); ?>selection/selectionImage/' + imgId);
return false;
});
});
</script>
<!-- <script src="<?php echo base_url('assets/js/image-select.js'); ?>"></script> -->
<script src="<?php echo base_url('assets/js/imagesloaded.pkgd.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/masonry.pkgd.js'); ?>"></script>
<script src="<?php echo base_url('assets/js/masonry.js'); ?>"></script>
I can't seem to figure out why my status doesn't change. I am trying to get my chat activation button to work on click, and send a post request to a specified url via jQuery. Can I even do that without using an actual form or sth??
jQuery:
$(".model_chat_button").css('cursor', 'pointer').click(function() {
var model_id = $(this).parent().attr('id').split('model_')[1];
var active = 1;
if ($(this).attr('rel') == '1')
{
active = 0;
$(this).attr('rel', '0');
$(this).find("img").attr('src', $(this).find("img").attr('src').replace('chat_active', 'chat_inactive'));
}
else
{
$(this).attr('rel', '1');
$(this).find("img").attr('src', $(this).find("img").attr('src').replace('chat_inactive', 'chat_active'));
}
$.post(base_url + lang + '/chats/activateModel',{model_id: model_id, active: active});
});
In my controller chats.php:
public function activateModel()
{
if ($this->session->userdata('is_admin') && $this->input->post('model_id'))
{
$model = new Model($this->input->post('model_id'));
$model->chat_active = $this->input->post('active')? 1 : 0;
$model->save();
}
}
And my view:
<div id="<?php echo $model->id; ?>">
<div class="model_chat_button" rel="<?php echo $model->chat_active? 1 : 0;?>">
<?php if ($model->chat_active): ?>
<?php if (! $this->session->userdata('is_admin')): ?>
<a href="<?php echo site_url(); ?>/chat/<?php echo $model->id; ?>" title="<?php echo $this->lang->line('chat_with'); ?> <?php echo $model->name; ?>">
<?php endif; ?>
<img src="<?php echo base_url(); ?>assets/images/design/button_chat_active.png" alt="Chat" />
<?php if (! $this->session->userdata('is_admin')): ?>
</a>
<?php endif; ?>
<?php else: ?>
<img src="<?php echo base_url(); ?>assets/images/design/button_chat_inactive.png" alt="Chat" />
<?php endif; ?>
</div>
</div>
So from what I can tell from the network tab, it does send a post request to the chats/activateModel URL, but the model ID is not added. What am I missing here?
I have the following code:
<?php $i=-1; foreach($contents as $content): ?>
<?php $i++; ?>
<div class="tab-pane" id="<?php echo $content->contentName; ?>">
<div class="summernote" data-value="<?php echo $i; ?>">
<?php echo $content->content; ?>
</div>
<textarea name="<?php echo $content->contentName; ?>" id="<?php echo $i; ?>" class="form-control"></textarea>
</div>
<?php endforeach; ?>
And then some javascript:
<script>
$('.summernote').summernote({
height: 300,
onblur: function(e) {
var id = $(e.target).data('value');
var sHTML = $(e.target).code();
$("#"+id).val(sHTML);
}
});
</script>
My problem is that the var id returns as undefined What do I need to do to get this return the correct id.
I am guessing summernote creates the app inside the div so try
$('.summernote').summernote({
height: 300,
onblur: function(e) {
var id = $(e.target).closest('[data-value]').data('value');
}
});
OR assuming summernote does not get rid of the class
$('.summernote').summernote({
height: 300,
onblur: function(e) {
var id = $(e.target).closest('.summernote').data('value');
}
});
Again I don't know summernote at all, if this does not work, it would help if you posted the generated html or a simplified version of it
I have some images that I create using data from a MySQL database. The data in the database are a title and a description. This is not visible on the website until a user clicks the image. Javascript then loads it in some other place, not anywhere near my image.
My problem is the accessing of this data. I create my elements in PHP with this structure:
<div class="image-container">
<img src="<?php echo $url; ?>" alt="<?php echo $title; ?>" />
<div class="title" style="display: none;"><?php echo $title; ?></div>
<div class="description" style="display: none;"><?php echo $description; ?></div>
</div>
When the image is clicked, I call for the data like this:
$('.image-container').click(handle_image_click);
function handle_image_click(e) {
var title = jQuery(e.currentTarget).find('.title').html();
var description = jQuery(e.currentTarget).find('.description').html();
(...)
}
Allthough this works, I don't find this a very 'clean' solution. It requires me having to hide div elements and 'store' data in them. I know you can store data to elements in jQuery using the following code:
$('#myElement').data('someName', 'someValue');
Now my question is: is there any way to not have to create the div elements in php (as seen in code block 1), but directly add the description and title to the 'data'-property of the element, ready to be fetched by javascript/jQuery?
you can use the data-* html5 attribute to store data
<div class="image-container" data-title="<?php echo $title; ?>" data-description="<?php echo $description; ?>">
<img src="<?php echo $url; ?>" alt="<?php echo $title; ?>" />
</div>
then in the handler
$('.image-container').click(handle_image_click);
function handle_image_click(e) {
var title = jQuery(this).data('title');
var description = jQuery(this).data('description');
(...)
}
yes you can.. using html5 data attribute
<img src="<?php echo $url; ?>" data-title="<?php echo $title; ?>" data-description="<?php echo $description; ?>" alt="<?php echo $title; ?>" />
and fetch it with jquery using data()
...
function handle_image_click(e) {
var title = jQuery(e.currentTarget).find('img').data('title'); //gives title
var description= jQuery(e.currentTarget).find('img').data('description'); //gives description
....