I have show_place.php and two ajax pages photos.php and rating.php
I use this function to get content from ajax pages
function loadtab (getFile){
$.ajax({
url: getFile,
beforeSend: function() {
$(".tabcon").html('<i class="fa fa-spinner fa-spin"></i>');
},
success: function(data) {
$(".tabcon").html(data);
}
});
}
I use jQuery fancybox plugin in photos.php like this
<link rel="stylesheet" type="text/css" href="style/css/jquery.fancybox.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.fancybox.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox").fancybox({
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
and this is rating page content
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.autosize.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".textarea").autosize();
$(".stars").click(function () {
var ratevalue = $(this).val();
$("#rate").val(ratevalue);
});
$("#formreview").submit(function(){
var yourname = $("#yourname").val();
var yourmail = $("#yourmail").val();
var rate = $("#rate").val();
var textrev = $("#textrev").val();
var s = {
"yourname":yourname,
"yourmail":yourmail,
"rate":rate,
"textrev":textrev
}
$.ajax({
type: "POST",
url: "ajax/send_review.php",
data: s,
beforeSend: function(){
$(".showdata").html('<i class="fa fa-spinner fa-spin"></i>');
},
success: function(data){
$(".showdata").html(data);
}
});
return false;
});
});
</script>
Notice I use the autosize jQuery plugin and I made a form to send the rate
I use tabs to get data file from contents pages my problem is when I go to tating fancybox plugin doesn't work. How can I fix that?
Related
I'm using lazy for my images lazySizes plugin I'm looking for a way to do html content but I couldn't do that for html is there any way to do simply ? and my html structure
$('.lazy.teaser.lazy_content').on('lazyunveilread', function (ev) {
data_url = $(this).attr("data-url");
data_id = $(this).attr("data-target-id");
$.ajax({
url: data_url,
type: "POST",
beforeSend: function () {
$(".loaderDiv").show();
$("#" + data_id).html("");
},
success: function (data) {
$(".loaderDiv").hide();
$("#" + data_id).html(data);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/3.0.0/lazysizes.min.js"></script>
<div class="trustyou-detail-box section lazy teaser lazy_content" data-url="/ajax/yorumlar/#Model.OtelBilgileri.seflink" data-expand="-210" data-target-id="ajax-content" id="yorumlar-area">
<h4 class="tur-main-baslik section-head">YORUMLAR</h4>
<div id="ajax-content"></div>
</div>
I have data-url and data-target-id to get url and my content
Yes, you can:
<!-- The ID (id="ajax-content) is redundant -->
<div class="lazyload" data-url="...">
<div class="loaderDiv"></div>
</div>
$(document).on('lazybeforeunveil', function(e) {
var $target = $(e.target);
$target.load($target.data('url'));
});
http://jsfiddle.net/80hg2ykv/4/
I have a textarea which will be in hidden state when the request comes to the page and once i select the value in the page i call a controller method which does manipilation and returns the response to the same page and in the ajax success method i try to print the response in the textarea
This is my gsp page
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main" />
<title>Json Compare</title>
<g:javascript plugin="jquery" library="jquery"
src="jquery/jquery-1.11.1.js" />
<script>
$(document).ready(function(){
$('.testMe').click(function(){
var URL="${createLink(controller:'jsonComparison',action:'compare')}";
alert(URL)
alert(firstText.value)
alert(secondText.value)
$.ajax({
url:URL,
data: {firstText:firstText.value,secondText:secondText.value},
success: function(data){
var retrievedValue = JSON.parse(data);
alert("Parsed Values are: "+retrievedValue)
alert("Values are: "+retrievedValue.status)
//alert("success: "+retrievedValue.result)
if (retrievedValue.status===true) {
alert("inside the success: "+retrievedValue.result)
alert("the parsed values 1st data"+data.firstText)
$("#result").css("display","block")
$("#result").val(data.firstText)
//notice .html since it is content of textArea
//$('.textarea').html(retrievedValue.result)
//document.getElementById("textarea").style.display = "block"
//document.getElementById("textarea").innerHTML = data.result
//$('#textarea').val(retrievedValue.result).show()
// $('.textarea').css("display","");
//$('#result').attr('style', 'display:block');
//$('#testdiv').show()
//$('.textarea').toggle();
// $('#testdiv').attr('style', 'display:block');
//$('#testdiv').removeAttr("style");
//document.getElementById("result").style.display = "none";
} else { /// if (data===false ) {
alert("Failure: "+retrievedValue.value1+" "+retrievedValue.value2)
//$('#result1').html(entry.value1).show()
// $('#result2').html(entry.value2).show()
}
}
});
});
});
//event.preventDefault();
</script>
</head>
<body>
<g:form>
<div>
<label>From Time</label>
<g:select name="firstText" from="${eventsList}" noSelection="['':'-Choose the From Date-']" />
<label>To Time</label>
<g:select name="secondText" from="${eventsList}" noSelection="['':'-Choose the To Date-']" />
<button class="testMe">Compare</button>
</div>
<br>
<textarea id="result" style="display: none"></textarea>
<%--<div id="textarea">
<label>Output</label><br>
<textArea id="result" name="myField" />
<textarea></textarea>
</div>
--%></g:form>
</body>
</html>
once the result is displayed immediately it disappears how to stop it. And also how to display the result different textarea based on the response from the controller. Initially the textarea should not be visible
Treat a textArea like a div
$('#textArea').html('content');
Unless you declare:
<g:textArea value="something" />
Which then behaves differently to a standard textArea if I recall correctly
Update:
$(document).ready(function(e){
$('.testMe').click(function(e){
e.preventDefault();
var URL="${createLink(controller:'jsonComparison',action:'compare')}";
alert(URL)
alert(firstText.value)
alert(secondText.value)
$.ajax({
url:URL,
data: {firstText:firstText.value,secondText:secondText.value},
success: function(data){
//alert("success"+data.value)
console.log(data);
$("#result").val(data).show()
}
});
});
});
try this.. hopefully it'll work.
$(document).ready(function() {
$('.testMe').click(function() {
var URL = "${createLink(controller:'jsonComparison',action:'compare')}";
var firstText = $('#firstText');
var secondText = $('#secondText');
alert(URL);
alert(firstText.val());
alert(secondText.val());
$.ajax({
url: URL,
data: {
firstText: firstText.val(),
secondText: secondText.val()
},
success: function(data) {
//alert("success"+data.value)
console.log(data);
$("#result").val(data);
$("#result").show();
}
});
});
});
And if you try to append the textarea element dynamically? For example:
$(document).ready(function(){
$('.testMe').click(function(){
// ... your code ...
// ajax part
$.ajax({
url:URL,
data: {firstText:firstText.value,secondText:secondText.value},
success: function(data){
var textarea_el = $('<textarea />', {
id: 'result',
text: data.value // or just data?
});
// change form_selector with the real selector!
$(<form_selector>).append(textarea_el);
}
});
});
});
<script>
$(document).ready(function(){
$('.testMe').click(function(){
var URL="${createLink(controller:'jsonComparison',action:'compare')}";
alert(URL)
alert(firstText.value)
alert(secondText.value)
$.ajax({
url:URL,
data: {firstText:firstText.value,secondText:secondText.value},
success: function(data){
//alert("success"+data.value)
console.log(data);
$("#result").css("display","block")
$("#result").val(data.firstText)
}
});
});
});
</script>
try above code
if it not ,try to alert(data.firstText) check the return value in alert .whether it is object or value
I'm trying to get a basic JSONP query going:
<html>
<head>
<script type="text/javascript" src="js/jquery1.js"></script>
<script>
$(document).ready(function(){
$.ajax({
url: 'http://www.bing.com/',
dataType: 'jsonp',
success: function(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
$('#text').html(len);
}
});
})
</script>
</head>
<body>
<div id = 'text'></div>
</body>
</html>
I'm using IE8 and jquery v1.11.3
Syntax error ?callback=jQuery111309915726215071462_1436849961686&_=1436849961687, line 1 character 1
What is this callback? Where is it coming from?
If I change the URL to 'https://www.bing.com/search?q=hello+world'
I get:
Syntax error search?q=hello+world&callback=jQuery11130544191867791898_1436850255384&_=1436850255385, line 1 character 1
<html>
<head>
<script type="text/javascript" src="js/jquery1.js"></script>
<script>
$(document).ready(function(event){
if (event.preventDefault) {
event.preventDefault();
}
else {
event.returnValue = false;
}
$.ajax({
url: 'http://www.bing.com/',
dataType: 'jsonp',
success: function(dataWeGotViaJsonp){
var text = '';
var len = dataWeGotViaJsonp.length;
$('#text').html(len);
}
});
})
</script>
</head>
<body>
<div id = 'text'></div>
</body>
</html>
// Use event.preventDefault.
Change dataType: 'jsonp' to dataType: 'text'
I am trying to run an ajax call function but I am running into issues. I'd like to grab the id as the data item for this. My code is below but I haven't seen any signs of it working yet.
Thanks for your help
<a class='ajax-read' id='133' href='#' >read more</a>
<script type="text/javascript">
$(function(){
$('.ajax-read').click(function(){
var elem = $(this);
$.ajax({
type: "GET",
url: "/inc/read-more.php",
data: "id="+ id,
dataType:"json",
success: function(data) {
if(data.success){
elem.hide();
$('#read-more-content').html(data.message);
}
}
});
return false;
});
});
</script>
You need to get the anchor id inside the AJAX call:
<script type="text/javascript">
$(function(){
$('.ajax-read').click(function(){
var elem = $(this);
$.ajax({
type: "GET",
url: "/inc/read-more.php",
data: "id="+ elem.attr('id'),
dataType:"json",
success: function(data) {
if(data.success){
elem.hide();
$('#read-more-content').html(data.message);
}
}
});
return false;
});
});
</script>
Change
data: "id="+ id,
to
data: "id="+ elem.attr('id'),
I am new to javascript
My Javascript code is not working on the data that is fetched from the other page searchworld.php
When I see the pagesource the fetched data is not appearing
<script type="text/javascript" >
$(function() {
$(".search").keyup(function() {
var searchbox = $(this).val();
var dataString = 'searchword='+ searchbox;
if(searchbox=='')
{
}
else
{
$.ajax({
type: "POST",
url: "worldsearch.php",
data: dataString,
cache: false,
success: function(html){
$("#display").html(html).show();
}
});
}
return false;
});
});
</script>
$(".search").on("keyup", function() {
.on() causes your events to bind on newly added content loaded with AJAX