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
}
}
});
});
});
Related
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 populating divs with data in it by use of a foreach :
#foreach (var item in Model.EmploymentDetailsList)
{
<li>
<i class="fa fa-user bg-aqua"></i>
<div class="timeline-item">
<span class="time"><i class="fa fa-clock-o"></i> Current</span>
<h3 class="timeline-header">#item.Position at #item.EmploymentCompany</h3>
<div id="page-wrapper">
<section>
<div id="editor" class="diveditor timeline-body">
<input type="hidden" class="pkiEmploymentDetailID" value="#item.pkiEmploymentDetailID" />
#Html.Raw(item.PositionDetails)
</div>
</section>
</div>
<div class="timeline-footer">
<button id="editorBtn" type="button" class="edit-button btn btn-primary btn-xs">Edit</button>
#*<a class="btn btn-primary btn-xs">Edit</a>*#
</div>
</div>
</li>
<!-- timeline time label -->
<li class="time-label">
<span class="bg-red">
#item.StartDate
</span>
</li>
<!-- /.timeline-label -->
}
And I have the following JS that I am trying to use to set the specific div's contenteditable to true, based on the button clicked in that div :
<script>
//var editorBtn = document.getElementById('editorBtn');
//var element = document.getElementById('editor');
$('.edit-button').on('click', function () {
//editorBtn.addEventListener('click', function (e) {
// e.preventDefault();
//alert("Button Clicked");
if ($('.diveditor').attr('contenteditable', 'false')) {
// Disable Editing
//This code runs when you click Save
alert("Button Editable works");
//alert(element.innerHTML);
//TODO: Do Ajax call to save content to Database
var ProfileDetails =
{
"EmploymentDetails": element.innerHTML
};
$.ajax({
url: '/Profile/Save_Employment/',
data: JSON.stringify(ProfileDetails),
datatype: 'json',
type: 'POST',
contentType: 'application/json; charset=utf-8',
success: function (data) {
$('.diveditor').attr('contenteditable', 'false');
$('.edit-button').innerHTML = 'Edit';
// You could save any changes here.
}
});
} else {
//This code runs when you click Edit
$('.diveditor').attr('contenteditable', 'true');
$('.edit-button').innerHTML = 'Save';
$('.diveditor').focus();
}
});
</script>
So as you will see, all the Div's and buttons have the same names and I would like to edit only the specific Div that I click the button on(the edit button) - I have done something similar using a webgrid by using the class name.
Currently it sets focus to the last Div and not the one I want. It also does not change the button from "Edit" to "Save".
Is there a better way of doing this ? Or can someone possibly help me with what I am doing wrong.
You could use data- attributes to tell your script, which element should be now editable and give every div his own id attribute like this.
<div id="editor_#item.pkiEmploymentDetailID" class="diveditor timeline-body">
<input type="hidden" class="pkiEmploymentDetailID" value="#item.pkiEmploymentDetailID" />
#Html.Raw(item.PositionDetails)
</div>
<button id="editorBtn" type="button" class="edit-button btn btn-primary btn-xs" data-edit="#item.pkiEmploymentDetailID">Edit</button>
and in your jQuery script you know which element was clicked if you're passing argument to click handler. With this information you can read data-edit and make specific div editable.
$('.edit-button').on('click', function (event) {
var clicked = $(event.target);
var editableId = "editor_" + clicked.data("edit");
// make element with id=editableId editable
if ($('#'+editableId).attr('contenteditable', 'false')) {
/* code */
}
else
{
$('#'+editableId).attr('contenteditable', 'true');
clicked.html('Save');
$('#'+editableId).focus();
}
}
This approach allows you to change your HTML structure without worrying about breaking something in your JS.
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.
Thanks in advance, I just started coding a few weeks ago and I can't figure this out.
I have been trying to set up where you click an image and it opens a modal that is matched by the img tag, and that modal click event will in turn call a method. Problem is that I can't seem to get the onclick event to open the modal, i think once i get that to work I can get the method calls to work. I have tried a bunch of things and can't seem to figure out how to get it to pop up,
here is the JS/ajax
$('#img').click(function(){
$('#vendingModal').dialog('open');
return false;
});
$('#vendingModal').click(function (event) {
event.preventDefault();
var element = $(event.relatedTarget);
var inventoryId = element.data('inventory-id');
var modal = $(this);
$.ajax({
type: "GET",
url: 'inventory/' + inventoryId
}).success(function (inventory) {
modal.find('#inventory-id').text(inventory.inventoryId);
modal.find('#inventory-name').text(inventory.inventoryName);
modal.find('#inventory-price').text(inventory.price);
modal.find('#inventory-count').text(inventory.count);
});
});
here is the jsp
<%# page pageEncoding="UTF-8" %>
<div class="column2" id="inventoryGrid">
<div class="row">
<div class="col-xs-3 offset-3-12">
<div class="pic morph">
<img id="item1" src="img/item1.jpg" alt="3 Musketeers" title="3 Musketeers" class="img-rounded img-responsive" style="width:128px;height:128px">
</div>
</div>
</div>
</div>
The click event is linked to the wrong element.
"$('#img')" will point to an "img" id. Your image, however, has the id "item1", so try with $('#item1').click(function(){
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.