I have an accordion where the link of dialog box present, but when the dialog box open it didn't save the field and not redirecting, what's the issue? i tried a lot to figure out but didn't get any success.
This is my view :
<?php v_start($d);?>
<script>
$(function() {
var icons = {
header: "ui-icon-circle-arrow-e",
activeHeader: "ui-icon-circle-arrow-s"
};
$( "#accordion" ).accordion({
icons: icons
});
$( "#toggle" ).button().click(function() {
if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
$( "#accordion" ).accordion( "option", "icons", null );
} else {
$( "#accordion" ).accordion( "option", "icons", icons );
}
});
});
$(function()
{
var $dialog = $("#view_dialog").dialog({
autoOpen: false,
title: 'Add Group',
height: 200,
width: 1200,
resizable: true,
modal: true,
buttons:
{
"Ok": function()
{
$(this).dialog("close");
}
}
});
$(".view_dialog").click(function()
{
$dialog.load($(this).attr('href'), function ()
{
$dialog.dialog('open');
});
return false;
});
});
</script>
<div class="inner-heading">
<div class="inner-heading-left">
<h1><?php echo __l('Manage Groups');?></h1>
</div>
</div>
<div id="accordion">
<div>
<h3 style="margin-right: 0PX; margin-left: 30px; font-size:20px;"><?php echo __l('User Define Group') ?></h3>
</div>
<div class="firsttable">
<div class="top-button">
//dialog link
<?php echo $this->Manager->hlink('Add Group', array('action' => 'add_define_group'), array('class' => 'view_dialog')); ?>
<?php echo $this->Manager->link('Add Group',array('action'=>'add_define_group')) ?>
</div>
</div>
<div>
<h3 style="margin-right: 0PX; margin-left: 30px; font-size:20px;"><?php echo __l('Mailing Group') ?></h3>
</div>
<div class="firsttable">
<div class="top-button">
<?php echo $this->Manager->link('Add Group',array('contoller'=>'ContactGroups','action'=>'add_define_group','mailing')) ?>
</div>
</div>
<div>
<h3 style="margin-right: 0PX; margin-left: 30px; font-size:20px;"><?php echo __l('Dynamic Group') ?></h3>
</div>
<div class="firsttable">
<div class="top-button">
<?php echo $this->Manager->link('Add Group',array('contoller'=>'ContactGroups','action'=>'add_define_dynamic_group')) ?>
</div>
</div>
<div id="view_dialog"></div>
</div>
<?php v_end();?>
Bascially i trying to open the dialog box in the accordion , dialogbox will save the data and redirect it, but it didn't save any data and didn't redirect, what can i do with that?
Any body's help will be appreciated, thanks a lot in advance.
Related
I have a problem when I try to show a map with all the companies of an organization in my web.
When I go to my website I see that the map is not displayed.
I'm going to inspect item and I get the error "initMap is not a function".
I do not know why this error is due.
Can you help me?
I attach the code:
<?php
if($_SERVER['REMOTE_ADDR']=='80.32.126.235'){
error_reporting(E_ALL);
ini_set('display_errors', '1');
}
$json = file_get_contents('https://aplicatiuspin.cat/aplicatiu/webServices/views/?v=empreses/json&idAplicatiu=59&idEtiqueta=1&template=none');
$empreses = json_decode($json, true);
?>
<div id="map" style="height: 500px; width: 100%;"></div>
<script type="text/javascript">
function initMap() {
var map_cnt = {lat:41.563211, lng:2.008875};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: map_cnt,
scrollwheel: false
});
var mapBound = new google.maps.LatLngBounds();
var mapInfoWindow = new google.maps.InfoWindow();
<?php
foreach ($empreses as $e) {
if (is_numeric($e['latitud']) && is_numeric($e['longitud'])) {
?>
var marker<? echo $e['id'];?> = new google.maps.Marker({
position: new google.maps.LatLng(<? echo $e['latitud'];?>, <? echo $e['longitud'];?>),
map: map,
title: '<? echo addslashes($e['nom']); ?>'
});
mapBound.extend(marker<? echo $e['id'];?>.getPosition());
google.maps.event.addListener(marker<? echo $e['id'];?>, "click", function () {
var tmp = jQuery("#divEmpresa<?=$e['id']; ?>");
tmp.popup('show');
});
map.fitBounds(mapBound);
<?
}
}
?>
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
<script src="/webServices/views/js/jquery.popupoverlay.js"></script>
<div style="overflow: hidden; height: 1px; width: 1px;">
<?php
foreach ($empreses as $e):?>
<div class="divEmpresa" id="divEmpresa<?=$e['id']; ?>" style="background-color: #ffffff; padding: 20px; border-radius: 5px; width: 50%;">
<div style="text-align: right; padding: 0 5px;">
<a href="#" class="divEmpresa<?=$e['id']; ?>_close" >
<i class="fa fa-times" aria-hidden="true"></i>
</a>
</div>
<div class="row">
<!--<div class="col-sm-4"><img src="/webServices/views/img/empresa<?=$e['id']; ?>.jpg"> </div>-->
<div class="col-sm-8"><h2><?=$e['nom']; ?></h2></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8">
<?=$e['adreca']; ?><br>
<?=$e['cp']; ?> - <?=$e['poblacio']; ?> <br>
<?=$e['telefon']; ?><br>
<?=$e['web']; ?>
</div>
</div>
</div>
<?
endforeach;
?>
</div>
<script>
jQuery( document ).ready(function() {
jQuery('.divEmpresa').popup({
transition: 'all 0.3s',
scrolllock: true
});
});
</script>
You have to forgot add google-api-key like below.
Get your YOUR_API_KEY here and added it..
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Updated Code
<?php
if($_SERVER['REMOTE_ADDR']=='80.32.126.235'){
error_reporting(E_ALL);
ini_set('display_errors', '1');
}
$json = file_get_contents('https://aplicatiuspin.cat/aplicatiu/webServices/views/?v=empreses/json&idAplicatiu=59&idEtiqueta=1&template=none');
$empreses = json_decode($json, true);
?>
<div id="map" style="height: 500px; width: 100%;"></div>
<script type="text/javascript">
function initMap() {
var map_cnt = {lat:41.563211, lng:2.008875};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 6,
center: map_cnt,
scrollwheel: false
});
var mapBound = new google.maps.LatLngBounds();
var mapInfoWindow = new google.maps.InfoWindow();
<?php
foreach ($empreses as $e) {
if (is_numeric($e['latitud']) && is_numeric($e['longitud'])) {
?>
var marker<? echo $e['id'];?> = new google.maps.Marker({
position: new google.maps.LatLng(<? echo $e['latitud'];?>, <? echo $e['longitud'];?>),
map: map,
title: '<? echo addslashes($e['nom']); ?>'
});
mapBound.extend(marker<? echo $e['id'];?>.getPosition());
google.maps.event.addListener(marker<? echo $e['id'];?>, "click", function () {
var tmp = jQuery("#divEmpresa<?=$e['id']; ?>");
tmp.popup('show');
});
map.fitBounds(mapBound);
<?
}
}
?>
}
</script>
<script async defer src="https://maps.google.com/maps/api/js?v=3.25&key=enter-your-key-here&callback=initMap"></script>
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script>
<div style="overflow: hidden; height: 1px; width: 1px;">
<?php
foreach ($empreses as $e):?>
<div class="divEmpresa" id="divEmpresa<?=$e['id']; ?>" style="background-color: #ffffff; padding: 20px; border-radius: 5px; width: 50%;">
<div style="text-align: right; padding: 0 5px;">
<a href="#" class="divEmpresa<?=$e['id']; ?>_close" >
<i class="fa fa-times" aria-hidden="true"></i>
</a>
</div>
<div class="row">
<!--<div class="col-sm-4"><img src="/webServices/views/img/empresa<?=$e['id']; ?>.jpg"> </div>-->
<div class="col-sm-8"><h2><?=$e['nom']; ?></h2></div>
</div>
<div class="row">
<div class="col-sm-4"></div>
<div class="col-sm-8">
<?=$e['adreca']; ?><br>
<?=$e['cp']; ?> - <?=$e['poblacio']; ?> <br>
<?=$e['telefon']; ?><br>
<?=$e['web']; ?>
</div>
</div>
</div>
<?
endforeach;
?>
</div>
<script>
jQuery( document ).ready(function() {
jQuery('.divEmpresa').popup({
transition: 'all 0.3s',
scrolllock: true
});
});
</script>
You have create a google API key and paste it in 'enter-your-key-here' place.
To create google API key click below link
https://developers.google.com/maps/documentation/javascript/get-api-key
Cheers!!
$(document).ready(function() {
if ($("#grid .media-box").hasClass("brand1")) {
$("#grid .media-box-content").addClass("brand01")
};
}
});
and in body looping div grid
<div id="grid">
<?php foreach($data as $items) { ?>
<div class="media-box video <?php echo $items->brand; ?> <?php echo $items->country; ?>">
<div class="media-box-image">
<div data-width="240" data-height="168" data-thumbnail="gallery/thumbnails/thumb-2.jpg"></div>
<div data-type="iframe" data-popup="https://www.youtube.com/watch?v=5guMumPFBag" title="Psico dell consecteture"></div>
<div class="thumbnail-overlay">
<i class="fa fa-video-camera mb-open-popup"></i>
<i class="fa fa-link"></i>
</div>
</div>
<div class="media-box-content">
<div class="media-box-title">Psico dell consecteture</div>
<div class="media-box-date">
<?php echo $items->country; ?></div>
<div class="media-box-text">Lorem ipsum dolor sitam psico.</div>
<div class="media-box-more"> Read more
</div>
</div>
</div>
<?php } ?>
</div>
CSS:
.media-box {
font-size: 13px;
}
.brand01 {
background: blue !important;
}
.media-box-content {
padding: 20px;
position: relative;
color: rgb(51, 51, 51);
line-height: 17px;
}
The above code is not working for me.
<?php echo $items->brand; ?> <?php echo $items->country; ?>" >
is fetching 2 classes to the dive from database.
$("#grid .media-box.brand1").find(".media-box-content").addClass("brand01")
Your code will add class brand01 to all .media-box-content if the condition is true.
There is no need to use if condition, you can use .toggleClass() with second arg as function which returns a boolean value as true/false:
$(document).ready(function() {
$("#grid .media-box-content").toggleClass("brand01", function(){
return $(this).closest(".media-box").hasClass("brand1");
});
});
I feel you need to target the each .media-box-content and find the parent .media-box has the class, if has true then add it if false remove it.
Use this, it will work
$(document).ready(function() {
$("#grid .media-box").each(function(index, element) {
if ($(this).hasClass("brand1")) {
$(this).children(".media-box-content").addClass("brand01")
}
});
});
I want to use Masonry cascading grid layout library on my code but it doesn't work.
Stylesheet:
.post {
background: #FFF;
padding: 10px;
border-bottom: 3px solid #e6e6e6;
width: 30.7%;
margin: 10px;
}
Source code:
<div id="content">
<?php
for($i = 1; $i <= 12; $i++) {
?>
<div class="post fleft">
<div class="title bbottom">
<div class="fright">
<div class="avatar fright" style="background-image: url(images/avatar.png)"></div>
<span class="fright">سید امیرحسین رهنمافرد</span><br />
<span class="fright">روشن</span>
</div>
<div class="fleft">
<span class="fleft">14 خرداد 93 | 20:22</span><br />
<span class="fleft">غزل در دیوان غزلیات</span>
</div>
<div class="clear"></div>
</div>
</div>
<?php } ?>
<script src="<?php echo ROOT ?>/scripts/jquery-1.11.0.min.js"></script>
<script src="<?php echo ROOT ?>/scripts/masonry.pkgd.min.js"></script>
<script src="<?php echo ROOT ?>/scripts/loggedIn.js"></script>
Script (loggedIn.js):
$(document).ready(function($){
var $container = $('#content');
$container.masonry({
columnWidth: 200,
itemSelector: '.post'
});
});
I'm sure about integrity of the addresses but what's the problem?
EDIT:
Strangely when I add an alert to the JS code it works correctly!
$(document).ready(function($){
var $container = $('#content');
alert($container.html());
// initialize
$container.masonry({
columnWidth: 100,
itemSelector: '.post'
});
});
You can use this code:
$(document).ready(function($){
var $container = $('#content');
setTimeout(function(){
// initialize
$container.masonry({
columnWidth: 100,
itemSelector: '.post'
});
}, 200);
});
Note:
if you use $.getScript function this issue will happen.
This question already has answers here:
How to access a model method with javascript
(2 answers)
Closed 8 years ago.
Please have a loook at the following code
<?php
//echo $this->Html->css(array('bootstrap', 'mark', 'style'));
echo $this->Html->script(array('timer','swfobject','bootstrap.min.js'));
//$this->requestAction('/flip2/correctAnswer')
?>
<style>
#hideall {
display: none;
opacity: 0.7;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000;
border: 1px solid #cecece;
z-index: 1;
vertical-align:middle;
text-align:center;
}
.removeCardflip{
transition: rotateY(0deg);
-webkit-transition: rotateY(0deg);
transition-duration: 0s;
}
/* SECTIONS */
.section {
clear: both;
padding: 0 10px 0 10px;
margin: 0px;
}
</style>
<div id="hideall">
<?php //echo $this->Html->image('progress.gif', array('alt' => 'Wait', 'style' => 'text-align:center; padding-top:200px;'));?>
</div>
<!--<div class="wrapper" style="border: 1px solid red; width: 100%;">-->
<div class="section group" style="margin-top: 50px;">
<div class="col span_3_of_3">
<h3 style="margin:0px; font-size:22px;">Play word game: </h3>
</div>
</div>
<div class="">
<div>
<div>
<span class="remainWords"><?php //echo count($words);?></span> oxxxxxxxxxxxxxxxf <?php //echo $totalWords;?>
</div>
<div>
<?php
echo $this->Html->image("comic_edit.png",
array(
"alt" => "Pareto List",
"id" => "paretoList",
'url' => "javascript:;"
)
);
?>
</div>
</div>
</div>
<div class="container"><div class="row">
<?php
foreach($worddeck as $worcard)
{
?>
<div class="xy col-lg-3 col-md-4 col-sm-6 img-rounded" id="card1" style="width:250px; height:200px; background-color:grey; heiht:170px; margin: 10px 10px;">
<div id="enside1" >
<h1 data-pos="<?php //echo ; ?>" ><?php echo $worcard['unique_wordsforcards']['en_word']; $enSpell = $worcard['unique_wordsforcards']['en_word']; ?></h1>
</div>
<div id="ptside1" style="display:none;">
<?php echo $phonemer[$enSpell]; ?>
<p><?php echo $worcard['unique_wordsforcards']['hint']; ?></p>
</div>
<div id="cntrol1">
<button type="button" id="acertei" class="a btn btn-success mr5 btn-lg">Acertei</button>
<button type="button" id="Errei" class="e btn btn-danger mr5 btn-lg">Errei</button>
</div>
</div>
<?php
}
?>
</div></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript">
$(document).ready(function(){
$( ".btn-danger" ).click(function(){
console.log("Red Button");
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
});
$( ".btn-success" ).click(function(){
console.log("Red Button");
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
});
$( ".xy" ).click(function(){
$(this).find("#enside1").toggle();
$(this).find("#ptside1").toggle();
console.log(this);
});
$("#acertei").on("click", function() {
$.ajax({
url: "/flip2/correctAnswer",
success: function(data) {
// Do whatever you need to do with the response here.
},
});
});
});
</script>
This is the View of a CakePHP page. $this->requestAction('/flip2/correctAnswer') will call the correctAnswer() method in Controller.
Here If I call the $this->requestAction('/flip2/correctAnswer') on page load, this works fine. I need to call this when the Acertei button is clicked, so I added it to the Ajax as proposed by a fellow SO user. However, it didn't work, the function do not get called. Why is this?
I would recommend first giving your Acertei button a unique ID like "acertei" for example (it currently shares the ID of "2" with its sibling button). Then with jQuery you can do the following:
$("#acertei").on("click", function() {
$.ajax({
url: "/flip2/correctAnswer",
success: function(data) {
// Do whatever you need to do with the response here.
},
});
});
This adds a click event to the Acertei button that will start an AJAX request to the 'flip2/correctAnswer' URL.
Please have a look at the following code
<?php
//echo $this->Html->css(array('bootstrap', 'mark', 'style'));
echo $this->Html->script(array('timer','swfobject','bootstrap.min.js'));
?>
<style>
#hideall {
display: none;
opacity: 0.7;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: #000;
border: 1px solid #cecece;
z-index: 1;
vertical-align:middle;
text-align:center;
}
.removeCardflip{
transition: rotateY(0deg);
-webkit-transition: rotateY(0deg);
transition-duration: 0s;
}
/* SECTIONS */
.section {
clear: both;
padding: 0 10px 0 10px;
margin: 0px;
}
</style>
<div id="hideall">
<?php //echo $this->Html->image('progress.gif', array('alt' => 'Wait', 'style' => 'text-align:center; padding-top:200px;'));?>
</div>
<!--<div class="wrapper" style="border: 1px solid red; width: 100%;">-->
<div class="section group" style="margin-top: 50px;">
<div class="col span_3_of_3">
<h3 style="margin:0px; font-size:22px;">Play word game: </h3>
</div>
</div>
<div class="">
<div>
<div>
<span class="remainWords"><?php //echo count($words);?></span> oxxxxxxxxxxxxxxxf <?php //echo $totalWords;?>
</div>
<div>
<?php
echo $this->Html->image("comic_edit.png",
array(
"alt" => "Pareto List",
"id" => "paretoList",
'url' => "javascript:;"
)
);
?>
</div>
</div>
</div>
<div class="container"><div class="row">
<?php
$word="";
foreach($worddeck as $worcard)
{
?>
<div class="xy col-lg-3 col-md-4 col-sm-6 img-rounded" id="card1" style="width:250px; height:200px; background-color:grey; heiht:170px; margin: 10px 10px;">
<div id="enside1" >
<h1 data-pos="<?php //echo ; ?>" ><?php echo $worcard['unique_wordsforcards']['en_word']; $enSpell = $worcard['unique_wordsforcards']['en_word']; ?></h1>
</div>
<div id="ptside1" style="display:none;">
<?php echo $phonemer[$enSpell]; ?>
<p><?php echo $worcard['unique_wordsforcards']['hint']; ?></p>
</div>
<div id="cntrol1">
<button type="button" id="<?php $enSpell ?>" class="a btn btn-success mr5 btn-lg">Acertei</button>
<button type="button" id="2" class="e btn btn-danger mr5 btn-lg">Errei</button>
</div>
</div>
<?php
}
?>
</div></div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script type="text/javascript">
$(document).ready(function(){
$( ".btn-danger" ).click(function(){
console.log("Red Button");
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
});
$( ".btn-success" ).click(function(){
console.log("Red Button");
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
xxx($(this).attr('id'));
console.log( "The act has been done");
toclose.toggle();
});
});
$( ".xy" ).click(function(){
$(this).find("#enside1").toggle();
$(this).find("#ptside1").toggle();
console.log(this);
});
function xxx(id)
{
alert(id);
}
function increment()
{
$.ajax({
url: "http://localhost/cake2/flip2/correct",
}).done(function() {
console.log( "The act has been done");
toclose.toggle();
});
}
});
</script>
Please consider how those buttons are being generated inside the PHP loop.
I am trying to print the ID of a button using the below code.
$( ".btn-success" ).click(function(){
console.log("Red Button");
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
xxx($(this).attr('id'));
console.log( "The act has been done");
toclose.toggle();
});
});
But the alert dialog is empty. What has gone wrong here?
You are using $(this) in the wrong place. Save id of button before ajax call and use in ajax call done() function.
$( ".btn-success" ).click(function(){
console.log("Red Button");
idOfButton = $(this).attr('id');
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
alert(idOfButton);
console.log( "The act has been done");
toclose.toggle();
});
});
You can also save the event source before ajax call and later use it to get the id of event source element.
$( ".btn-success" ).click(function(){
console.log("Red Button");
eventSourceButton = $(this);
var toclose = $(this).parent().parent();
$.ajax({
url: "../img/media.jpg",
}).done(function() {
alert(eventSourceButton.attr('id'));
console.log( "The act has been done");
toclose.toggle();
});
});
You need to specify a context parameter in your $.ajax call. The this keyword does not refer to your .btn.sucess but to the window object or to whatever it has been assigned to if a call function was used.
See this example from jQuery ajax docs :
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$( this ).addClass( "done" ); // this refers to document.body
});
I hope that helps !