How to call an internal javascript function from url? - javascript

I'm collecting some data from a series of similar webpages and store them in excel sheet. I'm using the opener class in urllib2 within python for this work.
The problem is that in one group of these pages, you need too click on a hyperlink so that the needed data appear.
Is there any way that I could fake the click on this hyperlink and include it in the address that I send within my python code?
This is the href tag of the link:
<a href="#" onClick="refresh_reg_table();refresh_reg_list(); return false;">
And here are the functions called in onClick:
function refresh_reg_table(order){
Ajax.Responders.register({
onCreate: function() {
$('ajax_spinner2').show();
},
onComplete: function() {
$('ajax_spinner2').hide();
}
});
new Ajax.Updater('table_registrations', 'ajax/get_table_registrations.php', {
method: 'get',
parameters: {
table: 'registrations',
idevent : 143593,
sorted : order},
evalScripts: true,
});
}
function refresh_reg_list(){
Ajax.Responders.register({
onCreate: function() {
$('ajax_spinner2').show();
},
onComplete: function() {
$('ajax_spinner2').hide();
}
});
new Ajax.Updater('reg_list', 'ajax/get_list_registrations.php', {
method: 'get',
parameters: {
type: 'table_name_reg',
idevent : 143593
},
evalScripts: true,
});
}

All you can do through the address bar is using the javascript: prefix and it would run all your JavaScript code after that javascript: prefix.
you also better change the your hyperlink like:
...

Use javascript:yourFunction() to start the page's function - i dont think there's any other way around it

Related

How to get a value of a function from a javascript file to an ASP.NET MVC view?

i am trying to separate my view from java script,in my view im calling a function in js file to create a chart,
Here is my js file and the function:
function pieChartForInterventions(chartID,pieChartData) {
chartID.kendoChart({
dataSource: {
data: pieChartData
},
series: [{
type: "pie",
field: "list",
categoryField: "mm",
padding: 0,
labels: {
visible: true,
}
}],
seriesClick:onDb,
tooltip: {
visible: true,
template: "${ category }"
}
,
legend: {
position: "bottom"
}
});
}
function onDb(e) {
var _clicked = e.category;
}
here is my view:
pieChartForInterventions($("#pieChart"), result);
now the problem is,as you see in my function i have a onDb() function whick invokes when i click on my chart to get the value of what i clicked,i need this value to send it back with a Ajax call via my view,how should i have this value in my view?
Please elaborate a bit more, where exactly in your view do you require this value? OR what do you want to do with this value after receiving it in the view?
If you have something available in javascript, it means you already have it in your “View”, since the only place your javascript logic is executing is in your view.
From your onDb(e) function, you can:
1) Return the value and use it anywhere you need within the view via javascript logic.
In your sepearated js file you may have a function like:
function onDb(e) {
var _clicked = e.category;
return _clicked;
}
Somewhere in your view (.cshtml) you may do something like:
<script type="text/javascript">
// Get 'e' from wherever you need
var requiredValue = onDb(e);
// Any Javascript / JQuery / Ajax logic ...
</script>
2) If the returned value is required at the server side, you can send an AJAX request etc. See the following on how to send an AJAX request (MVC jquery ajax call with input parameter)
==== UPDATE AFTER COMMENT ====
You can access the onDb function the same way as I mentioned in the second code snippet. However, in that case getting the input parameter “e” would require some scripting.
Alternatively, what’s even easier in this scenario is that you can move the “Ajax Call” inside onDb(e) function. Update the onDb(e) function as follows …
function onDb(e) {
var _clicked = e.category;
$.ajax({
type: "POST",
url: '#Url.Action("ControllerName", "ActionName")',
contentType: "application/json; charset=utf-8",
data: { valueToSend: _clicked },
dataType: "json"
});
}
And on your server side you would have some action like:
public class ControllerName : Controller
{
[HttpPost]
public ActionResult ActionName(string valueToSend)
{
//The value you needed is stored in the input paramater 'valueToSend'
//... process however you want and return any ActionResult ...
return Json("success", JsonRequestBehavior.AllowGet);
}
}

JQuery Ajax Autocomplete Not Displaying Result

I have a form that load Jquery autocomplete, I got the result, but it does not shows up (blank with border). Just like this image:
Here's my JQuery Code:
<script type="text/javascript">
// Customer
$('input[name=\'customer\']').autocomplete({
delay: 500,
source: function (request, response) {
$.ajax({
url: 'getCustomer.php?filter_name=' + encodeURIComponent(request.term),
dataType: 'json',
success: function (json) {
response($.map(json, function (item) {
return {
label: item.c_name,
value: item.c_id
}
}));
}
});
},
select: function (event, ui) {
$('input[name=\'customer\']').val(ui.item.label);
$('input[name=\'customer_id\']').val(ui.item.value);
return false;
},
focus: function (event, ui) {
return false;
}
});
</script>
And here's AJAX result:
Anyone here have same problem before? I'm using Admin LTE template by the way. And still wondering what's wrong with my code. I have tried import other Jquery-min-js but still not working. Still displayed like that (blank bordered). FYI: there's no error at console log.
I am guessing that the AJAX response you've shown (as an image) is the actual response from the server, before your $.map() has modified it.
Your $.map() function iterates over that json response from the server, and it tries to use the c_name and c_id property names in each element. But the json from the server does not include those property names - it has customer_id and name.
So the $.map() creates a bunch of empty elements, and passes them on to autocomplete. Autocomplete then has a set of elements to display, but without any labels, which is why you see the dropdown with empty horizontal lines, rather than just nothing at all, which is what you'd see when there's no response/match at all.
You simply need to use the same property names you have in your AJAX:
response($.map(json, function (item) {
return {
label: item.name,
value: item.customer_id
}
}));

