jQuery- Button not working after loading content - javascript

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>

Related

Trigger jQuery function on page load

I've created some jQuery that take a value from a one of several buttons and then via ajax loads the corresponding custom post types. Each button represents a category that the posts are associated with.
This is as follows:
jQuery(function ($){
jQuery('.btn').on('click', function(e){
e.preventDefault();
$.ajax({
url:'/wp-admin/admin-ajax.php',
data:('categoryfilter=' + $(this).val() + '&action=projects'), //filter.serialize(),
type:'POST',
beforeSend:function(xhr){
},
success:function(data){
$('#somediv').first().after(data);
}
});
return false;
});
});
The html for the "filter" buttons is:
<div id="myBtnContainer">
<form method="POST" id="filter">
<button class="btn active" value="all"> Show all</button>
<button class="btn" value='Business' />Business</button>
<button class="btn" value="Charity"> Charity</button>
<button class="btn" value="education-research"> Education / Research</button>
<button class="btn" value="Heritage"> Heritage</button>
<button class="btn" value="health-environment"> Health / Environment</button>
</form>
</div>
This all works great, however I need to load some content when the page loads. No records/posts are displayed until the ajax is fired on the click of one of the filter buttons.
I've tried giving the onclick function a name but, I can't call it - eg:
jQuery(document).ready(function($){
//jQuery(function ($){
alert ("test text");
loadProjects();
jQuery('.btn').on('click', function loadProjects(e){
//jQuery('.btn').on('click', function(e){
How can I convert my current code to make it so that I can load some default content on page load?
You should be able to trigger the click event callback by doing:
jQuery(function ($){
jQuery('.btn').on('click', function(e){
e.preventDefault();
$.ajax({
url:'/wp-admin/admin-ajax.php',
data:('categoryfilter=' + $(this).val() + '&action=projects'), //filter.serialize(),
type:'POST',
beforeSend:function(xhr){
},
success:function(data){
$('#somediv').first().after(data);
}
});
return false;
});
//trigger first btn's click event
$('#filter .btn.active').trigger('click');
});

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

Clicking a div instead of hitting submit and then passing argument

I've got a form with a submit button on a form that opens up a nested php page within a div on my page.
All I want to do is hide the submit button, and instead replace this with clicking one of the divs and thus running a script called showBiog(key), which then passes key to the form for submitting.... help... ;-)
<script type="text/javascript">
$(function() {
// Handler for .ready() called.
$('#SubmitForm').submit(function( event ) {
$.ajax({
url: 'test2.php',
type: 'POST',
dataType: 'html',
data: $('#SubmitForm').serialize(),
success: function(content)
{
$("#DisplayDiv").html(content);
}
});
event.preventDefault();
});
});
</script>
HTML is:
<form id="SubmitForm" method="post">
<div id="SubmitDiv" style="background-color:black;">
<button type="submit" class="btnSubmit">Submit</button>
</div>
</form>
<div class="test" onClick="showBiog(1)"><p>1</p></div>
<div class="test" onClick="showBiog(2)"><p>2</p></div>
<div class="test" onClick="showBiog(3)"><p>3</p></div>
<div class="test" onClick="showBiog(4)"><p>4</p></div>
Just remove the button element, and do something like:
$('#myspecificdiv').on('click', function() {
$('#SubmitForm').submit();
}
You can hide the submit button and perform its click action in showBiog(key); just like
function showBiog(key){
//Your code
$('#submit_btn_id').click();
}
please put the javascript on document.ready
<script type="text/javascript">
$(document).ready(function() {
$('.class name').on('click',function() {
$('#SubmitForm').submit();
});
});
</script>

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.

Categories

Resources