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();
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>
I am in the creation of a modal window but this window has something very particular and it is that I only want it to be displayed at the moment of logging in, that is, after the user enters their credentials.
At the moment I am presenting an error and it is that the window is being shown in all the views including the del login.php and the del index.php which is where I only plan to show it. I emphasize again I am only interested in showing it in the window index.phpI share below the code I have to show my modal window.
Index.php
<html lang="es">
<head>
<title><?php echo ($data['title']); ?></title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
$('#basicModal').modal({ show: false,
backdrop: 'static',
keyboard: false});
$('#basicModal').modal('show');
});
</script>
</head>
<body>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" 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="myModalLabel">Title test
</div>
<div class="modal-body">
<h3>Test</h3>
<h3>Text test</h3>
</br>
</div>
<div class="modal-footer">
<button type="button" class="EnviarContactoDetalleProducto btn-lg" data-dismiss="modal">Accept</button>
</div>
</div>
</div>
</div>
<div class="cuerpo">
<div id="content-area">
</div>
</div>
</body>
</html>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
The above is the code that I am using to display my modal window in index.php but this window does show up in the other views I have.
As you can see, the modal window is shown without problem, the problem is that it is being shown in all views, I hope someone can give me some guidance to solve this problem.
UPDATE 1:
This is what login.php looks like
<div id="cuerpo_pequeno">
<div class="espacio-medio"></div>
<div class="espacio-pequeno"></div>
<div class="">
<form method="post">
<div class="form-group">
<label for="username">User:</label>
<input id="username" type="text" name="username" class="form-control" placeholder="Usuario" required/>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input id="password" type="password" name="password" class="form-control" placeholder="Contraseña" required/>
</div>
<a id="recuperar_password">Forgot password</a><br>
<div class="centrar">
<button class="EnviarContactoDetalleProducto btn-lg" id="login">Enter</button>
</div>
<br/>
</form>
<br>
<div id="mensaje"></div>
</div>
<?php
$loginView = new LoginVista();
if(isset($_POST['username']) && $_POST['username'] != '' && isset($_POST['password']) && $_POST['password'] != ''){
$username = $_POST['username'];
$password = $_POST['password'];
$result = $loginView->validarCredenciales($username, $password);
}
?>
</div>
<br/>
<br/>
Modelos.php
<?php
include ("modelo/LoginModelo.php");
include ("modelo/FacturasModelo.php");
?>
Controladores.php
<?php
include ('controlador/Controlador.php');
include ('controlador/LoginControlador.php');
include ('controlador/FacturasControlador.php');
?>
Vistas.php
<?php
include ('vista/LoginVista.php');
include ('vista/FacturasVista.php');
?>
After going back and forth I realized that everything goes through the controller, that's where I have to identify if I want to show the window or not, creating a variable in the array that I return.
public function index()
{
if (isset($_SESSION['username'])){
$data['content'] = 'vista/home.php';
$data['title'] = 'Facturas';
// Mostrar en índice
$data['modal'] = true;
return $data;
}
else{
$loginController = new LoginControlador(new LoginModelo());
$data['content'] = $loginController->mostrarVista();
$data['title'] = 'Inicio';
// No mostrar en login
$data['modal'] = false;
return $data;
}
}
Then in the view analyze the variable
<html>
<!-- more code -->
<?php
// I analyze the variable to show window
if($data['modal']) {
?>
<script>
document.addEventListener("DOMContentLoaded", function () {
$('#basicModal').modal({ show: false,
backdrop: 'static',
keyboard: false});
$('#basicModal').modal('show');
});
</script>
<?php
} // End of if for modal window
?>
<!-- more code -->
Hi there can I have this problem, I have this file and when I try to edit the events I add a script of events at the end to display the events on calendar as soon as I do that the events that are on the left side I cant drop them anymore
enter image description here
As you can see on the picture this events works fine before I add this script to the end of file:
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
// defaultDate: '2018-03-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event ',
start: '2018-09-01'
},
]
});
});
</script>
So this is my file:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="../../assets/images/favicon.png">
<title></title>
<!-- Custom CSS -->
<link href="../../assets/libs/fullcalendar/dist/fullcalendar.min.css" rel="stylesheet" />
<link href="../../assets/extra-libs/calendar/calendar.css" rel="stylesheet" />
<!-- Custom CSS -->
<link href="../../dist/css/style.min.css" rel="stylesheet">
</head>
<body>
<div id="main-wrapper">
<aside class="left-sidebar">
<!-- Sidebar scroll-->
<div class="scroll-sidebar">
<!-- Sidebar navigation-->
<nav class="sidebar-nav">
<li class="sidebar-item">
<a class="sidebar-link has-arrow waves-effect waves-dark" href="javascript:void(0)
" aria-expanded="false">
<i class="icon-Error-404Window"></i>
<span class="hide-menu">Error Pages</span>
</a>
<ul aria-expanded="false" class="collapse first-level">
</ul>
</li>
</ul>
</nav>
<!-- End Sidebar navigation -->
</div>
<!-- End Sidebar scroll-->
</aside>
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-5 align-self-center">
<h4 class="page-title">Calendar</h4>
<div class="d-flex align-items-center">
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="">
<div class="row">
<div class="col-lg-3 border-right p-r-0">
<div class="card-body border-bottom">
<h4 class="card-title m-t-10">Drag & Drop Event</h4>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div id="calendar-events" class="">
<div class="calendar-events m-b-20" data-class="bg-info"><i class="fa fa-circle text-info m-r-10"></i>Event One</div>
<div class="calendar-events m-b-20" data-class="bg-success"><i class="fa fa-circle text-success m-r-10"></i> Event Two</div>
<div class="calendar-events m-b-20" data-class="bg-danger"><i class="fa fa-circle text-danger m-r-10"></i>Event Three</div>
<div class="calendar-events m-b-20" data-class="bg-warning"><i class="fa fa-circle text-warning m-r-10"></i>Event Four</div>
</div>
<!-- checkbox -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="drop-remove">
<label class="custom-control-label" for="drop-remove">Remove after drop</label>
</div>
<a href="javascript:void(0)" data-toggle="modal" data-target="#add-new-event" class="btn m-t-20 btn-info btn-block waves-effect waves-light">
<i class="ti-plus"></i> Add New Event
</a>
</div>
</div>
</div>
</div>
<div class="col-lg-9">
<div class="card-body b-l calender-sidebar">
<div id="calendar"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- BEGIN MODAL -->
<div class="modal none-border" id="my-event">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><strong>Add Event</strong></h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body"></div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success save-event waves-effect waves-light">Create event</button>
<button type="button" class="btn btn-danger delete-event waves-effect waves-light" data-dismiss="modal">Delete</button>
</div>
</div>
</div>
</div>
<!-- Modal Add Category -->
<div class="modal fade none-border" id="add-new-event">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><strong>Add</strong> a category</h4>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form>
<div class="row">
<div class="col-md-6">
<label class="control-label">Category Name</label>
<input class="form-control form-white" placeholder="Enter name" type="text" name="category-name" />
</div>
<div class="col-md-6">
<label class="control-label">Choose Category Color</label>
<select class="form-control form-white" data-placeholder="Choose a color..." name="category-color">
<option value="success">Success</option>
<option value="danger">Danger</option>
<option value="info">Info</option>
<option value="primary">Primary</option>
<option value="warning">Warning</option>
<option value="inverse">Inverse</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger waves-effect waves-light save-category" data-dismiss="modal">Save</button>
<button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- END MODAL -->
</div>
</div>
</div>
<script src="../../assets/libs/jquery/dist/jquery.min.js"></script>
<script src="../../assets/extra-libs/taskboard/js/jquery.ui.touch-punch-improved.js"></script>
<script src="../../assets/extra-libs/taskboard/js/jquery-ui.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="../../assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="../../assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- apps -->
<script src="../../dist/js/app.min.js"></script>
<script src="../../dist/js/app.init.boxed.js"></script>
<script src="../../dist/js/app-style-switcher.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="../../assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="../../assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="../../dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="../../dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="../../dist/js/custom.min.js"></script>
<!--This page JavaScript -->
<script src="../../assets/libs/moment/min/moment.min.js"></script>
<script src="../../assets/libs/fullcalendar/dist/fullcalendar.min.js"></script>
<script src="../../dist/js/pages/calendar/cal-init.js"></script>
<script>
</script>
<script>
$(document).ready(function() {
$('#calendar').fullCalendar({
// defaultDate: '2018-03-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
events: [
{
title: 'All Day Event',
start: '2018-09-01'
},
]
});
});
</script>
</body>
</html>
So this is my code sorry I don't know how to put my local files on snipet, I just thought maybe someone when sees the code would have an idea and help me I would really appreciate it
try to use this code instead (taken from https://fullcalendar.io/docs/external-dragging-demo, I just updated it according to your ids and classes names):
$(function() {
// initialize the external events
// -----------------------------------------------------------------
$('#calendar-events .calendar-events').each(function() {
// store data so the calendar knows to render an event upon drop
$(this).data('event', {
title: $.trim($(this).text()), // use the element's text as the event title
stick: true // maintain when user navigates (see docs on the renderEvent method)
});
// make the event draggable using jQuery UI
$(this).draggable({
zIndex: 999,
revert: true, // will cause the event to go back to its
revertDuration: 0 // original position after the drag
});
});
// initialize the calendar
// -----------------------------------------------------------------
$(document).ready(function() {
$('#calendar').fullCalendar({
// defaultDate: '2018-03-12',
editable: true,
eventLimit: true, // allow "more" link when too many events
droppable: true,
events: [
{
title: 'All Day Event ',
start: '2018-09-01'
},
]
});
});
drop: function() {
// is the "remove after drop" checkbox checked?
if ($('#drop-remove').is(':checked')) {
// if so, remove the element from the "Draggable Events" list
$(this).remove();
}
}
});
});
As a js noob, I'm fighting a struggle width the load of content in a slider. I have 4 buttons. When clicking a button, I want a slider to open and content to fade in. When I click another button, I want the slider to stay open but content needs to fade out and new content to fade in.
I have this:
HTML
<div class="standorte-wrapper">
<div class="panel left">
<div class="pan-item tl">
<button href="#" id="expand" class="show-hide">TOGGLE</button>
</div><!--
--><div class="pan-item tr">
<button></button>
</div><!--
--><div class="pan-item bl">
<button></button>
</div><!--
--><div class="pan-item br">
<button></button>
</div>
</div>
<div class="panel right">
<div class="close-button">
<a href="#" id="close" class="close">
<i class="icon-cancel"></i></a>
</div>
<h2>Everything you need to know</h2><!-- CONTENT TO REFRESH -->
</div>
</div>
JS
$(document).ready(function(){
$("#expand").on("click", function(){
$(".standorte-wrapper").toggleClass("expand");
});
$("#close").on("click", function(){
$(".standorte-wrapper").toggleClass("expand");
});
});
That gives me this result, opening and clossing
How can I add the functions I wish as written on top? De content I load in the panel are .php files. file1.php, file2.php, ...
After our collaboration on Github I post here what we did so far
https://github.com/neodev2/ajax-slide-panel
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script>
$(document).ready(function(){
var ajaxUrls = [
'snip1.html',
'snip2.html',
'snip3.html',
'snip4.html'
];
var ajaxFiles = [];
for(var i=0; i<ajaxUrls.length; i++){
$.ajax({
method: 'GET',
url: ajaxUrls[i],
success: function(data){
//console.log(data);
ajaxFiles.push(data);
}
});
}
$('.pan-item > button').on('click', function(){
if($('.panel.left').hasClass('open')){
//alert('already open');
}else{
$('.panel.left').addClass('open');
$('.standorte-wrapper').addClass('expand');
}
$('#php-content').html(ajaxFiles[$(this).attr('data-ajaxFile')]);
});
$('#close').on('click', function(){
$('.panel.left').removeClass('open');
$('.standorte-wrapper').removeClass('expand');
});
});
</script>
<title></title>
</head>
<body>
<div class="standorte-wrapper">
<div class="panel left">
<div class="pan-item tl">
<button data-ajaxfile="0">X</button>
</div>
<div class="pan-item tr">
<button data-ajaxfile="1">X</button>
</div>
<div class="pan-item bl">
<button data-ajaxfile="2">X</button>
</div>
<div class="pan-item br">
<button data-ajaxfile="3">X</button>
</div>
</div>
<div class="panel right">
<div class="close-button">
<a class="close" href="#" id="close"><i class="icon-cancel">X</i></a>
</div>
<div>
<h2>Everything you need to know</h2>
<div id="php-content"></div>
</div>
</div><span class="clear"></span>
</div>
</body>
</html>
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>