Develop Reference

Same page redirect using jQuery with different AJAX data

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.

After click on button in Form append html page by Ajax

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();

bootstrap to display click result without page refresh

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.

Redirect to a PHP file on a HTML button click with some data being sent via POST

I want to redirect to a PHP file when a button on my initial screen is pressed.
$stmt->bind_result($app_id, $user_id, $app_name, $app_desc,$api_key);
while ($stmt->fetch()) {
echo '<form class="appFragmentForm" id="'.$app_id.'" action="appDetails.php" method="POST">
<div class="col-sm-6 col-md-3"><div class="thumbnail">
<img class="img-rounded appIcon" src="img/icon_app_placeholder.png">
<div class="caption text-center">
<h3>'.$app_name.'</h3>
<p>'.$app_desc.'</p>
<p>Delete App View Details</p>
</div>
</div>
</div>
</form>';
}
}
Javascript function:
$(".appDeatilsButton").click(function (event) {
$.ajax({
type: "POST",
url: "appDetails.php",
data: { ID: this.id}
})
.done(function( msg ) {
window.location(appDetails.php);
});
});
appDetails.php
<?php
include_once 'includes/db_connect.php';
include_once 'includes/functions.php';
sec_session_start();
$appID = $_POST["appID"];
echo '<script language="javascript">alert('.$appID.')</script>';
?>
I know I am completely wrong, please help me in doing this in a eaiser way. FYI I am a mobile developer with little insight on web programming so web experts please excuse my newbie language.

Put this.form.submit(); instead of window.location(appDetails.php); in your JavaScript event handler (your javascript function).
And check errors in your code.
in the first code you posted on 9th line you give appDeatilsButton (maybe appDetailsButton...I don't know if it is a mis-spell) class to the "Delete" button.. the event handler $(".appDeatilsButton").click() runs the script whenever an element with class appDeatilsButton is clicked and it submits the form even if "Delete" button is clicked.

How to get content of a non-specific DIV-Element using jQuery

I've a problem and I hope that it's possible to explain.
I have a lot of short texts which come from a mysql-DB.
while ($foo = mysql_fetch_object($query)) {
$text = $foo -> column_text_db;
echo '<div class="atextdiv">' . $text . '</div>';
}
now i want to add an onclik-Event-Handler to the "atextdiv"-Container(s) who takes the content and put it on an input-field:
<form>
<input type="text" id="clickcontent" />
</form>
My problem: Each page has a different number of records in database. The final HTML-Code (after parsing the PHP-Code) could be:
<div id="wrapper">
<div class="atextdiv">Papa was a rolling stone</div>
<div class="atextdiv">Oh my god! They killed Kenny</div>
<div class="atextdiv">Foo Bar</div>
<!-- more content -->
</div>
<form>
<input type="text" id="clickcontent" />
</form>
So, how can I get the content of each "atextdiv"-Container after click on it?

Just like:
$(".atextdiv").click(function() {
console.log($(this).text());
});
Use a combination of this and the .text method inside the click handler.

You can bind click event on '.atextdiv' and in event fetch its value using .text()
$('#wrapper').on('click', '.atextdiv', funnction(){
$("#clickcontent").val($(this).text())
})

Just grab the innerHTML of the item that the click event is occurring on:
$('.atextdiv').click(function(e){
alert(e.currentTarget.innerHTML);
})
http://jsfiddle.net/9VE6A/8/