I have a page that I have it split in half. The left side will have the text hyperlinks or buttons, and on the right side I need to display the results without page refresh. I'm hoping that bootstrap has something like this but have not been able to find it. Any help will greatly be appreciated.
Bootstrap doesn't provide AJAX calls, it's more for styling your site web. For this, you need to check the jQuery AJAX documentation.
Edit
Here's a simple example to make AJAX calls.
index.php (Basic HTML code)
<div class="container">
<div class="row">
<div class="col-md-6">
<button id="cats" data-animal="cats" class="btn btn-default">Text on cats</button>
<button id="dogs" data-animal="dogs" class="btn btn-default">Text on dogs</button>
</div>
<div class="col-md-6">
<div id="results"></div>
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
script.js (Script where the AJAX call will be made)
$(document).ready(function() {
$("button").on('click', function(e) {
e.preventDefault();
var $this = $(this),
animal = $this.data('animal');
$.ajax({
type: "post",
url: "getAnimal.php",
dataType: "html",
data: { pet : animal },
success: function(data) {
$("#results").html('').html(data);
}
});
});
});
getAnimal.php (PHP script called by AJAX)
<?php
$animal = $_POST['pet'];
if($animal == "cats") {
echo "You clicked on cats!";
}
else if($animal == "dogs") {
echo "You clicked on dogs!";
}
Are these links all in the same domain? If so, it's not too hard to fetch the content at each URL using jQuery's ajax API.
Related
In my project, I use the seaStBt button to open a search dialog.
I use AJAX to fetch data from the DB after I confirm the search dialog, which contains search conditions, and this data updates the idcCstmRId div successfully.
Here is the js code:
<script>
$(document).ready(function()
{
$('#idcCstmRId').on("dblclick","#bbs td",function(){......});
$('#seaStBt').click(function(){
$('#dlgSea').dialog("open");
});
$('#seaBt').click(function(){
var seaSlt1 = $('#seaSlt1').val();
$.ajax({
dataType:'html',
type:"POST",
url:"get_ajax_csc.php",
data: {seaSlt1:seaSlt1},
success:function(data)
{
$('#idcCstmRId').html(data);
$('#dlgSea').dialog("destroy").remove();
}
});
});
......
}
</script>
Here is html code:
<div id="firDiv">
<?php
echo '<table border=1px style="width:100%" id="bbs">';
.......
?>
<div class="main_title" id="mnTlt">
<input type="button" id="seaStBt" value="search">
</div>
<div id="dlgSea" >
<input type="submit" value="confirm" id="seaBt" />
</div>
<div class="idcCstmRqst" id="idcCstmRId"></div>
Here is get_ajax_csc.php code:
if(isset($_POST['seaSlt1']))
{
include("DB.php");
$seaOne=$_POST['seaSlt1'];
echo '<table border=1px style="width:100%" id="bbs">';
......
}
The problem is before fetching data from the DB, the seaStBt button displays search the dialog. But after fetching data, and idcCstmRId div updates successfully, the seaStBt button does not work any more. The search dialog does not show after clicking the seaStBt button.
Perhaps the AJAX changes the DOM, but seaStBt button sees does not see these changes?
I have no idea, who can help me ?
Problem could be with .remove() method.
jQuery docs says .remove() takes elements out of the DOM, so you are removing #dlgSea...
Are you saying you want to remove the click event from #seaStBt after the results are returned? If so, I believe you can do this with:
$('#seaStBt').unbind('click');
I'm using Codeigniter and having trouble on my button after I load my page using load function on jQuery.
reg_form.php loads first, then after saving data, it will load the page-content class to see the list of data but when I'm trying to go to reg_form.php again using the button, nothing happens.
JS is not working on the current loaded page
reg_form.php
<html>
<body>
<div class="page-content">
<label>Name:</label><br>
<input type="text" id="name">
<button id="save"></button>
</div>
</body>
</html>
reg_list.php
<html>
<body>
<div class="page-content">
<button id="reg_form"></button>
</div>
</body>
</html>
reg.js
$('#reg_form').click(function(){
$(".page-content").load('reg_form');
});
$('#save').click(function(){
var name = $('#ame').val();
$.ajax({
url:"gatepass/save",
method: 'POST',
data:{
name:name
},
success:function(data){
$(".page-content").load('reg_list');
}
});
});
Use below mentioned solution.
$(document).on('click','#reg_form',function(){
$(".page-content").load('reg_form');
});
$(document).on('click','#save',function(){
var name = $('#ame').val();
$.ajax({
url:"gatepass/save",
method: 'POST',
data:{
name:name
},
success:function(data){
$(".page-container").load('reg_list');
}
});
});
This will help you.
Tabs and events in the content that you add after the DOM loads should be defined using the .on() function as shown below use of .delegate() has been discontinued:
$(document).on(events,selector,data,eventhandler);
If for example you add the button below into the div after DOM loads and you want the button to say 'You clicked me' when clicked, the code would be:
$(function() {
$(document).on('click', '#justClickMe', function(e) {
alert('You clicked me');
})
$('#content').append('<button id="justClickMe">Just Click Me</button>');
});
<div id="content"><h3>New Content</h3></div>
I am new in jquery. I have created a user page which has different vendor's information button. When I click each button, respective information show in pop-up window.
But, i want to show the information on other page "showInformation.jsp" on click on "View more" button i.e. same page redirects every time, but information change on button click.
JSP
<div id="vendor-list">
<c:forEach var="vendor" begin="0" end="11" items="${Vendor}">
<div class="col-sm-3">
<img src="uploadImage/${vendor.logo}" alt="Logo1">
<pre>${vendor.name}</pre>
<button type="button" class="showInformation btn btn-primary" value="${vendor.userID}">View More</button>
</div>
</c:forEach>
</div>
Javascript
<script type="text/javascript">
$(document).ready(function() {
$("#vendor-list").on('click',".showInformation",function() {
var user_id = $(this).val();
$.ajax({
url: 'http://localhost:8080/MyApp/ViewInformation',
type: 'GET',
data: {user_id : user_id},
success: function(data) {
var vendor_Info = data;
$('#singleVendor').html(vendor_Info).dialog({model:true}).dialog('open');
}
});
});
});
</script>
In the ajax call in url "ViewInformation" is servlet to get information from database.
Now, i want to rediect the same page, but when click any of button it show respective information.
I am using Jquery mobile frame work and also new in jquery mobile. I want to append one html page by Ajax. First i am taking one button(check) in form but whenever click on this button then page appended but layout will be damage. I don't know how to append HTML page by ajax in jquery mobile.
SCREEN SHOT FOR HINTS:
This page is before click on check button:
After click on Check button:
HTML CODE:
<form id="checkPinCode1" method="get" data-uri="<c:url value="/pincode-available/${product.productId}/${product.productOfCityId}"/>" data-ajax="false">
<div style="margin-bottom: 20px; width: 80%;">
<input name="pinCode" type="number" class="form-control pinCode" placeholder=" Enter pincode here..">
</div>
<div style="margin-bottom: 20px; width:40%;">
<button class="btn btn-primary" type="submit" value="Check">Check</button>
</div>
</form>
<div id="showPincodeAvailablity">
<%--APPEND PAGE HERE--%>
</div>
AJAX CODE:
$.ajax({
type: 'get',
url: url,
data: {pincode: pincode},
success: function (response) {
if (response.success === "true") {
$("#showPincodeAvailablity").html(response.html);
}
},
error: function (response) {
},
complete: function (response) {
}
});
JAVA CODE:
#RequestMapping(value = "/pincode-available/{productId}/{productOfCityId}", method = {RequestMethod.GET})
#ResponseBody
<%--- CODE LINE 1--%>
<%--- CODE LINE 2--%>
<%--- CODE LINE .....--%>
resp.put("success", "true");
resp.put("html", html);
}
First i am type pin code and click on check button then check button control go to the controller and comes into the ajax then page append by id = showPincodeAvailablity. and page appended but page layout is not comes proper way. Give me some idea for achieving this solution.
Try changing this line
$("#showPincodeAvailablity").html(response.html);
to this
$("#showPincodeAvailablity").html(response.html).enhanceWithin();
I have one question about jquery click to load url in a div using id.
I am trying when user clicking the class="open" id="1" then the ajax URL will open just id="openpage1" but the code showing in all id="openpageXX" what i am doing wrong here anyone can help me in this regard ?
$.base_url = 'http://localhost/';
$(".open").on('click', function() {
var ID = $(this).attr("id");
$("#openpage" + ID).slideToggle('fast');
var URL = $.base_url + 'page.php';
$.ajax({
type: "POST",
url: URL,
cache: false,
success: function(html) {
if (html) {
$(".page_area").html(html);
}
}
});
return false;
});
Html
<!--First Post Started-->
<div class="post_area" id="1">
<div class="open" id="1">Click for 1</div>
<div class="opened_page" id="openpage1">
When user click (class=open id 1 then ajax page will need to open just here)
</div>
</div>
<!--First Post finished-->
<!--Second post started-->
<div class="post_area" id="2">
<div class="open" id="2">Click for 2</div>
<div class="opened_page" id="openpage2">
When user click (class=open id 2 then ajax page will need to open just here)
</div>
</div>
<!--Second Post finished-->
I see 3 issues
I strongly suggest using unique non-numeric IDs - but my code no longer needs ID - I use datza-id to hold the information for the link
you need to find the closest opened_page - you try page_area which is not in your HTML
I would cache the clicked object to use in the success
like this:
<div class="post_area">
<div class="open" data-id="1">Click to open</div>
<div class="opened_page">
When user click (class=open id 1 then ajax page will need to open just here)
</div>
</div>
using
$(function() {
$(".open").on('click', function(e) {
e.preventDefault(); // in chase you change to a link or button
var $this = $(this),
URL = $.base_url + 'page.php?page='+$this.data("id"),
$page = $this.next("opened_page"); // sibling
$.ajax({
type: "POST",
url: URL,
cache: false,
success: function(html) {
if (html) {
$page.html(html).slideToggle('fast');; // sibling
}
}
});
});
});