I want to use JQuery noConflict() in my load page.
This is my javascript to load the page:
<script src="plugins/jQuery/jQuery-2.1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
// initial page load
$('#area').load('pages/home/home.php');
$("ul.sidebar-menu li a.Dashboard").addClass("hidups");
$('ul.sidebar-menu li a').click(function() {
var page = $(this).attr('href');
document.title = "Admin | " + page;
$("ul.sidebar-menu li a").removeClass("hidups");
$(this).addClass("hidups");
$('#area').load('pages/' + page + '/' + page + '.php', '', function(response, status, xhr) {
if (status == 'error') {
$("#area").load('pages/error/404.php');
}
});
return false;
});
});
</script>
and this is script on my page after load (product.php) :
<link rel="stylesheet" href="build/css/alertify.core.css" />
<link rel="stylesheet" href="build/css/alertify.default.css" id="toggleCSS" />
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<style type="text/css">
.modal-body2 {
height: 300px;
overflow-y: scroll;
padding: 15px;
position: relative;
}
.centerd {
bottom: 0;
left: 0;
margin: auto;
position: static;
right: 0;
top: 0;
width: 50%;
}
</style>
<script src="plugins/jQuery/jquery-1.8.3.min.js"></script>
<script src="build/js/alertify.min.js"></script>
<script type="text/javascript" src="plugins/tinymce/tinymce.min.js"</script>
<script type="text/javascript" src="pages/produk/aplikasi.js"></script>
<?php
// memanggil berkas koneksi.php
require '../../config/koneksi.php';
?>
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
Jammin
<small>Data</small>
</h1>
<ol class="breadcrumb">
<li><i class="fa fa-dashboard"></i> Home</li>
<li>Tables</li>
<li class="active">Data Produk</li>
</ol>
</section>
<!-- tempat untuk menampilkan data mahasiswa -->
<section class="content">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-header">
<h3 class="box-title">Data Produk</h3>
<a href="#myModal" id="0" class="tambah btn btn-default" data-toggle="modal" style="color:black">
Tambah Data </a>
<button type="button" class="btn btn-danger" id="delete-all">
<i class="icon-plus"></i> Hapus Semua Data
</button>
</div>
<div class="box-body">
<div id="data-produk"> </div>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- awal untuk modal dialog -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" 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="myModalLabel">Tambah Data Produk</h3>
</div>
<div class="modal-body2">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
<button id="simpan-produk" class="btn btn-success" data-dismiss="modal" aria-hidden="true" >Simpan Data</button>
</div>
</div>
</div>
</div>
But this won't work because JQuery.min has "crashed". I think I should use jquery.noConflict to fix it but I don't know how to use jquery.noConflict to my load page.
There's a few ways of approaching this, my favourite is a closure.
;(function($){
//$ is now safe here eg. $.('.selector');
})(jQuery);
Or
Just use $.noConflict before using the other libraries that require the dollar sign such as prototype
OR
Just use jQuery instead of $ everywhere, this will make your code less portable and less pretty :)
Use this for jQuerynoConflict
<script type="text/javascript">
JQuery(document).ready(function($) {
// initial page load
JQuery('#area').load('pages/home/home.php');
JQuery("ul.sidebar-menu li a.Dashboard").addClass("hidups");
JQuery('ul.sidebar-menu li a').click(function(){
var page = JQuery(this).attr('href');
document.title="Admin | "+page;
JQuery("ul.sidebar-menu li a").removeClass("hidups");
JQuery(this).addClass("hidups");
JQuery('#area').load('pages/'+page+'/'+ page +'.php' , '', function(response, status, xhr) {
if (status == 'error') {
JQuery("#area").load('pages/error/404.php');
}
});
return false;
});
});
</script>
Related
I'm trying to add a clickable helping zone in my Bootstrap 5 accordion, as you can see in this screenshot :
I want the user to be capable of clicking the question mark, that will open a Bootstrap modal with some helping text.
However, when doing so, the modal is opening but the accordion is collapsing (or opening if closed).
I've used the following JavaScript code to achieve this goal :
const categHelpBtns = document.querySelectorAll('.categ_help');
for (let i = 0; i < categHelpBtns.length; i++) {
const btn = categHelpBtns[i];
if(btn) {
btn.addEventListener("click", function(e) {
e.stopPropagation();
const modal = document.getElementById(btn.dataset.modalId)
if(modal) {
new bootstrap.Modal(modal).show();
}
});
}
}
Any clues how I can prevent the accordion to collapse/open when clicking the help icon ?
const categHelpBtns = document.querySelectorAll('.categ_help');
for (let i = 0; i < categHelpBtns.length; i++) {
const btn = categHelpBtns[i];
if(btn) {
btn.addEventListener("click", function(e) {
e.stopPropagation();
const modal = document.getElementById(btn.dataset.modalId)
if(modal) {
new bootstrap.Modal(modal).show();
}
});
}
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
</head>
<body>
<div class="accordion">
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button onglet-header" type="button" data-bs-toggle="collapse" data-bs-target="#nom_pays" aria-expanded="true" aria-controls="nom_pays">
Accordion <i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true"></i>
</button>
</h2>
<div id="nom_pays" class="accordion-collapse collapse show" aria-labelledby="nom_pays_header" data-bs-parent="#fiche_bois">
<div class="accordion-body">
Accordion Body
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Data</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"/>
</div>
<div class="modal-body">
Modal body
</div>
</div>
</div>
</div>
</body>
</html>
You do not have to write extra JavaScript to trigger modal.
You can easily do it with the bootstrap html attributes.
In order to trigger your modal, by clicking the question mark
Replace:
<i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true"></i>
With:
<i class="fas fa-question-circle categ_help" data-modal-id="modal" aria-hidden="true" data-bs-toggle="modal" data-bs-target="#modal"></i>
So I have a start.html that allows you to select how many players you want to play and add their names into an input.
I am trying to grab that input and place it into the innerHTML of the index pager which is where a user selects truth or dare to start the game. The button click for the btnStart refuses to switch to the index.html.
here is my play.js
function readyPlayer(){
var input1 = document.getElementById("player1Name");
sessionStorage.setItem("player1", input1.value());
var player1Text = sessionStorage.getItem("player1");
document.getElementById('playerText').innerHTML = player1Text + ", you're up!";
location.href = 'index.html';
}
Here is my start.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Truth or Dare</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<div style="font-size: 20px;">
<nav class="navbar navbar-light navbar-expand-md navigation-clean" style="background: rgb(4,2,2);">
<div class="container"><a class="navbar-brand" href="#" style="border-color: rgb(10,10,10);color: rgb(247,242,242);">Truth or Dare</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div
class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto"></ul>
</div>
</div>
</nav>
<h1 class="text-center" style="margin-top: 100px;">How many players are going to play?</h1>
<div class="text-center" style="height: 50px;padding-top: 0px;margin: 0;margin-top: 50px;border-style: none;">
<button id="btn1" onclick="select1Player();" class="btn btn-primary" type="button" style="height: 50px;width: 100px;background: rgb(7,1,1);border-style: none;">1</button>
<button id="btn2" onclick="select2Player();" class="btn btn-primary" type="button" style="height: 50px;width: 100px;background: rgb(8,12,16);margin-left: 40px;border-style: none;">2</button>
<button id="btn3" onclick="select3Player();" class="btn btn-primary" type="button" style="height: 50px;width: 100px;background: rgb(8,12,16);margin-left: 40px;border-style: none;">3</button>
<button id="btn4" onclick="select4Player();" class="btn btn-primary" type="button" style="height: 50px;width: 100px;background: rgb(8,12,16);margin-left: 40px;border-style: none;">4</button>
</div>
<div style="height: 50px;">
<h1 id="playerText" class="text-center" style="font-size: 30px;margin-top: 30px;display:none;">Enter the player's name(s)</h1>
</div>
<div id="player1Div" class="text-center" style="height: 50px;margin-top: 1px;display:none;">
<h3 class="text-center d-inline-block" style="margin-right: 15px;display:none;">Player 1:</h3>
<input id="player1Name" type="text"></div>
<div id="player2Div" class="text-center" style="height: 50px;margin-top: 1px;display:none;">
<h3 class="d-inline-block" style="margin-right: 15px;">Player 2:</h3>
<input id="player2Name" type="text"></div>
<div id="player3Div" class="text-center" style="height: 50px;margin-top: 1px;display:none;">
<h3 class="d-inline-block" style="margin-right: 15px;">Player 3:</h3>
<input id="player3Name" type="text"></div>
<div id="player4Div" class="text-center" style="height: 50px;margin-top: 1px;display:none;">
<h3 class="d-inline-block" style="margin-right: 15px;">Player 4:</h3>
<input id="player4Name" type="text"></div>
<div id="divStart" class="text-center" style="height: 50px; margin-top: 1px;display:none;">
<input id="btnStart" onclick="readyPlayer();" type="button" value="Start" class="btn btn-primary" style="height: 50px;width: 150px;background: rgb(8,12,16);margin-left: 40px;border-style: none;"></input>
</div>
<script src="player.js"></script>
<script src="play.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Truth or Dare</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-light navbar-expand-md navigation-clean" style="background: rgb(4,2,2);">
<div class="container"><a class="navbar-brand" href="#" style="border-color: rgb(10,10,10);color: rgb(247,242,242);">Truth or Dare</a>
<button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span>
</button>
<div
class="collapse navbar-collapse" id="navcol-1">
<ul class="nav navbar-nav ml-auto"></ul>
</div>
</div>
</nav>
<!-- Buttons for selecting truth or dare OnClick -->
<h1 class="text-center" style="margin-top: 150px;">Player, you're up!</h1>
<div class="text-center" onclick="location.href='truth.html'" style="height: 50px;padding-top: 0px;margin-top: 50px;">
<button class="btn btn-primary" type="button" style="height: 50px;width: 230px;background: rgb(8,12,16);">TRUTH</button>
</div>
<div style="height: 50px;">
<h1 class="text-center">or</h1>
</div>
<div class="text-center" onclick="location.href='dare.html'" style="height: 50px;margin-top: 5px;">
<button class="btn btn-primary" type="button" style="height: 50px;width: 230px;background: rgb(7,1,1);">DARE</button>
</div>
<script src="player.js"></script>
<script src="play.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>
You might be able to make it work by using:
location.href = '/index.html';
// or
window.location.href = '/index.html';
instead of:
location.href = 'index.html';
Might have something to do with it being a relative route?
Above reply did answer the question, anytime anything wrong with JavaScript first check the console for any obvious errors withing JavaScript (browser compatability issue).
On a sidebar approach in past when I had java script issue,I added an anchor tag <a href, instead of button ( changed the anchor's style to look like button ). If it helps someone.
The best way to do this would be to store it as a variable in the URL, but you seem to be using a local file, so I'm not 100% sure if that works.
The next way I can think of is cake- no, cookies. Here's some important pieces of code directly copy and pasted from w3schools at https://www.w3schools.com/js/js_cookies.asp . I did not create any of this code.
//This returns a cookie with the name equal to the parameter cname
function getCookie(cname) {
var name = cname + "=";
var decodedCookie = decodeURIComponent(document.cookie);
var ca = decodedCookie.split(';');
for(var i = 0; i <ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
//sets a cookie named the first parameter with the value of the second parameter lasting the third parameter long
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
I'm fetching deliveries from Mysql with PHP and When the user clicks on the Accept button I want to show a form and if the user click Revision I want to show another form. I know how to this.
The problem is when there are multiple deliveries it stops working. because we cannot have multiple id with the same name. so I added the delivery id with the id name. but it still doesn't work.
How can I solve this?
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<?php
while ($delivery = mysqli_fetch_assoc($deliveries)) { ?>
<button class="btn btn-primary w-md waves-effect waves-light mb-2 mr-3" id="accept_job_<?php echo $delivery['applicant_id']; ?>">Accept & Review Job</button>
<button class="btn btn-light w-md waves-effect waves-light mb-2" id="request_revision_<?php echo $delivery['applicant_id']; ?>">Request Revision</button>
<div class="review_seller mt-4" id="review_seller" style="display: none;">
<!-- -------------
Some Content
----------------- -->
</div>
<div class="revision_details mt-4" id="revision_details" style="display: none;">
<!-- -------------
Some Content
----------------- -->
</div>
<script>
$(document).ready(function() {
$('#accept_job_<?php echo $delivery['applicant_id']; ?>').click(function() {
$('#review_seller').toggle();
$('#revision_details').hide();
});
$('#request_revision_<?php echo $delivery['applicant_id']; ?>').click(function() {
$('#revision_details').toggle();
$('#review_seller').hide();
});
});
</script>
<?php } ?>
You can combine .parent() and .find() to get the elements/row that you want to perform the methods toggle() and hide() on, the following is a working snippet, notice that I removed the ID and PHP code also I added a wrapping div with row class:
$(document).ready(function() {
$('.row .review_seller-btn').click(function() {
$(this).parent().find('.review_seller').toggle();
$(this).parent().find('.revision_details').hide();
});
$('.row .revision_details-btn').click(function() {
$(this).parent().find('.revision_details').toggle();
$(this).parent().find('.review_seller').hide();
});
});
.row {
border: 1px solid #000;
margin: 10px 0;
padding: 10px;
height: 200px;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div class="row">
<button class="btn btn-primary w-md waves-effect waves-light mb-2 mr-3 review_seller-btn" id="accept_job_<?php echo $delivery['applicant_id']; ?>">Accept & Review Job</button>
<button class="btn btn-light w-md waves-effect waves-light mb-2 revision_details-btn">Request Revision</button>
<div class="review_seller mt-4" id="review_seller" style="display: none;">
review_seller
</div>
<div class="revision_details mt-4" id="revision_details" style="display: none;" >
revision_details
</div>
</div>
<div class="row">
<button class="btn btn-primary w-md waves-effect waves-light mb-2 mr-3 review_seller-btn" id="accept_job_<?php echo $delivery['applicant_id']; ?>">Accept & Review Job</button>
<button class="btn btn-light w-md waves-effect waves-light mb-2 revision_details-btn">Request Revision</button>
<div class="review_seller mt-4" id="review_seller" style="display: none;">
review_seller
</div>
<div class="revision_details mt-4" id="revision_details" style="display: none;" >
revision_details
</div>
</div>
You can hide content for all feed then display related content.
$(document).ready(function () {
$("form").submit(function () {
return false;
});
$('.newsFeedButtons .btn').on('click', function () {
$('.content-feed').hide();
$elem=$(this);
btnId=$elem.attr('id');
switch (btnId) {
case 'searchbtn':
$('#newsResult').show();
break;
case 'twitterbtn':
$('#twitterDIV').show();
break;
}
});
});
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="newsFeedButtons">
<button class="btn" id="searchbtn">Search</button>
<button class="btn" id="cryptobtn">Crypto</button>
<button class="btn" id="twitterbtn">Twitter</button>
</div>
<div id="twitterDIV" class="content-feed" style="display: none;">
<a class="twitter-timeline" data-width="550" data-
height="400" href="https://twitter.com/Bitcoin?
ref_src=twsrc%5Etfw">Tweets by Bitcoin</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div class="row">
<div id="newsResult" class="content-feed">Text</div>
</div>
I have a php page. I try to open a modal with the buttons in a list (created by loop). In this list there are many items with different parameters and several buttons for each section of the list. With the button "Fahrzeuganwendungen", My following code opens a modal covering entire page, it is transparent, no header / footer / ... sections. It contains the data only:
<?php
...
?>
<div class='results'>
<input type="hidden" class="test1" name="metin2" value="<?php echo $parcano;?>" />
<input type="hidden" class="brand" name="brandname" value="<?php echo $marka;?>" />
<input type="hidden" class="artnr" name="skunr" value="<?php echo $parcano;?>" />
<button class="btn_mrt"><i class="fa fa-search" style="color:lightseagreen;"></i> weitere suche für <?php echo $parcano;?></button>
<button class="btn_additionalnumbers"><i class="far fa-list-alt" style="color:lightseagreen;"></i> zusätzliche Nummern</button>
<button class="btn_vehicles"><i class="fas fa-car" style="color:lightseagreen;"></i> Fahrzeuganwendungen</button>
<div class="additionalnumbers" name="additionalnumbers" style="background-color: #aaa; border: 0px solid green; padding: 2px; margin: 10px;"></div>
<div class="container">
<h2>Activate Modal with JavaScript</h2>
<!-- Trigger the modal with a button: <button type="button" class="btn_vehicles" id="myBtn">Open Modal</button> -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
...
?>
<script>
$(function() { // when page loads
$(".btn_mrt").on("click", function() { // click any class="single_add_to_cart_button button alt"
var metin2 = $(this).closest('.results').find('input[name="metin2"]').val();
$('input[name=metin]').val(metin2);
$.post('/wp-content/plugins/ajax-test/SearchByNumberNew.php', {yazi2: metin2}, function (gelen_cevap) {
$('.cevap').html(gelen_cevap);
});
});
});
$(function() { // when page loads
$(".btn_additionalnumbers").on("click", function() { // click any class="single_add_to_cart_button button alt"
var brandname = $(this).closest('.results').find('input[name="brandname"]').val();
var skunr = $(this).closest('.results').find('input[name="skunr"]').val();
var numberdiv = "additionalnumbers" + brandname + skunr;
var $nd = $(this).closest('.results').find('div.additionalnumbers');
$.post('/wp-content/plugins/ajax-test/GetAdditionalNumbers.php', {brand: brandname, sku: skunr}, function (gelen_cevap2) {
$nd.html(gelen_cevap2);
});
});
});
//$(document).ready(function(){
$(function() { // when page loads
$(".btn_vehicles").on("click", function() {
var brandname = $(this).closest('.results').find('input[name="brandname"]').val();
var skunr = $(this).closest('.results').find('input[name="skunr"]').val();
$.post('/wp-content/plugins/ajax-test/GetArticleVehicles.php', {brand: brandname, sku: skunr}, function (gelen_cevap2) {
$("#myModal").modal().html(gelen_cevap2);
});
});
});
</script>
I have the following code in the <head>...</head> of course:
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
What is wrong here? I would appeciate for your kind help.
Many thanks,
Murat
The problem is here
$("#myModal").modal().html(gelen_cevap2);
You're replacing the content of the entire modal. Try something like this
$("#myModal .modal-body").html('<h1>test</h1>');
$("#myModal").modal();
These days I am studying ajax and ace editor, I want to read a url file and display it on ace editor, I don't know how to get it when the url is https, do you have a good method?
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/cerulean/bootstrap.min.css" media="all"/>
<style>
#code1,#code2{
height:800px;
font-size:14px;
border-bottom:2px solid #999;
}
ul.app_cat_ul{
padding:0px;
list-style:none;
overflow:hidden;
}
ul.app_cat_ul li a:hover{
background-color:#EEE;
}
/* nav */
ul.nav_ul{
margin:0px;
padding:0px;
list-style:none;
overflow:hidden;
}
ul.nav_ul li{
float:left;
margin-right:3px;
}
ul.nav_ul li a{
padding:12px;
display:block;
color:#555;
background-color:#FFF;
border:1px solid #EEE;
}
ul.nav_ul li a:hover{
background-color:#EEE;
}
ul.ul_buttons li a{
margin:5px 0px;
color:#555;
background-color:#FFF;
border:1px solid #C0C0C0;
}
</style>
</head>
<body>
<div class="header">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<h1>ACE ajax test</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="well well-sm">
<form class="form-inline text-left">
<fieldset>
<div class="form-group buttons_div">
<div class="col-md-12">
<ul class="nav_ul ul_buttons">
<li><a id="load_url" href="#">Load Url</a></li>
<li><a id="browse" href="#">Browse</a></li>
</ul>
</div>
</div>
<input style="display:none;" id="file" name="file" class="btn btn-default" type="file">
</fieldset>
</form>
<div class="row">
<div class="col-md-12 div_code1">
<div class="h_text">Enter here:</div>
<div id="code1"></div>
<div id="code2" style="display:none"></div>
</div>
</div>
</div><!-- Modal -->
<div class="modal fade" id="url_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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="myModalLabel">Enter Url</h4>
</div>
<div class="modal-body">
<input id="url" name="url" type="text" placeholder="Enter full url" class="form-control input-md">
</div>
<div class="modal-footer">
<button data-dismiss="modal" id="load" name="load" class="btn btn-success">Load</button>
<button data-dismiss="modal" id="cancel" name="cancel" class="btn btn-danger">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<div class="well well-sm data_tb text-left" style="overflow:auto;display:none;"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zclip/1.1.2/jquery.zclip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ace.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.3/ext-language_tools.js"></script>
<script>
$(document).ready(function(e) {
ace.require("ace/ext/language_tools");
var editorAce1 = ace.edit("code1");
editorAce1.focus();
editorAce1.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
editorAce1.setTheme("ace/theme/chrome");
editorAce1.getSession().setMode("ace/mode/plain_text");
var editorAce2 = ace.edit("code2");
editorAce2.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true
});
editorAce2.setTheme("ace/theme/chrome");
editorAce2.getSession().setMode("ace/mode/html");
editorAce2.getSession().setUseWorker(false);
$("#load_url").click(function(e) {
e.preventDefault();
$("#url_modal").modal({backdrop : false});
});
$("#load").click(function(e) {
e.preventDefault();
url = $.trim($("#url").val());
if(url != "")
{
editorAce1.getSession().setUseWorker(false);
editorAce1.setValue("Please wait while loading file from url.");
$.ajax({
type : "POST",
url : "/get_data.php",
dataType: "text",
data : {"url" : url},
success : function(data)
{
if(data == "file_not_found")
{
editorAce1.setValue("Unable to load file from url!");
}else
{
editorAce1.getSession().setUseWorker(true);
editorAce1.setValue(data);
}
},
error : function()
{
editorAce1.setValue("Unable to load file from url!");
}
});
}
});
$("#browse").click(function(e) {
e.preventDefault();
$("#file").click();
});
function read_file(e)
{
f = e.target.files[0];
if(f)
{
r = new FileReader();
r.onload = function(e)
{
var contents = e.target.result;
var file_name = f.name;
editorAce1.getSession().setUseWorker(true);
editorAce1.setValue(contents);
}
r.readAsText(f);
}
else
{
editorAce1.getSession().setUseWorker(false);
editorAce1.setValue("Unable to load file!");
}
}
$("#file").change(function(e) {
e.preventDefault();
read_file(e);
});
themelist = ace.require("ace/ext/themelist");
theme = "";
$(themelist.themes).each(function(key, value) {
theme += '<option value="' + value.name + '">' + value.caption + '</option>';
});
$("#themes").append(theme);
$("#themes").val("chrome");
$("#font_size").val("14");
$("#themes,#font_size").change(function(e) {
setTheme();
editorAce1.focus();
});
});
</script>
</body>
</html>
The userface pic
Core code pic
Most of codes have worked well. Could you help me write the get_data.php file for me, let the page work. Thanks.