Semantic-UI dynamic popup not working - javascript

var val = '124';
function imagepop(nval) {
val = nval;
}
$(document)
.ready(function () {
$('.ui.selection.dropdown').dropdown();
$('.ui.menu .ui.dropdown').dropdown({
on: 'hover'
});
$('#'+val).popup({
popup: $('.fluid.popup'),
on: 'click'
});
});
Im trying to popup dynamic content coming from database HTML code as below
<div class="extra">
<div id="<?php echo$row['idproperty']; ?>" class="ui more primary button" onclick="imagepop(<?php echo$row['idproperty']; ?>)">
More
</div>
<div class="ui fluid popup top left transition hidden" >
<p><b>Description</b><?php echo$row['description']; ?></p>
<div class="ui three column center aligned grid">
<div class="column"> </div>
</div>
</div>
idproperty is some numbers getting from database i need to show each data in popups please help me to fix this

the function at $(document).ready is called before the function imagepop(nval) which assignes the value of idprperty to val.
The function at $(document).ready is called only once, when the document is done loading, that means that this part of the code:
$('#'+val).popup({
popup: $('.fluid.popup'),
on: 'click'
});
Will not be called when val gets the new value, the one originated from idproperty.
Move that part of the code to the end of your imagepop(navl) function, that should probably fix your issue.
If you still want to have this part of the code run immidiatly as the page loads, you will need to have the true value of idproperty ready to be right then. One way to do this is to include a hideen input field in your HTML and have the PHP feed it the value as a default, and then read this value from your js in the $(document).ready function:
in your html:
<input type="hidden" id="idproperty" name="idproperty" value="<?php echo $row['idproperty']; ?>">
in your $(document).ready function:
val = $(idproperty).val();
$('#'+val).popup({ //... rest of your code here

Related

js event looping on dynamic content

i have this div in my homepage.php file:
<?php foreach($posts as $post): ?>
</div class="post>
<div class="options">
<div class="option"></div>
<div class="option"></div>
<div class="option"></div>
</div>
<div class="none editanddelete">
<button type="button" class="edit">edit</button>
<button type="button" class="delete">delete</button>
</div>
<div class="imageandname">
<img src="<?php echo $post->user_image ?>">
<div class="username"><?php echo $post->username ?></div>
</div>
<div class="post_body">
<?php echo $post->post_body ?><br>
</div>
</div>
<?php endforeach; ?>
the $posts is array that is coming from database through controller and each time i publish a post, the body will add new div like above with the data needed from the $post array, now as shown above, the child div with class "editanddelete" is hidden by giving class "none" which is display:none;
now with javascript i want to make an event where when i click on the child div with class="options", it toggles the "none" class of the child div with class="editanddelete", like the following:
post = document.querySelector('.post');
options = post.querySelector('.options');
editanddelete = options.querySelector('.editanddelete');
options.addEventListener('click', () => {
editanddelete.classList.toggle('none');
})
when i execute this code, it works fine on the first post (div) that is dynamically created, but when i add another post, the event will not work on the second post div, i tried to use querySelectorAll and loop "options" classes that will be created dynamically, but it just does not work as expected and the event affects other divs, what i want is to make the event for all divs, every div on it's own
You need to work with the same .editanddelete element as .options is clicked.
JS code could be like
var options = document.querySelector('.options');
// here maybe would be for cycle over options (I can't test it now)
options.addEventListener('click', () => {
this.parentNode.querySelector('.editanddelete').classList.toggle('none');
})

How can I use the input parameter value passed to a JavaScript function into the popup opened by this JS function?

I am not so into PHP and JavaScript and I have the following problem trying to pass a value from a main page to a popup page (defined into this main page).
I try to explain my situation in details:
I have an account.php page containing this link:
<a href="#" onclick="doRemoveBooking();">
<i class="fa fa-times"></i>
</a>
Clicking on this link it is performed the doRemoveBooking() JavaScript function that is defined in the same page into this block:
<script type="text/javascript">
//metodo richiamato al click del bottone "RIVENDI"
function doRemoveBooking(id){
console.info("Into doRemoveBooking");
$('.popUpRemoveBooking').magnificPopup({
items: {
src: '#remove-booking-popup'
}
// (optionally) other options
}).magnificPopup('open');
}
</script>
that opens a popup defined at the end of the dame account.php page by this div element:
<div class="popUpRemoveBooking">
<div id="remove-booking-popup" class=" white-popup-block mfp-hide">
<div class="fluid-container">
<div class="row">
<h2><?php echo $texts['CANCEL_BOOKING'] ?></h2>
<p>Sei veramente sicuro di voler cancellare la prenotazione?</p>
<?php echo $id_booking; ?>
</div>
</div>
</div>
</div>
This popup is correctly opened but I obtain an error message when it try to render this line:
<?php echo $id_booking; ?>
I know that it is wrong. As you can see my JavaScript function take an id as parameter:
doRemoveBooking(id)
How can I print this id received as input parameter from the JavaScript function used to open the popup in the popup body? (instead the wrong ). What is a smart and neat way to do it?
Replace <?php echo $id_booking; ?> with <span id="bookingID"></span>
Then replace the content of that <span> in your function:
function doRemoveBooking(id){
console.info("Into doRemoveBooking");
$('#bookingID').html(id); // <---------------- Add this line
$('.popUpRemoveBooking').magnificPopup({
items: {
src: '#remove-booking-popup'
}
// (optionally) other options
}).magnificPopup('open');
}
Don't forget to call doRemoveBooking(id) with the correct booking-id !

Issues with find() when inserting html dynamically using jquery

I have a modal with a grid of buttons representing different html components. When one of the buttons is pressed, some html is supposed to be injected into the page once the modal closes. However, I'm having trouble targeting the specific column where the html is to be injected. Here's my code:
<div class="row" id="newRow">
<div class="col-md-12 column">
<button class="btn addElement" href="#" data-toggle="modal" data-target="#add-element"><i class="fa fa-plus fa-3x add-item"></i></button>
</div>
</div>
And in my js file I have some code to assign an id to the column div (since there could potentially be many columns with this addElement button) that looks like this:
...
$(this).parent().next().children().find('.column').assignId();
...
Up to this point, everything works well. I'm having no trouble getting the column a unique id (defined in my assignId() function).
As I mentioned, the addElement button gets clicked, opening a modal which is when this code is executed:
$(document).on('click', 'button.addElement', function (e) {
e.preventDefault();
$('#add-element').modal('show').draggable();
var col = $('button.addElement').parent();
// debugging in the browser verifies that the colId
// successfully stores the id attribute for the column
var colId = col.attr('id');
addElements(colId);
});
...
function addElements(colId) {
$('#insert-paragraph').on('click', function () {
var html_content = '<div class="box" data-type="paragraph">...</div>';
$("#newRow").find("#"+colId).html(html_content)
$('#add-element').modal('hide');
});
}
It's on this line: $("#newRow").find(colId).html(html_content); that I'm having the issue. My guess is that the formatting for find(...) is wrong and that I can't just insert a variable like that, but I've tried a few different things and nothing seems to be working.
Any help is very much appreciated.
Thanks!
UPDATE:
#juvian suggested writing a few of the variables' values to the console:
console.log(colId);
console.log($("#newRow")).length;
console.log($("#newRow").find("#"+colId).length);
console.log($("#newRow").find("#"+colId).html());
I logged these values twice. First, just before passing colId into the addElements function and in the addElements function immediately after $(#newRow").find("#"+colId).html(html_content); The results of those two tests are as follows:
Values prior to running addElements:
console.log(colId); = 8153-1076-641d-3840
console.log($("#newRow")).length; = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <button class="btn addElement"...>...</button>
Values after the insert-paragraph button is pressed:
console.log(colId); = 8153-1076-641d-3840
console.log($("#newRow")).length; = Object[div#newRow.row.clearfix]
console.log($("#newRow").find("#"+colId).length); = 1
console.log($("#newRow").find("#"+colId).html()); = <div class="box box-element" data-type="paragraph">...</div>
Interestingly enough, it appears like everything is working like I'd expect it to, however, when it's all said and done, the addElement button remains and the page still renders this:
<div id="newRow" class="row clearfix">
<div id="32aa-ab91-f50d-c3b3" class="col-md-12 column ui-sortable">
<button class="btn addElement" data-target="#add-element" data-toggle="modal" href="#">
<i class="fa fa-plus fa-3x add-item"></i>
</button>
</div>
</div>
.find as most jquery functions, takes a css selector as parametre. Unfortunately, colId is just a string, so it matches no elements (unless colId is html, span or something like that)
You are just missing adding the id selector at the beginning to do an id match:
.find("#"+colId)
I guess The parent of button is a div here which has no id.
var col = $('button.addElement').parent();
thus var colId is getting no value.give that div an id and it should be fine.

Include PHP page and replace divs when link clicked

I am trying to replace a div's contents with another PHP page when clicking on a link.
Link
echo 'Control Panel';
If statement checking if link clicked
<?php
/** Control panel link. */
if(isset($_GET['control'])){
$link=$_GET['control'];
if ($link == '1'){
include('controlpanel.php');
}
}
Divs
<div id="divContainer">
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>
</div>
I am looking for divContainer to hold the controlpanel.php contents when the control link is clicked and div1 div2 and div3 to be 'removed/hidden'.
I can get both functionalities to work individually but not simultaneously.
The code currently displays the content within the page but not within a div/hiding contents of said div.
Any ideas?
Continuing with your current style, you could simply amend your conditional to the following:
<?php
if ($link == '1') {
include('controlpanel.php');
} else { ?>
<div id="divContainer">...</div>
<?php } ?>
Alternatively, as suggested, you could use some JavaScript to hotload in the control panel, and in the same breath, hide the divs you need hidden. Something like this (jQuery):
function loadPanel() {
$.ajax({
url: 'controlpanel.php',
method: GET,
success: function(res) {
$('#divContainer').html(res);
}
});
}
And then bind this to your link.

there are bug after call ajax function in hover function jquery

I update partial of html page by call ajax function
Every 5 Minutes, there are some element object in partial that by hover on open a popup windows.
my code run the first one works fine, but after a update Does not work properly and per-hover opens two popup window.(hover function call twice)
index.php
<script type="text/javascript">
function refresh2() { <? php
echo CHtml::ajax(array(
'url' = > CController::createUrl("browsingpap/UpdateAjax"),
'update' = > '#type', )) ?>
}
window.setInterval("refresh2()", 300000);
</script>
<div id="type">
<!-- update here after call ajax function--->
</div>
updateAjax
<script type="text/javascript">
$(document).ready(function() {
$("#goli").hover(function() {
$('#popup5').bPopup();
});
});
</script>
<div id="popup5" style="display: none;"> <span class="button b-close"><span>X</span></span>
<div class="content">popup window</div>
<div id="goli">hover me for show a popup</div>
</div>
Try to do this and see if it help:
$("#goli").unbind('hover').bind('hover',function() {
$('#popup5').bPopup();
});
Anyway it will help us to see what is goig wrton if you will post the rest of your relevant code.

Categories