Member Avatar for DaveyMoyes

Hi Everyone, I am new to JQuery, Java Script & Ajax.

Hope you dont mind the daft questions I may post.
Here is my first Jquery, JS & Ajax question.

I have the follow script inside my head section of a website I am testing with.

<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script language="JavaScript" type="text/javascript">
function swapContent(cv) {
    $("#inPlayCards").html('<img src="blueloading.gif"/>').show();
    var url = "inplaycards-shoot.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $("#inPlayCards").html(data).show();
    });
}
</script>

my button for calling the script is -

            <button type="button" class="btn btn-primary btn-large" onClick="return false" onMouseDown="javascript:swapContent('inplaycards');">Click To Select Your Cards</button></p>

On the PHP page I have the following if -

$contentVar = $_POST['contentVar'];
if ($contentVar == "inplaycards") {

mysql db...

}

Now, the above script calls my url, the php page does the mysql query and returns the result in the requested div, no problems there, until I tried adding a second script to the page.

inside the script tags.

function shootone(cv) {
    $("#one").html('<img src="blueloading.gif"/>').show();
    var url = "inplaycards-shoot1.php";
    $.post(url, {contentVar: cv} ,function(data) {
       $("#one").html(data).show();
    });
}

The button for the second script is

            <button type="button" class="btn btn-success btn-large" onClick="return false" onMouseDown="javascript:shootone('shootone');">Click To Select First Card</button></p>

The if statment on my php is

$contentVar = $_POST['contentVar'];
if ($contentVar == "shootone") {

mysql db...

}

Is it possible to have more than one script on a single page, as I need another three to run when I click each individual button.

Any help would be very much appreciated,
Thanks

  • 3 Contributors
  • 4 Replies
  • 216 Views
  • 12 Hours Discussion Span
  • Latest Post Latest Post by pixelsoul

Dani AI

Generated

Multiple small scripts on the same page are fine; the symptom “second button does nothing” usually comes from one of these causes: script load order or duplicate jQuery, an inline attribute conflict (for example onClick="return false" combined with onMouseDown), the target element/ID being missing or replaced by an AJAX response, or event bindings that were attached to nodes that later got replaced. ’s pointer to the jQuery FAQ about event handlers after AJAX is on the right track.

A robust, scalable approach is to stop relying on inline handlers and centralize the behavior with event delegation and data attributes. That both reduces duplicated functions and survives DOM replacements:

<button class="btn ajax-call" data-url="inplaycards-shoot1.php" data-target="#one" data-cv="shootone">
  Click To Select First Card
</button>
$(document).on('click', 'button.ajax-call', function(e) {
  e.preventDefault();
  var $b = $(this);
  var url = $b.data('url'), cv = $b.data('cv'), target = $b.data('target');
  $(target).html('<img src="blueloading.gif">');
  $.ajax({ type: 'POST', url: url, data: { contentVar: cv } })
    .done(function(resp){ $(target).html(resp); })
    .fail(function(){ $(target).html('Error loading content.'); });
});

Quick troubleshooting checklist (short and practical): open DevTools Console for JS errors; watch Network/XHR to see if the second POST is sent and what the response/status is; confirm jQuery is loaded exactly once and before any custom script; ensure element IDs (#one, #inPlayCards) are unique and present; remove conflicting inline onClick="return false" attributes; add a simple console.log at handler start to verify it runs.

Tiebacks: ’s suggestion to check for JS/PHP errors and ’s FAQ link are useful first steps. For minimal duplication and fewer surprises, prefer a single delegated handler (or a small dispatcher function) rather than many near-identical functions.

Recommended Answers

All 4 Replies

Member Avatar for GliderPilot

Yes you can have as many scripts as you want on a single page. Is this throwing a JS or PHP error?

Member Avatar for pixelsoul

On a side note, why not make one function to handle all of this rather than multiple different functions that do almost the identical thing.

Member Avatar for DaveyMoyes

Hi GliderPilot, No, it's not giving any error at all, when I click on the second button, nothing happens.

, I am new to js functions etc and wouldnt know where to start...

Can someone point me in the right direction how I can have multiple scripts on the same page

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.