I know I am new to the .net world, so there are limitations to what I know and understand. I am using Sitecore, and Sitecore generates the .aspx pages behind the scenes, so I have no access to the source, what I do have access to is the .ascx which is the sublayout ... so i tried to put some javascript onto the layout ... and I read that I am allowed to this with tags, but when I run the program now, it is not firing. Anything I am missing, please advise. Thank you for your assistance.
<!-- Custom Feedback Code -->
<script type="text/javascript">
function showModal() {
var url = document.URL;
var popUp = 'http://local.meau.com/components/supportcenter/feedback.aspx?value=';
var site = popUp + url;
var runpopUp = 50;
if (runpopUp >= Math.random() * 100) {
$(document).ready(function () {
$.fancybox({
'width': 500,
'height': '55%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
'href': site,
'showCloseButton': false,
'title': 'We Request your Feedback'
});
});
}
}
</script>
<!-- End of Custom Feedback Code -->
I would suggest to start by removing (commenting out) the randomization logic - to make sure that your code is working deterministically first. Next, what is done in your code - the anonymous function is added as $(document).ready event handler inside showModal function. Unless you call showModal before $(document).ready fires, your handler will never be executed. Therefore, #Maras's suggestion should work, assuming, of course, that jquery javascript is loaded into the page.
Related
In my website I have a series of images that serve as nuxt links to game pages:
<template>
<NuxtLink :to="game.pageName">
<img :src="game.boxImage" :height="gamePanelHeight" class="elevation-4"
/></NuxtLink>
</template>
Each of those links draws its properties from a content markup file like this:
index: 3
boxImage: gameImages/box_image.png
title: game title
pageName: games/whatever
And they're loaded into the page like so:
<script>
export default {
async asyncData({ $content, params }) {
const games = await $content('games').sortBy('index', 'asc').fetch()
return { games }
},
}
</script>
Whenever I refresh this page. All of these images break until I navigate outside the page and come back. What's causing this issue and how do I fix it?
This is a static Nuxt application FYI. And it's being served through an AWS S3 bucket but I don't think that's what's causing this issue.
EDIT: Also the boxImage that's in gameImages/box_image.png is from the static folder.
asyncData is not a hook that is triggered upon reaching an URL or using a reload (F5), it is only triggered during navigation.
If you want it to work even after a reload, use the fetch() hook.
More info here: https://nuxtjs.org/docs/2.x/components-glossary/pages-fetch#options
Edit on how to write it with fetch()
<script>
export default {
data() {
return {
games: [],
}
},
async fetch() {
this.games = await this.$content('games').sortBy('index', 'asc').fetch()
},
}
</script>
Is there a way to load controller (product/category) within some contained space, so that the ajax to the custom function within that controller doesn't break?
I'm basically loading (from ajax) a custom function which is inside a core contoller product/category. In this function I need to reload the the product/category controller to get new product list based on ajax data I sent to the function, to then return it as a response to the original ajax.
When I try to do
$this->load->controller('product/category')
it beaks the ajax I set up with the function and in the console I see 404.
I tried using
$foo = $this->load->controller('product/category')
and it works, but I need to also execute
$this->load->view('product/category')
and I don't know how to do it without breaking ajax.
Basically I did what I essentially wanted (see the middle of my question, namely the part about the ultimate need to refresh my product list using ajax) the other way (after reading up How to get products in JSON format from OpenCart using phonegap/jQueryMobile): from the ajax I called the products/category directly and not my custom function inside of the product/category controller as in the question, and when I got reponse back containing the html output of the view, I reloaded a div I made in the product/category.twig with that html using jQuery. The ajax was
$(document).ready(function(){
$.ajax({
url: 'index.php?route=product/category&path=18&json',
type: 'get',
beforeSend: function() {
},
complete: function() {
},
success: function(data) {
console.log('success');
if (data.length > 0) {
console.log(data);
$('#mydiv').html(data);
}
}
});
});
and the code I added to product/category.php was
if(isset($this->request->get['json'])) {
$this->response->setOutput($this->load->view('product/view_for_mydiv', $data));
} else {
$this->response->setOutput($this->load->view('product/category', $data));
}
As you may notice I added a div inside product/category.twig called mydiv, which I placed exactly where I wanted the html to go and then I created a twig called view_for_mydiv.twig inside default/product/category/ folder, the html of which the product/category controller would send back instead of its general twig when it saw that an ajax call had been made to it. The #mydiv div located inside category.twig wraps the html that is the same html that gets produced when view_for_mydiv.twig is used to render product/category.
I have a submit button and upon pressing the button I display a loading image and then draw table and then draw google chart.
code for google chart (this works - verified it standalone):
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type='text/javascript'>
google.load('visualization', '1', { packages: ['corechart']});
</script>
<script type='text/javascript'>
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
['ENG 2001', 1336060, 3817614, 974066, 1104797, 6651824, 15727003],
['ENGLISH 2002', 1538156, 3968305, 928875, 1151983, 5940129, 17356071],
['ENGLISH2003', 1576579, 4063225, 1063414, 1156441, 5714009, 16716049]
])
new google.visualization.ColumnChart(document.getElementById('visualization')).
draw(data, {title:'Yearly Coffee Consumption by Country',
width:1000, height:600,hAxis: {title: 'Year'}, isStacked:true}
);
}
//google.setOnLoadCallback(drawVisualization);
</script>
code for loading image when pressing a submit button
<script type="text/javascript">
// Get the instance of PageRequestManager.
var prm = Sys.WebForms.PageRequestManager.getInstance();
// Add initializeRequest and endRequest
prm.add_initializeRequest(prm_InitializeRequest);
prm.add_endRequest(prm_EndRequest);
// Called when async postback begins
function prm_InitializeRequest(sender, args) {
//Display the loading image
var panelProg = $get('divImage');
panelProg.style.display = '';
}
// Called when async postback ends
function prm_EndRequest(sender, args) {
//Hide the loading image
var panelProg = $get('divImage');
panelProg.style.display = 'none';
//sort the table once retrieved from datatable from server
$(document).ready(function () {
$("#table").dataTable({
"sScrollY": "400px",
"bPaginate": false
});
//draw google chart (doesnt work)
google.setOnLoadCallback(drawVisualization);
//or even doesnt work (assume comment out for google.setOnLoadCallback(drawVisualization);
drawVisualization();
});
}
</script>
my submit button is under update panel (to make partial-page refresh for loading image to show user that it's fetching data from server). with this code, i am able to show loading image and display table but not google chart. I am not sure how I can call google chart draw function to make google chart appear. I have looked at several posting but couldnt find anything that works for my case. I even tried google.load('visualization', '1', { packages: ['corechart'], "callback":drawVisualization}) but it didnt work. I am so lost at this point. what is the correct way to make google chart work under update panel/PageRequestManager? Thanks!
I don't think you need (or want) to use a document ready handler in your prm_EndRequest function. Try this instead:
function prm_EndRequest(sender, args) {
//Hide the loading image
var panelProg = $get('divImage');
panelProg.style.display = 'none';
//sort the table once retrieved from datatable from server
$("#table").dataTable({
"sScrollY": "400px",
"bPaginate": false
});
drawVisualization();
}
To make sure the Viz API code doesn't try to run before the API is finished loading, you should make sure to wrap whatever code you use to hook up the AJAX call to your button inside a callback from the google loader.
I have seen this question in SO several times. Most of cases user called facebook js (all.js) twice or did not provide the application id. But my case is different. I have included all.js once and I also have set application id. But still I am getting this error "FB.login() called before calling FB.init()" when I click the login button. The markup for login button is as follows
<fb:login-button autologoutlink="true" perms="email,user_birthday,user_about_me,publish_stream"></fb:login-button>
And the javascript codes are
<script type="text/javascript">
FB.init({appId: '${section.parameters['facebook.app.id']}', status: true, cookie: true, xfbml: true});
/* All the events registered */
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
FB.Event.subscribe('auth.logout', function(response) {
// do something with response
//logout();
});
function setFacebookStatus(form) {
var status = $('#comment-form-body').val();
var params = {};
params['message']= status;
params['link'] = '${article.url}';
FB.api('/me/feed', 'post',params, function(response) {
if (!response || response.error) {
alert('Error occured');
}
else {
alert('<fmt:message key="comment.form.facebook.success" />');
$("#facebookComment").overlay().close();
form.submit();
}
});
}
</script>
I have added all.js in the header of my html page. I am really pissed off this issue. I would be very grateful if you help me.
Edit
One more thing to mention. Sometimes it works and sometimes it shows me the warning. Say I was logged in to facebook from another tab and then I logged out from facebook. Then I refresh my website page that has the facebook integration. Then I get the warning. Main problem is that sometimes it is working sometimes not.
I have modified my javascript as follows and now it is working.
$(function() {
window.fbAsyncInit = function() {
FB.init({appId: '${section.parameters['facebook.app.id']}', status: true, cookie: true, xfbml: true});
};
$('body').append('<div id="fb-root"></div>');
$.getScript(document.location.protocol + '//connect.facebook.net/en_US/all.js');
})
setFacebookStatus function remain same. Adding those scripts on document ready removes the problem of facebook javascript warning and non deterministic login behavior. My guess is that on document ready initialization of FB scripts ensures execution of all calls in required order.
I'm trying to make a call to a url in Django and load the contents of it. Right now I have:
<script>
$('.myClass').load('{% url update_dropdown %}',
{'kind': "Book" },
function(data){
alert(data);
});
</script>
And then the view that update_dropdown refers to is:
#csrf_exempt
def update_dropdown(request):
category = request.POST.get('kind', None)
all =False;
args = {
"label":category,
"all":all
}
return render_to_response('template.html',(args))
However, the .load() won't work for some reason. If I go directly to the URL it shows the data I expect, but .load() won't cooperate. I know it's not a display issue, as the alert will not work (unless I remove the #csrf_exempt, then it alerts the HTML of the error page)
I'm pretty confused as to what's going on, and I've been debugging this and trying to find the error for hours now, any help would be appreciated .
I can get it to work if I make the return type a JSON object and use getJSON(), but I'd prefer not to
Try wrapping it in a ready:
$(document).ready( function () {
$('.myClass').load('{% url update_dropdown %}',
{'kind': "Book" },
function(data){
alert(data);
});
});
Apparently it was an issue with the jQuery uiSelect library I was using. It was out of date and causing errors.