I am trying to make an instruction page about proxy settings for the users.
I have listed procedures step by step for each browser and put a link to picture that shows how it is done.
I want to show the picture in an PHP file which getting required image file and showing on the page according to its parameters s and b which are stand for s: step and b: browser.
My jQuery is
$(function() {
$("a[id^='proxy_']").click(
function() {
var b = $(this).data("b");
var s = $(this).data("s");
$("#proxy_modal_title").html("Proxy Settings");
$("#proxy_modal_body").load("images/proxy_settings/proxy.php?b=" + b + "&s=" + s);
});
});
It should load ./images/proxy_settings/proxy.php?b=ie&s=1 but nothing happens.
And HTML is ( a part only)
<ol>
<li>Click on Settings <a id="proxy_ie_step_01" data-s="1" data-b="ie" href="#proxyModal" data-toggle="modal" title="Show picture"> <span class="glyphicon glyphicon-picture"></span></a>
</li>
<li>Select Internet Options <a id="proxy_ie_step_02" data-s="2" data-b="ie" href="#proxyModal" data-toggle="modal" title="Show picture"> <span class="glyphicon glyphicon-picture"></span> </a>
</li>
<!-- goes on -->
</ol>
And the modal is here:
<div class="modal fade" id="proxyModal" tabindex="-1" role="dialog" aria-labelledby="zkanoca" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="proxy_modal_title"></h4>
</div>
<div class="modal-body" id="proxy_modal_body">
</div>
</div>
</div>
</div>
Proxy.php file content is here:
if (isset($_GET['b']) && isset($_GET['s']))
{
echo '<img src="proxy_setting_' . $_GET['b'] . '_' . $_GET['s'] . '.png " />';
}
else
{
exit;
}
Modal opens up but either modal title or modal content are empty. I have checked it with Firebug but cannot see any error.
I have tried to put an alert("HEY"); into $("a[id^='proxy_']").click(); event. It also did not work.
If it was a path issue, Firebug would have given me a 404 error.
The file structure tree is like the following:
|.
|-js
|-script.js
|-images
|-proxy_settings
|-proxy.php
|-proxy_setting_ie_1.png
|-proxy_setting_ie_2.png
|-proxy_setting_ie_1.png
|-proxy_setting_ie_3.png
|-proxy_setting_ie_4.png
|-proxy_setting_ie_5.png
|-proxy_setting_ie_6.png
|-proxy_setting_ie_7.png
|-instructionpage.html
|-messageform.php
|-index.php
The script does not listen click events although it responds another same event:
This works which resides at the same file (script.js):
jQuery("#sendMessage").click(
function() {
jQuery("#sendmessage_modal_title").html("Send A Message");
jQuery("#sendmessage_modal_body").load("messageform.php");
});
If the li elements are generated dynamically, you should try this:
$(document).on("click", "a[id^='proxy_']", function () {
//
});
First of all I apologize you all wasting your valuable time.
I was trying to retrieve the instructions.html into index.php using jQuery's load() function. I moved
$(function() {
$("a[id^='proxy_']").click(
function() {
var b = $(this).data("b");
var s = $(this).data("s");
$("#proxy_modal_title").html("Proxy Settings");
$("#proxy_modal_body").load("images/proxy_settings/proxy.php?b=" + b + "&s=" + s);
});
});
to instructions.html's itself then the problem is gone.
your .php files is in the folder images/proxy_settings/
maybe in your proxy.php file change the img src to: echo '<img src="../proxy_setting_' . $_GET['b'] . '_' . $_GET['s'] . '.png " />';
Update:
I dont know why but my Firebug tell me the 404 Not Found Error!
Replace this code into the proxy.php and it should work.
echo '<img src="images/proxy_setting_' . $_GET['b'] . '_' . $_GET['s'] . '.png " />';
Related
Trigger Button:
while ($row = mysqli_fetch_array($result)) {
$name = $row['name'];
$id = $row['id'];
echo '<a data-target="#exampleModal" class="wpmui-field-input button wpmui-submit button-primary" data-toggle="modal" data-whatever="'.$name.'">Details</a>';
echo $id . "<br>";
}
Modal:
echo'
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
<div class="modal-body">
<form>
<textarea class="form-control"></textarea>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>';
JavaScript:
echo'
<script type="text/javascript">
window.onload = function () {
$("#exampleModal").on("show.bs.modal", function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data("whatever") // Extract info from data-* attributes
var modal = $(this)
modal.find(".modal-title").text("New message to " + recipient)
modal.find(".modal-body textarea").val(recipient)
})
}
</script>';
Now I have all these codes above that will generate a Modal Box when clicked on that Trigger Button. This code seems to work fine in my localhost but it doesn't act the same in my server, and the values returned are undefined. Now, I think it might have something to do with the PHP Version, because my localhost has PHP7 and my server has PHP5. Does this mean in PHP5 does not support value field (JavaScript is .val()) in the <textarea> tag as in <textarea value="something">?
Even if that's the case, what is the workaround for this problem? I tried using .html() and .text() but all it does is overwriting the value, and when you open up the modal box once again, the value will be the same for ALL modal boxes (whereas it should be different value for each recipient modal box).
It seems you have'nt included necessary jquery and style files.try including bootstrap.js, jQuery.min.js
This one might be helpful for you
www.bootply.com/mRbjbQ1JAB
Good Luck.
Use chrome developer tools or in firefox depending on your browser, click on the network tab and load the page the modal is supposed to appear, check all the files listed in the network tab of developer tools for anyone with 404 not found, that is possibly what is missing.
I have tried to find this out here and not found what I was looking for.
The Goal: After a process has completed, to display a Bootstrap Modal that notifies the user it is complete (and/or that the admin may need to authorize something, for example, a comment may need to be authorized ...).
I can output a JavaScript script (sounds redundant as I type that) that will open the modal, but I want to pass text to the modal so I can have a reusable dialog. Here's the basic code I am working with:
The modal form:
<!-- language: lang-html -->
<!-- meant to be an alert dialog -->
<div id="myAlert" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="descModalLabel"></h3>
</div> <!-- / modal-header -->
<div class="modal-body">
<!-- some text will be inserted here -->
</div><!-- / modal-body -->
<div class="modal-footer" -->
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div><!-- / modal-footer -->
</div><!-- / modal-content -->
</div><!-- /modal-dialog -->
</div> <!--/ modal -->
<!-- end of modal form -->
<!-- end snippet -->
The JavaScript to open the form:
// for the myAlert modal:
// code to open the modal with the caption and description:
$('#myAlert').on('show.bs.modal', function (event)
{
var modal = $(this);
// need to get these values passed somehow
var caption = "Test";
var description = "Test Test Test";
modal.find('.modal-title').text( caption );
modal.find('.modal-body').append( '<strong>Description:</strong> ' + description );
});
// when modal closes, clear out the body:
$('#myAlert').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
The PHP that outputs the script that actually opens it:
echo '<script>';
// how do I pass the variables???
echo '$("#myAlert").modal("show")';
echo '</script>';
I would like to be able to pass the caption and description values to the form, but cannot figure it out. I have a version that works with a button based heavily on the Bootstrap site, but I cannot figure this one out. Thanks in advance!
There are probably better solutions out there but this one works too as I have tested already. It requires to take 3 steps:
You need to declare your variables you want to pass to JavaScript above all events and functions (make them global).
For example:
var global_caption = "Some default caption";
var global_description = "Some default description";
// All scripts now go here
In your modal you assign local variables from global variables (or use global variables directly) for some events, for example:
This will show basically the same thing as in your case so far:
$('#myAlert').on('show.bs.modal', function (event)
{
var modal = $(this);
var caption = global_caption;
var description = global_description;
modal.find('.modal-title').text( caption );
modal.find('.modal-body').append( '<strong>Description:</strong> ' + description );
});
With echo you assign new values to global variables and summon the event again.
Declaration can go as simply as:
echo '<script>';
echo 'global_caption = "This is a new caption"';
echo 'global_description = "This is a new description"';
echo '$("#myAlert").modal("show")';
echo '</script>';
I've got some code that is loaded on my footer via jquery (So that every page visited has the code on its page)
This code is meant to check a database and, if any responses, send a bootstrap modal to the client. When the modal is sent, the row is deleted from the database. Each user has their own row in the database when an update happens.
The footer code is reloaded every 10 seconds to check if there are any updates to the relative table.
This works, except even after the row is deleted, PHP seems to execute code inside my if blocks that shouldn't be executeted, as it is causing the modal to close or pile up on top of eachother, forcing the client to reload their page to continue browsing.
So lets say a client loads the index page, and they have a pending message waiting for them.
The modal is sent for the user to close manually. If the user waits more than 10 seconds, the modal will close itself but the backdrop will remain, making it so the user cannot click anything until the page is reloaded. If the user waits another 10 seconds, another backdrop is added, darkening the screen. This goes on and on until the screen is completely black or the client reloads the page.
The code that opens the modal is inside of 2 if blocks basically stating that it should not be executed.
Here is my reloading code:
<?
include("dbConnect.php");
$sql = "SELECT DISTINCT Message,uniqueID from sendMessage WHERE UserID='".$_GET['userID']."';";
$ret = $db->query($sql);
$loop = 0;
$messages = array();
if (session_status() == PHP_SESSION_NONE) {
session_start();
}
while($row = $ret->fetchArray(SQLITE3_ASSOC) ){
$loop++;
array_push($messages,array("uniqueID" => $row['uniqueID'], "Message" => $row['Message']));
}
if($loop != 0) {
if(!empty($messages)) {
?>
<script type="text/javascript">
$(document).ready(function () {
$('.modal').modal('hide');
$('#memberModal').modal('show');
});
</script>
<!-- Modal -->
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="memberModalLabel">Message from Administrators</h4>
</div>
<div class="modal-body">
<?
foreach($messages as $v) {
echo $v['Message'];
if($loop > 1) {
echo "<br><br>";
}
}
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<?
foreach($messages as $v) {
$sql2 = "DELETE from sendMessage where uniqueID='".$v['uniqueID']."';";
$ret2 = $db->exec($sql2);
}
}
}
?>
As far as I can tell, all the imports are correct (Otherwise the modal wouldn't work at all, right?)
Here is the jquery in my footer:
<div id="links"></div>
<script>
function loadlink(){
$('#links').load('templates/sendMessage.php?userID=<?=$userInfo['uniqueid'];?>',function () {});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 10000);
</script>
--edit--
I suspect my issue is because the div is reloaded again while the modal is open, therefore breaking it because it is erasing the code the modal is in. I'm not sure how to combat this.
The code is not complete, but from what I can tell your ajax script should only send the content of the modal, not the whole modal, append() it in (or use html() if you want to remove the previous messages) <div class="modal-body"> and then show the modal. Now you are inserting the whole modal code inside the modal and get a babushka effect.
-- EDIT --
In your php script, return only the messages, not the modal html:
[...]
if($loop != 0) {
if(!empty($messages)) {
foreach($messages as $v) {
echo $v['Message'];
if($loop > 1) {
echo "<br><br>";
}
}
[...]
The in the footer
<!-- Modal -->
<div class="modal fade" id="memberModal" tabindex="-1" role="dialog" aria-labelledby="memberModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="memberModalLabel">Message from Administrators</h4>
</div>
<div class="modal-body">
// mesages will be inserted here
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script>
function loadlink(){
$('.modal-body').load('templates/sendMessage.php?userID=<?=$userInfo['uniqueid'];?>',function () {
// maybe add a condition to see if nothing is returned
// and not show it
$('#memberModal').modal('show');
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 10000);
</script>
I have the following js snipped withing a PHP var
$put_in_foot_js_ready .= "
$(document).on('click', '.playVideo', function() {
var vID = $(this).attr('data-vid');
$('body').append('<div id=\"gb_video\" class=\"modal fade\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\"><div class=\"modal-dialog modal-lg\"><div class=\"modal-content\"><div class=\"modal-body text-center\"><div class=\"pad5\"><button aria-label=\"Close\" data-dismiss=\"modal\" class=\"close mar10btm mar5topNeg\" type=\"button\"><span aria-hidden=\"true\">×</span></button></div><iframe src=\"https://www.youtube.com/embed/'+ vID +'?rel=0&showinfo=0&hd=1&autohide=1&color=white\" width=\"859\" height=\"483\" frameborder=\"0\" allowfullscreen></iframe></div></div></div></div>');
$('#gb_video').modal('show');
});
";
Everything works great, except the value of the vID within src is not interpreted, even though when I put it in console.log(vID) I see correct value. What am I missing here?
I think the easiest thing to do here is apply a better string type, which is an output buffer or use of HEREDOC (Example #2, but you will likely need some escaping on the $ characters). That way, you can write everything out normally. I prefer the output buffer:
ob_start();
?>
$(document).on('click', '.playVideo', function() {
var vID = $(this).attr('data-vid');
$('body').append('<div id="gb_video" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog modal-lg"><div class="modal-content"><div class="modal-body text-center"><div class="pad5"><button aria-label="Close" data-dismiss="modal" class="close mar10btm mar5topNeg" type="button"><span aria-hidden="true">×</span></button></div><iframe src="https://www.youtube.com/embed/'+ vID +'?rel=0&showinfo=0&hd=1&autohide=1&color=white" width="859" height="483" frameborder="0" allowfullscreen></iframe></div></div></div></div>');
$('#gb_video').modal('show');
});
<?php
$put_in_foot_js_ready .= ob_get_contents();
ob_end_clean();
I use smarty class and bootstrap, and have this html tag:
`<a class="close" href="#" data-confirm="Are you sure you want to delete {$item.name} item? " ></a`>
Where {$item.name} is item name,from database.
For modal window,using this Js code:
<script>
$(document).ready(function() {
$('a[data-confirm]').click(function(ev) {
var href = $(this).attr('href');
var cat = document.getElementById("catname").value;
if (!$('#dataConfirmModal').length) {
$('body').append('<div id="dataConfirmModal" class="modal fade" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><b></b><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-danger" id="dataConfirmOK">Delete</a></div></div></div></div>');
}
$('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
$('#dataConfirmOK').attr('href', href);
$('#dataConfirmModal').modal({show:true});
return false;
});
});
</script>
All is fine,modal working ,text that I add in data-confirm in tag shows and I get message like this :
Are you sure you want to delete Car item?
and,I try to be like this:
Are you sure you want to delete Car item?
I try with tags in data-confirmation,don't work,also try to made vairable var and show directly in js code,no result..
Thanks,
P
Why don't you use a span and replace the content inside the tag by this span.
Something like this:
<span id="delConfirmLabel" href=# > Are you sure you want to delete
<b> {$item.name} </b> item?</span>
now, replace the attribute "data-confirm" with delConfirmLabel's content.