0

I Would like to know if there is a possibility to modify an external js file via ajax post, for example:

Into my external js file i've got a variable :

var color;

So i would like my users to be able change the value of this variable by typing the HEX code into an input text form.

So when the type and press submit button to grab this value and post it to external js file and modify the variable.

I want something like this:

var colorVal = $('input').val();

$.post("external-file-js.js", {color: colorVal}, function(result){});

In external js file something like:

var color = $.get(colorVal); // HERE i dont know how to grab the value

$('body').css('background-color',color);

Thank you :)

billo
  • 33
  • 1
  • 1
  • 8

2 Answers2

0

I need to understand the use case you are intending in order to provide a full answer. If all you are attempting to do is change the background color, why do you need to run an AJAX post at all? Why not just change it?

In extenal.js (which is included in html body):

function changeColor(color) {
  $('body').css('background-color',color);
}

Then you bind the following event to the input:

$('input').change(function () {

// Though you may want to perform validation first.
changeColor($(this).val());

});

The only problem is if you need to change it long term, for multiple users. Then you would need to store the value server side (with a post and some type of CRUD system, in which case, check out JSON/JSONP)

Ezra Morse
  • 131
  • 1
  • 4
  • Actually i made a jQuery plugin and i would like into my web page that i host my plugin users to be able changing plugin options and preview it live. – billo Feb 16 '15 at 19:38
  • If you are just focused on live previews, then there is really no reason to post anything server side. Such options can be set in the plugin object (if the initialization returns itself as an object). Most of the plugins I develop separate the plugin logic from the render (View) logic. You can then call the render function multiple times, and it refreshes its view based on its object's variables. Consider the following: var pluginObject = $('.someSelector').myPlugin(); $(input).change(function() { pluginObject.setColor($(this).val()).render(); }); – Ezra Morse Feb 16 '15 at 20:09
  • Thank you buddy, this is the answer i want :) – billo Feb 16 '15 at 20:15
  • billo: Check out my caveman example: http://jsfiddle.net/rapsbyh8/1/ This is how I write my plugins--creating that render function that can be called externally is a huge help, especially for MVVM programming. Good luck. – Ezra Morse Feb 16 '15 at 20:25
  • This is awesome Ezra, great job, its exactly what i need , thank you again. I will send you soon the link to check out also my new events calendar plugin.... Thank you once more ;) :) – billo Feb 16 '15 at 20:43
0

It can be done. You would have to use some back-end code to rewrite your JS file. You would then need to remove any binds and use a script to reload your js document on the fly. Here is an example of loading JS on the fly. http://www.philnicholas.com/2009/05/11/reloading-your-javascript-without-reloading-your-page/

I am not sure why you would do this. I would just rework my JS file so I can avoid this mess.

osekmedia
  • 633
  • 7
  • 14