How to disable fullcalendar

I want to set authorities on my calendar. Only certain users can update the data. While all users can only see the event and are not allowed to make any changes. I'm using select function to popup modals. Can fullcalendar be disabled? I want it to be like readonly function. Which means all users can read the data. I try to do like this :
if(#ViewBag.User == "Admin")
{
editable = true,
}
But it doesn't work. The events can still be edited since I also set that attribute inside my JSON codes for events. Is there any way to solve this? Thanks
Try this,
editable = false
and set URL for the event as
url: '/Event/Create/'
if you do not want any redirection to add use below link
url: 'Javascript:'
User this URL in events section. like this
$('#calendar').fullCalendar({
editable = false,
events: [
{
title: 'My Event',
start: '2010-01-01',
url: 'http://google.com/'
},
{
title: 'My Event',
start: '2010-01-01',
url: 'Javascript:'
}
// other events here
],
eventClick: function(event) {
if (event.url) {
window.open(event.url);
return false;
}
}
});

Dynamically changing url in sharrre Jquery

My question is the following:
I have multiple filters on my page, that filter events schedule dynamically, so when I click on any of the filters, my url changes without reloading the page.
For example:
http://.../schedule/#Screening,Free
http://.../schedule/#Talk,Expo
Then, I have share buttons with Sharrre:
.social.social--share-filters
a.icon.icon-twitter.js-twitter-filters(href="#", target="_blank")
a.icon.icon-linkedin2.js-linkedin-filters(href="#", target="_blank")
a.icon.icon-facebook.js-facebook-filters(href="#", target="_blank")
$('.js-facebook-filters').sharrre({
share: {
facebook: true,
},
url: window.location.href,
enableTracking: false,
enableHover: false,
click: function(api, options) {
api.simulateClick();
api.openPopup('facebook');
}
});
Inspite of that fact that inside sharrre I have url variable that equals to current link, it shares only that link which is derived when page is loaded for the first time.
I tried to put it inside click event on the icons - that does not work.
I tried to put sharrre inside a function (eg. initialiseShare) and do window.initialiseShare = initialiseShare; - that also does not work.
And I tried to remove and append the button, changing data-url attribute, and it also does not work.
function initialiseShare(link) {
$('.js-twitter-filters').sharrre({
share: {
twitter: true,
},
enableTracking: false,
enableHover: false,
click: function(api, options) {
api.simulateClick();
api.openPopup('twitter');
} }); }
+
$(document).ready(function() {
initialiseShare();
$('.js-twitter-filters').on('click', function(){
var clone = $('.js-twitter-filters').clone();
$('.js-twitter-filters').remove();
$('.social--share-filters').append(clone);
$('.js-twitter-filters').data('url', window.location.href);
initialiseShare();
return false;
});
});
+
jade for the icon
.social.social--share-filters
a.icon.icon-twitter.js-twitter-filters(href="#", target="_blank" data-url="#")
Please, help!
Thank you in advance!
P.S. I can use any other solution except those which could lead to buttons which cannot be customised in design.
Try this:
$('body').on('DOMNodeInserted', '.js-twitter-filters', function(e) {
$(this).sharrre({
share: {
twitter: true,
},
enableTracking: false,
enableHover: false,
click: function(api, options) {
api.simulateClick();
api.openPopup('twitter');
}
});
});
Explanation:
You're trying to bind to dynamically loaded elements. When your script executes on page load, the elements are not available for jQuery to perform the binding with "sharrre" - so you can use the .on() live binding delegate to bind to elements after insertion.
Reference:
http://api.jquery.com/on/

Passing object to Query plugin which includes data from the element applied to

I need to pass an object to some jQuery plugin. The plugin is applied to multiple elements. The data passed is obtained from the element the plugin is applied to.
How can I pass such an object to a Query plugin which includes data from the element applied to (i.e. $(this).parent().parent().data('id'))?
EDIT. without iterating over the results and applying the plugin each time.
$('#main').find('tr a.upload').fileupload({
formData: {id:$(this).parent().parent().data('id'),foo:'bar'}, //id is not included
start: function() {
//Doesn't work
$(this).fileupload({
formData: {example: 'test'}
});
},
done: function(e, data) {
console.log(this); //Am able to access element
},
});
Try this:
$('#main').find('tr a.upload').fileupload({
formData: function(form) {
return {
id: form.parent().parent().data('id'),
foo:'bar'
};
},
done: function(e, data) {
console.log(this); //Am able to access element
},
});
The function is received the form as a parameter, not as the this context.

Categories

Resources